Positioning text

HTML & CSS
1

Trying to get the ‘Sign up’ text and the top to sit to the right of the Go button.

Here’s my HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
>
<head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="css/reset.css"
	media="screen,projection,tv"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="css/style.css"
	media="screen,projection,tv"
/>

<title>Clothes Shop</title>

</head>



<body>

	<div id="content">

		<div id="top">

			<ul id="tabs">
				<li>Articles</li>
				<li>Contact</li>
				<li>Privacy</li>
				<li>Terms</li>
			</ul>

			<div id="loginArea">

				<div class="floatLeft">
					<h3>Sign In</h3>
				</div>
						
							<form action="#" method="post">
								<input type="text" name="username" value="Username" class="textBoxes" />
								<input type="password" name="password" value="Username" class="textBoxes" />
								<input type="submit" value="Go" class="goBtn" />
							</form>
					
					
					<h3>Sign Up</h3>
				

			</div>

		</div>

		<div id="header"></div>
		<div id="nav"></div>
		<div id="gallery"></div>
		<div id="promo"></div>
		<div id="latest"></div>
		
		<div id="other"></div>
		<div id="bottom"></div>

	</div>	


</body>



</html>

And here’s my CSS

body{
	font-family:arial;

}

#content{
	width:980px;
	height:auto;
	margin:0 auto;


}

/*------Begin-------Top bar*/

#top{
	width:980px;
	background-color:#2d2d2d;
	height:44px;
}

#tabs{
	color:#999;
	font-size:12px;
	overflow: hidden;
	padding-left: 14px;
	float:left;
}

#top li{
	float: left;
	display: block; 
	line-height: 44px;
	text-decoration: none;
	padding: 0 14px;
}

#top li:hover{
	background-color: #999;
 	color:#2d2d2d;
 }

 #loginArea{
 
 	width:600px;
 	height:44px;
 	float:right;
 	background-color:yellow;
 	line-height:44px;
 	

 }

 #loginArea h3{
 	font-size:10px;
 	
	
 }

 .floatLeft{
 	float:left;
 }

 .textBoxes{
 	background-color:transparent;
 	background-image:url('../images/textBoxBg.png');
 	border:none;
 	width:127px;
 	height:26px;
 	background-repeat:no-repeat;
 	color:#8e8e8e;
 	padding-left:0px;
 	margin-left:10px;
 }

 .goBtn{
 	background-image:url('../images/goBtnBg.png');
 	background-repeat:no-repeat;
 	width:33px;
 	height:25px;
 	background-color:transparent;
 	border:none;
 }




/*-----------End--------------------------------Top bar*/

#header{
	width:980px;
	height:100px;
	background-color:green;
}

#nav{
	width:980px;
	height:48px;
	background-color:blue;
}

#gallery{
	width:670px;
	height:315px;
	background-color:orange;
	margin-top:16px;
	float:left;
}

#latest{
	width:670px;
	height:580px;
	background-color:red;
	margin-top:16px;
	float:left;


}

#promo{
	width:296px;
	height:632px;
	background-color:yellow;
	margin-top:16px;
	float:right;

}

#other{
	width:980px;
	height:236px;
	background-color:purple;
	clear:both;
	margin-top:16px;
	float:left;
	

}

#bottom{
	width:980px;
	height:114px;
	background-color:#2d2d2d;
	margin-top:16px;
	float:left;

	
}

Any other errors I have made can you please point them out also, thanks.

2

Hi,

If you floated the login form then the sign up text would align to the right.

e.g.


#loginArea form { float:left }

However I don’t think that an h3 is suitable for either the sign in or sign up elements. The “Sign-in” should probably be a legend element and you need a block level elements as the first child of a form otherwise its not valid in strict so use the fieldset and legend anyway. The legend is hard to position unfortunately.

I assume the sign up is a link and so just use an anchor within the same form.

It looks like you have a two column layout and you should float just the two columns and then stack content in each and not use multiple left and right floats as that is very fragile.

