Textbox Over Image

Hello,

I am working with this design (it is already HTML/CSS coded). HabATTACK Housekeeping.

I need to put a text box next the the “Username |” and “Password |” fields, however, I do not know how to do that with CSS.

Can anyone help me?

The first thing to do is remove the image you’ve used and use form elements instead. For example, use a proper label element for “password” etc, so that the form is usable. You could achieve the look of that image with CSS anyhow.

This thread has an example of how to do this:

More styling will be needed, but make a start with that and then come back for more advice. :slight_smile:

Ralph’s on the right track with that… see this:


<div id="container">

<div id="header"></div>
<div id="welcome"></div>
<div id="top"></div>
<div id="midsection">
<div id="username"></div>
<div id="password"></div>
<div id="bottom"></div>
<div id="notice"></div>

</div>

You have NO content… You might as well not even have markup for all the good that’s doing you; Welcome to why I keep saying “drawing a pretty picture before you have semantic markup is the road to failure”.

Of course the illegible white goofy-font with black outlines isn’t helping matters much either.

You have to ask yourself “what are these elements” and then mark them up with the correct tags… What you’ve done is just slap a bunch of div in there with nothing remotely resembling content.

Just a quick and dirty… You have a fixed width element, so that container DIV is ok. I like to call mine #pageWrapper, but same difference. (container is a bit vague – every DIV is a container). Then you have a topmost heading… we have numbered tags called heading, so get the text for that in there on one of those. The next bit of text should probably be the LEGEND for your form, then you have the labels “username” and “password” and their two inputs, so you use label and input tags. I’d probably also tack a submit button in there too. You’ve got a near invisible copyright in there (not sure what’s up with that) so that’s probably a paragraph after the form… and then the footer. (or is the copyright supposed to be in the footer?)…

Guessing wildly here, but this should probably be your HTML:


<div id="pageWrapper">

	<h1>
		HabATTACK<br />
		<small>Housekeeping</small>
	</h1>
	
	<form action="#" method="post" id="login">
		<fieldset>
			<legend><span>You've reached the HabATTACK Housekeeping Login Page</span></legend>
			<label for="userName">Username:</label>
			<input
				type="text"
				id="userName"
				name="userName"
			/><br />
			<label for="password">Password:</label>
			<input
				type="text"
				id="password"
				name="password"
			/><br />
		</fieldset>
	</form>
	
	<div id="footer">
		Copyright 2011 - Housekeeping made by Bobby<br />
		<strong>NOTICE: If you are not staff, please don't try to log in. Your I.P. is being logged.</strong>
	<!-- #footer --></div>
	
<!-- #pageWrapper --></div>

Putting all that content text into a image like that is just inaccessible trash, and completely the wrong way to go about building a website. Even if you want those image appearances you should code the content in there for people on screen readers, search engines, people browsing with images disabled due to low bandwidth access or metered connection plans, etc, etc, etc… If you REALLY want that image appearance, that’s where advanced techniques like gilder-levin image replacement come into play…

That or webfonts.

[ot]Nice work, Jason.

Wow, I see you have a new avatar! Suits your username rather well. :smiley: [/ot]