Jump to content
Totoquil

Adding to the end of the body

Recommended Posts

what you want to do is simple. add a div below the content and tell the css to add the background image in the div. thats how all my sites do it.<div id="content"></div><div id="content_bottom"></div>

Share this post


Link to post
Share on other sites

because your site uses positioning, mainly absolute these elements occupy no space! you position them where you require, and they are fixed, you can't just add a div container below them you have to set the top, bottom, left, right properties of that container to physically position it underneath the others, its not fluid either the height is set, so it won't adjust to content, and force the bottom container down with it, that's why you should avoid using position unless in some rare circumstance you require it, THIS is not one of them.

Edited by dsonesuk

Share this post


Link to post
Share on other sites
because your site uses positioning, mainly absolute these elements occupy no space! you position them where you require, and they are fixed, you can't just add a div container below them you have to set the top, bottom, left, right properties of that container to physically position it underneath the others, its not fluid either the height is set, so it won't adjust to content, and force the bottom container down with it, that's why you should avoid using position unless in some rare circumstance you require it, THIS is not one of them.
I re-did the CSS: http://pokemondarkaura.netne.net/testcssI also tested it with my shortest page and got this result: http://pokemondarkaura.netne.net/testpage.htmI only used position: absolute on the left and right menus because they would move with the content.The only problem is I can't get the the disclaimer in the actual spot for it. >.> I took out the code that I tried to use to do it because it didn't work.EDIT: I fixed it temporarily by using <br /> in the actual document, but it's kind of awkward having it like that. Edited by Dire_Wolf

Share this post


Link to post
Share on other sites

remove banner, or just comment it out, move all of the right container above the content container, add wrapper container around all other container, and you should end up with layout like this<div id="wrapper"><!--<div id="banner"> </div>--><div id="leftmenu"> ...</div><!-- END leftmenu --><div id="rightmenu">...</div><!-- END rightmenu --><div id="content">....</div><!-- END content --> <div id="disclaimer">....</div><!-- END disclaimer --></div><!-- END wrapper --> and with this use css below

body{margin:0;font-family: Comic Sans, Comic Sans MS, cursive;font-size: 12px;background-color: #5A5D60;background-image: url('/images/layoutmiddle.png');background-position: center center;text-align: justify;}h1, h2, h3, h4, h5, h6 {color: #1D63B8; letter-spacing: 1px;font-weight: bold; text-align: center;}h1{font-size: 14px; width: 160px; border-bottom: 1px dotted #596573;}h2{font-size: 20px; }h3{font-size: 12px; border-bottom: 1px dotted #596573;}h4{font-size: 20px; border-bottom: 1px dotted #596573;}a:link, a:visited, a:active{ text-decoration: none; color: #E4DB32; }a:hover { text-decoration: none; color: #414299; }#wrapper{margin: 0 auto; width:1000px; background:url(/images/layouttop.png) no-repeat; overflow:hidden;}#leftmenu{float:left;margin-top:210px;text-align:center;width:170px;}#rightmenu{float:right;margin-top:210px;text-align: center;width: 170px; }#content{margin-left:210px;margin-right:210px;margin-top:450px;}#disclaimer{text-align: center;height: 200px;width: 100%;background:transparent url(/images/layoutbottom.png) no-repeat scroll 0;clear:both;}

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Thanks! That's amazing! :) But there just one tiny thing. The menus are off by a little bit. Is there a way you can move them? I tried using margin-left and margin-right, but that didn't help.

Share this post


Link to post
Share on other sites

The left and right menus should be the same width as the width from the left to right edge of the rounded image above it, with word 'navigate' in it, to be truly centred (about 190px).

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...