I assume the heights that you have on the elements are for demo only and really you don;t weant any heights in there and let the content dictate the height.

I’d do something very roughly like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
>
<head>
<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>
<meta
	http-equiv="Content-Language"
	content="en"
/>
<link
	type="text/css"
	rel="stylesheet"
	href="css/reset.css"
	media="screen,projection,tv"
/>
<link
	type="text/css"
	rel="stylesheet"
	href="css/style.css"
	media="screen,projection,tv"
/>
<title>Clothes Shop</title>
<style type="text/css">
body { font-family:Arial, Helvetica, sans-serif }
fieldset, legend, form {
	border:none;
	margin:0;
	padding:0
}
#content {
	width:980px;
	margin:0 auto;
}
/*------Begin-------Top bar*/

#top {
	width:980px;
	background-color:#2d2d2d;
	height:44px;
}
#tabs {
	color:#999;
	font-size:12px;
	overflow: hidden;
	padding-left: 14px;
	float:left;
}
#top li {
	float: left;
	display: block;
	line-height: 44px;
	text-decoration: none;
	padding: 0 14px;
}
#top li:hover {
	background-color: #999;
	color:#2d2d2d;
}
#loginArea {
	width:600px;
	height:44px;
	float:right;
	background:yellow;
	line-height:44px;
	position:relative;
}
#loginArea a { font-size:10px; }
.textBoxes {
	background:blue url('../images/textBoxBg.png') no-repeat;
	border:none;
	width:127px;
	height:26px;
	line-height:26px;
	background-repeat:no-repeat;
	color:#8e8e8e;
	padding:0;
	margin:0 0 0 10px;
	vertical-align:middle;
}
.goBtn {
	background:red url('../images/goBtnBg.png') no-repeat;
	width:33px;
	height:25px;
	line-height:25px;
	border:none;
	vertical-align:middle;
	padding:0;
	margin:0;
}
#loginArea legend span {
	position:absolute;
	left:10px;
	top:0px;
	font-size:120%;
	font-weight:bold;
}
#loginArea fieldset { padding-left:5em }
* html #loginArea input, * html #loginArea a { display:inline-block }
/*-----------End--------------------------------Top bar*/

#header {
	width:980px;
	height:100px;
	background:green;
}
#nav {
	width:980px;
	height:48px;
	background:blue;
}
#main {
	width:670px;
	float:left;
	margin:16px 0;
	clear:both;
}
#gallery {
	width:670px;
	height:315px;
	background:orange;
}
#latest {
	width:670px;
	height:580px;
	background:red;
	margin-top:16px;
}
#promo {
	width:296px;
	height:632px;
	background:yellow;
	margin-top:16px;
	float:right;
}
#other {
	width:980px;
	height:236px;
	background:purple;
	clear:both;
	margin-top:16px;
}
#bottom {
	width:980px;
	height:114px;
	background:#2d2d2d;
}

</style>
</head>

<body>
<div id="content">
		<div id="top">
				<ul id="tabs">
						<li>Articles</li>
						<li>Contact</li>
						<li>Privacy</li>
						<li>Terms</li>
				</ul>
				<div id="loginArea">
						<form action="#" method="post">
								<fieldset>
										<legend><span>Sign In</span></legend>
										<input type="text" name="username" value="Username" class="textBoxes" />
										<input type="password" name="password" value="Username" class="textBoxes" />
										<input type="submit" value="Go" class="goBtn" />
										<a href="#">Sign Up</a>
								</fieldset>
						</form>
				</div>
		</div>
		<div id="header"></div>
		<div id="nav"></div>
		<div id="main">
				<div id="gallery"></div>
				<div id="latest"></div>
		</div>
		<div id="promo"></div>
		<div id="other"></div>
		<div id="bottom"></div>
</div>
</body>
</html>

You really should be starting with some real content though because that usually dictates how the page should be structured and gets you starting with some logical and semantic html to work with.