Hello All, I just started learning CSS about a month ago and its been a thrill ride. I am working on a project with a friend and we have ran into a little problem. We have designed our site, and input it into our html editor. However, once we develop the css code for the site everything else works fine except our '[div class="content"]'. We need it to show up at the top of the page instead of at the bottom. Here is a link to what the site should look like: http://img152.imageshack.us/img152/4302/laytestxk6.jpg Here is a link to the css code: http://www.etazetanupes.com/laytest.rtf We can't seem to figure out how to get that content up at the top. Thanks for the help. Peace Dhane Diesil
The link is: www[dot]etazetanupes[dot]com. Im also having another problem with the wrapper tag. I need the wrapper to snap to the top and to the left but it seems to be padded. I dont dont know why this keeps happening. Thanks for the help!
for one thing, your using an image in the code for your header (which should be sidebar or something) background. try changing that to the background of the actual div and maybe a float:left; on it may help it out. not much time right now, so just some quick suggestions.
Dan I think the red box is their header image. Try adding: float: left; to the .navigation and .header inside the CSS. Then you also need to delete the margin left of 255px from the content.
Well, I'm seeing all sorts of issues here apart from the layout not working as desired. First off I'd suggest nulling all margins and padding just to be sure everything is the same in all browsers. (or at least doing a targeted) - You do know that 1024 is not 1024 friendly, right? Subtract at least 32 px if you want it to display without horizontal scrollbars on 1024 displays. The layout itself is flawed as your logo is absurdly huge AND pushing the navigation off the screen even at 1280x960 (once you subtract out the extra space chewed by the window title, menu, tab bar, personal bar, address bar, status bar...) As to the code, you've got obviously separate 'blocks' that are nested inside each-other instead of being... separate blocks - Though it's hard to tell that from the code since the indenting is all malfed up. You seem to have your .content div stuck inside your .header which makes no sense whatsoever. Line breaks between LI is completely invalid markup. The only thing that can go after a <ul> or after a </li> is an <li> or a </ul>. You want to add extra spacing between your LI, do it in the CSS. Paragraph and then a double break - can we say 'miserable /FAIL/'? Is that image even a paragraph? Of course not, so why is it styled as such... interestingly your image name seems to indicate that's a header - as such shouldn't it be a heading TAG? In the footer, two words does NOT mean a paragraph. CSS - you're declaring the image you are inlining as the tiled background, but fixing the height of .header the same as the image - so where is the UL or #content even supposed to fit? height:600 - 600 what? After a quick rewrite I ASSUME this is what you are trying to do - though I'm guessing that the footer is supposed to be a column like the header was. <!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" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Untitled Document </title> <style type="text/css"> * { margin:0; padding:0; } body { text-align:center; /* center #container in IE 5.x */ font:normal 85%/140% helvetica,sans-serif; color:#6E0C19; background:#666; } #container { overflow:hidden; /* wrap floats */ width:992px; /* also trips haslayout so IE will also wrap floats */ margin:0 auto; text-align:left; /* return to normal after IE 5.x centering */ background:#FFF url(images/body_repeat.jpg) repeat-y; border:0px solid #a1a1a1; } #sideBar { float:left; width:256px; } #sideBar h1 { position:relative; height:600px; } #sideBar h1 span { position:absolute; top:0; left:0; width:256px; height:600px; background:#F00 url(images/logo.jpg) repeat-y; } #sideBar ul { list-style:none; padding-right:10px; } #sideBar li { text-align:right; margin-top: 5px; } #sideBar li a { color:#222; text-decoration: none; font:normal 100%/120% helvetica,sans-serif; } #sideBar li a:active, #sideBar li a:hover { color:#FFF; } #content { float:left; width:460px; display:inline; /* prevent IE double margin bug */ margin:0 10px; } #content p { margin-bottom:1em; } #content h2 { position:relative; font:bold 20px/32px sans-serif; } #content h2 span { position:absolute; top:0; left:0; width:460px; height:32px; background:url(images/h2images.png) no-repeat; } #content .header1 span { background-position:0 0; } #content .aboutMe span { background-position:0 -32px; } #footer { float:left; width:256px; } </style> </head><body> <div id="container"> <div id="sideBar"> <h1>Site Title<span></span></h1> <ul> <li><a href="#">home</a></li> <li><a href="#">services</a></li> <li><a href="#">pricing</a></li> <li><a href="#">contact</a></li> </ul> <!-- #sideBar --></div> <div id="content"> <h2 class="header1">Header 1<span></span></h2> <p> Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Fusce luctus felis ut sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos <a href="#">hymenaeos</a>. Nulla pellentesque nibh egestas ligula. Aliquam erat volutpat. Pellentesque pellentesque massa in diam. Phasellus est arcu, ullamcorper ut, adipiscing ut, tristique lacinia, nulla. Phasellus eu enim sit amet arcu laoreet sagittis. Mauris et dui. Ut ut nisi nec sem pulvinar imperdiet. Duis suscipit, nunc vel suscipit bibendum, arcu tortor ornare tortor, quis elementum odio lacus eu neque. Donec non elit. Nulla massa. Sed et velit sed magna fermentum facilisis. Fusce eu metus. Integer laoreet, metus at volutpat tristique, magna dolor volutpat orci, in ultrices sem nisl eget ipsum. Mauris placerat urna euismod nulla. Integer metus turpis, consectetuer nec, posuere sit amet, vulputate vel, libero. Nulla sit amet mi. </p> <h2 class="aboutMe">About Me<span></span></h2> <p> Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Fusce luctus felis ut sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos <a href="#">hymenaeos</a>. Nulla pellentesque nibh egestas ligula. Aliquam erat volutpat. Pellentesque pellentesque massa in diam. Phasellus est arcu, ullamcorper ut, adipiscing ut, tristique lacinia, nulla. Phasellus eu enim sit amet arcu laoreet sagittis. Mauris et dui. Ut ut nisi nec sem pulvinar imperdiet. Duis suscipit, nunc vel suscipit bibendum, arcu tortor ornare tortor, quis elementum odio lacus eu neque. Donec non elit. Nulla massa. Sed et velit sed magna fermentum facilisis. Fusce eu metus. Integer laoreet, metus at volutpat tristique, magna dolor volutpat orci, in ultrices sem nisl eget ipsum. Mauris placerat urna euismod nulla. Integer metus turpis, consectetuer nec, posuere sit amet, vulputate vel, libero. Nulla sit amet mi. </p> <!-- #content --></div> <div id="footer"> Copyright 2008 <!-- #footer --></div> <!-- #container --></div> </body></html> Code (markup): *** note *** I used image replacement techiniques - for the H2 images (your dc_header1.jpg and dc_aboutme1.jpg) I assumed they were 32px tall, you'll likely want to 'correct' to whatever height you are using - likewise my method lets you combine those into a single image one atop the other. As with all my examples it's valid XHTML 1.0 strict, valid CSS, tested working in IE 5.5, 6 & 7, FF 2.0.14 and 3.0b5, Opera 9.27 and 9.5beta, and Safari 3 windows.