View Full Version : Need help with 2 things...

02-24-2005, 08:55 PM
I'm trying to get this layout to lay out correctly, but I'm having some trouble...


That is the link to the site. One problem is that both the navigation image (the black one at the top) and the footer image (the one at the bottom with the Copyright) seem to extend into the right border of the background image (the side images with the fade effect). This is the minor of my two problems, but I would still like to fix it.

The second problem is that I'm trying to keep the links in the navigation in an unordered list but I cannot get them to display next to one another. I trire float:left; on the '.nav li' element but that just messed it up more.

I know there is probably a simple explanation to both of these questions but I am struggling to find it. Any help is appreciated. Also, if you have reccomendations on how I can clean up either the CSS or XHTML better (I think the XHTML is fine, but the CSS could probably use some work) I would be thankful!

02-24-2005, 11:49 PM
POSTING GUIDELINES (http://www.codingforums.com/postguide.htm)

The first issue is because the bg image for the container is fixed, but everything else is fluid. So as the browser window is resized nothing is going to line up. You're going to have to pick between a fixed or a fluid layout and work from there.

The second issue is because you don't have any width assigned to the links or list items, so when you float them, each one will take up all the space available. Pick a width, then try floating. Don't forget to clear the float when you're done with the list. See this tutorial (http://www.google.com/url?sa=U&start=1&q=http://css.maxdesign.com.au/floatutorial/&e=7207) for more.

02-24-2005, 11:53 PM
i'll answer here to, i've answered this question for the same person on a diff forum, you have a right padding of 16px in the container div, and you have align:center; in the css for your body, that should be text-align:center; but its probably just a typo on ur part, adding display:inline; to the the li's in css you can get them to go horizontal