loserWILL
19-12-2007, 01:42 AM
I've finished coding my layout, but my margins are failing me. They're just a scattered mess. If you can fix it up, or tell me what's wrong, that'd be great. +rep too. Here's my code:
<style type="text/css">
body {
background-image: url(images/bg.gif);
margin-top: 0;
font-family: "Trebuchet MS";
font-size: 12px;
}
body a:link {
text-decoration: none;
}
body a:hover {
text-decoration: none;
font-weight: bold;
}
#banner {
background-image: url(images/banner.gif);
align: center;
width: 800px;
height: 155px;
}
#navigation_wrap {
width: 166px;
float: left;
margin-top: 33px;
margin-left: 58px;
}
#content_wrap {
width: 439px;
margin-top: 33px;
margin-left: 58px;
}
#copyright_wrap {
width: 658px;
}
#navigation_top {
background-image: url(images/navigation_top.gif);
width: 166px;
height: 35px;
}
#navigation_middle {
background-image: url(images/navigation_middle.gif);
width: 166px;
}
#navigation_bottom {
background-image: url(images/navigation_bottom.gif);
width: 166px;
height: 11px;
}
#content_top {
background-image: url(images/content_top.gif);
height: 35px;
width: 439px;
}
#content_middle {
background-image: url(images/content_middle.gif);
width: 439px;
}
#content_bottom {
background-image: url(images/content_bottom.gif);
height: 11px;
width: 439px;
}
#copyright_top {
background-image: url(images/copyright_top.gif);
height: 35px;
width: 658px;
}
#copyright_middle {
background-image: url(images/content_middle.gif);
width: 658px;
}
#copyright_bottom {
background-image: url(images/copyright_bottom.gif);
width: 658px;
height: 11px;
}
</style>
</head>
<body>
<!-- the banner -->
<div id="banner"></div>
<!-- the navigation divs -->
<div id="navigation_wrap">
<div id="navigation_top"></div>
<div id="navigation_middle">yip i ay.</div>
<div id="navigation_bottom"></div>
</div>
<!-- the content divs -->
<div id="content_wrap">
<div id="content_top"></div>
<div id="content_middle"></div>
<div id="content_bottom"></div>
</div>
<!-- the copyright div - DO NOT REMOVE! -->
<div id="copyright_wrap">
<div id="copyright_top"></div>
<div id="copyright_middle"></div>
<div id="copyright_bottom"></div>
</div>
Moved by Agesilaus (Forum Moderator) from Design and Development: Please post in the correct forum.
<style type="text/css">
body {
background-image: url(images/bg.gif);
margin-top: 0;
font-family: "Trebuchet MS";
font-size: 12px;
}
body a:link {
text-decoration: none;
}
body a:hover {
text-decoration: none;
font-weight: bold;
}
#banner {
background-image: url(images/banner.gif);
align: center;
width: 800px;
height: 155px;
}
#navigation_wrap {
width: 166px;
float: left;
margin-top: 33px;
margin-left: 58px;
}
#content_wrap {
width: 439px;
margin-top: 33px;
margin-left: 58px;
}
#copyright_wrap {
width: 658px;
}
#navigation_top {
background-image: url(images/navigation_top.gif);
width: 166px;
height: 35px;
}
#navigation_middle {
background-image: url(images/navigation_middle.gif);
width: 166px;
}
#navigation_bottom {
background-image: url(images/navigation_bottom.gif);
width: 166px;
height: 11px;
}
#content_top {
background-image: url(images/content_top.gif);
height: 35px;
width: 439px;
}
#content_middle {
background-image: url(images/content_middle.gif);
width: 439px;
}
#content_bottom {
background-image: url(images/content_bottom.gif);
height: 11px;
width: 439px;
}
#copyright_top {
background-image: url(images/copyright_top.gif);
height: 35px;
width: 658px;
}
#copyright_middle {
background-image: url(images/content_middle.gif);
width: 658px;
}
#copyright_bottom {
background-image: url(images/copyright_bottom.gif);
width: 658px;
height: 11px;
}
</style>
</head>
<body>
<!-- the banner -->
<div id="banner"></div>
<!-- the navigation divs -->
<div id="navigation_wrap">
<div id="navigation_top"></div>
<div id="navigation_middle">yip i ay.</div>
<div id="navigation_bottom"></div>
</div>
<!-- the content divs -->
<div id="content_wrap">
<div id="content_top"></div>
<div id="content_middle"></div>
<div id="content_bottom"></div>
</div>
<!-- the copyright div - DO NOT REMOVE! -->
<div id="copyright_wrap">
<div id="copyright_top"></div>
<div id="copyright_middle"></div>
<div id="copyright_bottom"></div>
</div>
Moved by Agesilaus (Forum Moderator) from Design and Development: Please post in the correct forum.