Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Login "image" query...

Options
  • 25-10-2006 11:30pm
    #1
    Adam
    Closed Accounts Posts: 8,866 ✭✭✭


    Hi guys,

    I'm a bit stuck here, I have a PSD file, its a template for a website that I'm going to slice and use, thats the easy part. But within the template there are too "inputs" for login, obviously they are just part of the image as opposed to actual inputs. How do I go about making them actual inputs in the html?

    Cheers,

    Adam

    EDIT: This is what I mean -


Comments

  • Options
    #2
    DonkeyStyle \o/
    Closed Accounts Posts: 7,145 ✭✭✭DonkeyStyle \o/


    It depends really.


  • Options
    #3
    Adam
    Closed Accounts Posts: 8,866 ✭✭✭Adam


    Well that was helpful... On what?


  • Options
    #4
    DonkeyStyle \o/
    Closed Accounts Posts: 7,145 ✭✭✭DonkeyStyle \o/


    Actually, to expand on that...
    It depends on how strictly you need/want to follow the spec.
    You could either replace as much of the image as you can with html/css/text and only use image elements where you have to. [see bleh2.zip]
    It lacks the exact feel of the original design, but if you're taking this approach with the whole site and doing a loose interpretation, then it'll all fit together in the end.

    Or if you're sticking 100% strictly to everything layed out in the image you could use the original image [the one you posted] and overlay input elements that have essentially had their shít turned off, removing the border and background and just letting them sit somewhat invisible over the image... letting the image be the guide to where the user should enter the login data, as opposed to the visible input element borders... you can then use CSS positioning to place these invisible inputs exactly over where the image has them.
    I've done up a little example page in bleh1.zip that demonstrates this.
    Though it doesn't have the submit button or the other links, I have to head out and buy smokes now, so I'll let you figure that one out... maybe a 100% transparent gif button, or an image-map link or whatever... use your imagination. ;)

    :eek:


  • Options
    #5
    DonkeyStyle \o/
    Closed Accounts Posts: 7,145 ✭✭✭DonkeyStyle \o/


    Oh and a third way to do it would be to chop that image you posted into about 20 pieces and assemble it using a really nasty nested-table mini-layout.
    Which is how I'd have done it 2 years ago... using no CSS at all.

    PS. And for God's sake avoid using jpg for these things, compression artifacts look rotten. :eek:


  • Options
    #6
    Adam
    Closed Accounts Posts: 8,866 ✭✭✭Adam


    Really nice work there, I appreciate it! I'll jot this down as the thing I learned today! :D

    I had read somewhere that you could do it with dreamweaver and spent ages last night trying to suss that out, and I despise that fúckin program!

    What image format would you recommend? I'm assuming .png going by your examples there?

    Thanks again!

    EDIT: /offers smoke


  • Advertisement
  • Options
    #7
    DonkeyStyle \o/
    Closed Accounts Posts: 7,145 ✭✭✭DonkeyStyle \o/


    Apparently there are some issues with colour reproduction with png's... like if you're trying to match the html background colour, the same RBG colour sometimes doesn't appear the same... or something like that, I've only ever experienced this once, so I still use them anyway for unimportant pet projects.
    Gif is a popular one to use, as long as you're sure the conversion to 8-bit colour isn't doing anything funny like dithering... which IMO looks just as shít as heavy jpeg artifacts.
    Whatever format you chose, I'd reccomend re-opening and zooming into the images once they're exported... check them over for artifacts... use the colour-dropper to make sure the colours that appear in the final site match the ones in the original psd.


  • Options
    #8
    Ziycon
    Registered Users Posts: 1,987 ✭✭✭Ziycon


    Just colour in the to text boxes in the image, then set the image as the background of a TD row using CSS and the code in the two text boxes in the cell that has the image as the background!


  • Options
    #9
    Adam
    Closed Accounts Posts: 8,866 ✭✭✭Adam


    Morning ;)

    Cheers for that, I got it sorted with the css replication method though, worked better than i had expected!


  • Options
    #10
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    try this using no images only css:
    <body style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">

<div id="login" style="background-color:#CCCCCC; border:1px solid #999999; width:180px; height:150px; font-weight:bold;">
	<div id="top_login" style="background-color:#000; color:#fff; padding:3px;">
		Login
	</div>
	<div id="form_login" style="color:#000;">
		<form>
		USERNAME<br />
		<input type="text" size="45" style="width:160px; font-size:10px; border-top:2px solid #333333;" /><br />
		PASSWORD<br />
		<input type="password" size="30" style="width:100px; font-size:10px; border-top:2px solid #333333;" />&nbsp;
		<input type="submit" style="background-color:#FF0000; color:#FFFFFF; font-size:10px; width:40px;" value="Login" />
		<br />
		</form>
	</div>
</div>
</body>


  • Options
    #11
    Serbian
    Registered Users Posts: 2,157 ✭✭✭Serbian


    The easiest and most correct way of doing this with an image is:
    <input name="submit" type="image" value="Submit" src="arrow_image.png" alt="Submit Button" />


  • Advertisement
  • Options
    #12
    wheres me jumpa
    Registered Users Posts: 4,478 ✭✭✭wheres me jumpa


    4.22am, the moment of enlightenment! Go to bed!


Advertisement