PDA

View Full Version : vertical alignment problem - need expert

Wee Bubba
04-24-2007, 10:52 PM
hello there. i am trying to get my divContent1 to align to the right of my divMenu. instead it is appearing below the menu. i have tried multiple variations of float, clear and positioning css tags but i cant get it to do what i want. i would v much appreciate it if an expert could tell me what i am doing wrong. many thanks

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divShell">
<div id="divHeader"></div>
<div id="divContainer">
<div id="divMenu">
<div class="menuitem"><a href="#">HOME</a></div>
<div class="menuitem"><a href="#">FAQ</a></div>
<div class="menuitem"><a href="#">ORDER NOW</a></div>
<div class="menuitem"><a href="#">TESTIMONIALS</a></div>
<div class="menuitem"><a href="#">TELL A FRIEND</a></div>
<div class="menuitem"><a href="#">CONTACT ME</a></div>
<div style="height:40px;" class="menuitem"><a href="#">SOUNDS LIKE A SCAM?</a></div>
<div class="menuitem"><a href="#">AFFILIATES $$$</a></div>
<div class="menuitem"><a href="#">FREE T-SHIRT</a></div>
<img src="Images/AsSeenOnTV.gif" />
<div>
<div id="divContent1">WARNING: THIS SITE CONTAINS VALUABLE INFORMATION
</div>
</div>
</div>
</body>
</html>

CSS

body{
font-family:Arial, Helvetica, sans-serif;
background-repeat:repeat;
text-align:center;
min-width:830px;
margin:0px auto;
padding:0px;
background-image:url(Images/Background.gif);}
#divContainer{background-position:top right;background-repeat:no-repeat;background-color:white;padding:10px;background-image:url(Images/ShowMeTheMoney.jpg);}
#divContent1{left:120px;top:200px;}
#divHeader{height:152px;background-image:url(Images/Header.gif);padding-bottom:5px;background-repeat:no-repeat;background-color:white;}
#divMenu{width:120px;text-align:center;}
#divShell{text-align:left;width:830px;margin:0px auto;}
.menuitem{
font-family:Arial, Helvetica, sans-serif;
font-weight:bolder;
font-size:13px;
border:double;
border-color:white;
border-width:4px;
margin-bottom:5px;
padding:2px;
height:20px;
background-color:#003399;
line-height:20px;}
.menuitem a:link{display:block;color:white;text-decoration:none;}
.menuitem a:hover{display:block;color:white;background-color:red;text-decoration:none;}
.menuitem a:active{display:block;color:white;text-decoration:none;}
.menuitem a:visited{display:block;color:white;text-decoration:none;}
marilynn.fowler
04-24-2007, 11:30 PM
You forgot the slash in the closing div tag of your divMenu. If you run your code through the W3C validator it will catch such typos.

I set the top margin of the divMenu to zero and floated it. I simplified the code a bit so that it would be easier for you to see what I did.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#divMenu {width:120px; float:left; margin-top:0; padding: 0;}
#divMenu li {list-style-type:none;}
#divMenu a {display:block; color:white; text-decoration:none; background-color:black; text-transform:uppercase;}
#divMenu a:hover { background-color:red; }
</style>
</head>

<body>
<ul id="divMenu">
<li><a href="#">Home</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Order now</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Tell a friend</a></li>
<li><a href="#">Contact me</a></li>
<li><a href="#">Sound like a scam?</a></li>
<li><a href="#">affiliates $$$</a></li>
<li><a href="#">Free t-shirt</a></li>
</ul>
<div id="divContent1">WARNING: THIS SITE CONTAINS VALUABLE INFORMATION</div>
</body>
</html>
Wee Bubba
04-25-2007, 12:03 AM
thanks very much that helped me fix my problem. good karma for you today! :) i will remember to validate my pages in future as you quite rightly said.