PDA

View Full Version : Div tag not lining up properly.


azzaman
10-18-2009, 02:31 PM
Ok I am struggling with my page. I include a div tag under a navigation bar that runs horizontal along the page. The div tag should be 900 wide and 90 high. I want to put a photo in there. I initially put in a photo that was say 150 by 90 and it lined up from the left..
Now the div tag in on sits on the right of centre and is smaller. When i run the curser over it the div dreamweaver it says the width is 900(200). I have tried editing the .dwt. I have also tried inserting a picture (900x90) in the div on a .html page but the image starts left of centre and runs too far out. Just don't know why this us happening
This is the index.htm code....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The story so far</title>
<style type="text/css">
<!--
body {
background-image: url();
background-repeat: repeat-x;
background-color: #CCC;
}
-->
</style>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="logo"><a href="index.html"><img src="images/title.jpg" alt="The story so far" width="800" height="100" border="0" /></a></div>
<div id="navigation">
<h3><a href="#">Home</a> <a href="#">Photos</a> <a href="#">Annimation</a> <a href="#">PhotoShop</a> <a href="#">Blog</a> <a href="#">Contact</a></h3>
</div>
<div id="headerImg"></div>
<div id="bodyArea">
<div id="mainWriting"></div>
<div id="footer">azza332.com &copy; 2009</div>
</div>
</div>
</body>
</html>

Is the the layout css code

@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
#wrapper {
background-color: #f7f7f7;
width: 900px;
margin-right: auto;
margin-left: auto;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #666;
border-left-color: #666;
}
#wrapper #logo {
height: 110px;
background-color: #999;
}
a img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#wrapper #navigation {
height: 35px;
background-color: #999;
background-image: url(../images/pixyrollover/buttonbg.jpg);
background-repeat: repeat-x;
}
#wrapper #navigation a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
font-weight: bold;
color: #FFF;
display: block;
float: left;
height: 35px;
width: 100px;
text-align: center;
line-height: 40px;
background-image: url(../images/pixyrollover/Untitled-1.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#wrapper #headerImg {
height: 90px;
width: 900px;
background: #bbb;
}
#wrapper #bodyArea #mainWriting {
background-color: #FFF;
width: 900px;
background-repeat: repeat;
}
#wrapper #bodyArea #gallery {
width: 900px;
height: 500px;
}
#wrapper #bodyArea #gallery img {
border: 4px solid #666;
margin-top: 30px;
margin-right: 100px;
margin-bottom: 30px;
margin-left: 100px;
}
#wrapper #bodyArea #footer {
background-color: #999;
height: 30px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
}
#wrapper #navigation a:hover {
background-position: bottom;
}
#wrapper #bodyArea #gallery img:hover {
border: 4px solid #000;
margin-top: 30px;
margin-right: 100px;
margin-bottom: 30px;
margin-left: 100px;
}
#wrapper #headerImg {
height: 90px;
width: 900px;
text-align: left;
}



Hope I have attached this code to the page ok

DWcourse
10-18-2009, 03:31 PM
Try putting an html element with the CSS property clear: left or clear:both after your navigation.

azzaman
10-18-2009, 05:18 PM
Thanks for that.. I tell you its a bit of a learning process, moving from PS, ID and AI to dreamweaver. I did use Frontpage about 1000 year ago.....
Cheers again!!