Kevin M Posted January 13, 2007 Share Posted January 13, 2007 I just finished coding a new layout. I finally figured out how to do the Divs a certain way that I wanted. There is a BG image, with repeat-y and then there is a DIV which has the contained in it. If you look at this page, all the Divs line up, and it all looks fine: Link But then as I add in more content, it goes all wonky, like this: Link. If you look right at the bottom, when the Div gets a certain ammount of content inside, it shows the banner again, which isn't what I want. I want it so only my background image repeats, to keep the divs at the same height, and it all lines up at the bottom of the page. Here's my code for the page: CSS body, td, th { font-family : Verdana, Arial, Helvetica, sans-serif;font-size : 11px;color : #ffffff;} body { background-color : #000000;background-position : top center;background-image: url(/layout2/bg.png);background-repeat: repeat-y;margin: 0px;} a { color : #ffffff;text-decoration : none;} a:hover, a:active { color : #ffffff;text-decoration : underline;} #container { position : absolute;z-index : -1;background-color: #000000;width : 100%;top : 0;} #banner { position : absolute;z-index : 0;background-image : url(/layout2/header.png);background-repeat : no-repeat;height : 200px;width : 800px;top : 0;}#navigation { position: absolute;z-index : 1;width : 175px;left : 13px;top : 200px;right : 608px;bottom : 0;text-align : center;} #content { position: absolute;z-index : 1;width : 382px;left : 210px;top : 212px;right : 210px;bottom : 0;text-align: center;} #extras { position: absolute;z-index : 1;width : 175px;left : 612px;top : 200px;right : 13px;bottom : 0;text-align : center;} .center { text-align : center;margin-left : auto;margin-right : auto;} XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" type="text/css" href="styles.css" /><title>Harry Potter Layout by Kevin of forums.dervish-banges.com and rahponline.com</title></head><body><div id='container'><div id='banner'></div> <div id='navigation'>Navigation Here</div> <div id='content'>SITE CONTENT, SITE CONTENT,SITE CONTENT, SITE CONTENT,SITE CONTENT, SITE CONTENT,SITE CONTENT, SITE CONTENT,SITE CONTENT, SITE CONTENT</div> <div id='extras'>Extras Here</div></div></body></html> My background image is basically a black background, with 3 areas in blue that are the right size for each Div. I want that image to repeat as many times as needed, but the banner to only be at the top. So when the ammount of content exceeds the most, like in the second example, it repeats the background image, not the banner then the BG image.I can explain more if needed.Thanks,Kevin Link to comment Share on other sites More sharing options...
Kevin M Posted January 13, 2007 Author Share Posted January 13, 2007 I figured this out. If a mod can delete this, it would be appreciated. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now