Magrins are failing me.

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:

HTML 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.

loserWILL · 19-12-2007, 02:01 AM

I can't edit - Please use the following code instead:

HTML 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 align="center">
<div id="banner"></div>
</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 align="center">
<div id="copyright_wrap">
<div id="copyright_top"></div>
<div id="copyright_middle"></div>
<div id="copyright_bottom"></div>
</div>
</div>

loserWILL · 19-12-2007, 09:33 PM

bump. ^_^

Edited by opensourcehost (Forum Super Moderator): Please do not multiple post.

Chippiewill · 20-12-2007, 10:57 AM

Try not to bump unless over a day, the mods normally understand that

Also on your behalf, mods i think he meant the name of the thread to be:

Margins are failing me

I think it was a typo

loserWILL · 20-12-2007, 10:07 PM

Thanks for the above post?

I really need this, does anybody know why they aren't working?

Thread: Magrins are failing me.

Thread Tools

Magrins are failing me.

Posting Permissions