PDA

View Full Version : Problems :(



JJackson
Feb 19th, 2010, 04:11 AM
I'm working on a simple design, but I've ran into a few problems and now have some questions. The site can be found at http://thecodester.com/projects/clean.

Problems

1) I want the navigation image to repeat on the x-axis so that it flows completely along the page. I would also like to do this with the footer image. However, I'm not sure how to accomplish that.

2) For the footer image, what would be the best method of having content on the right and left side of the image? I've ran into a road block on that one, too.

3) On the navigation bar, I would like to have an image background for the current page. I'm just having a little trouble doing that.

Any help would be highly appreciated.

Thanks!

Excavator
Feb 19th, 2010, 05:21 AM
Hello JJackson,
See some menus here (http://nopeople.com/design/CSS%20tips/index.html).
This one (http://nopeople.com/CSS/h_ul_menu-with_images/index.html) in particular shows how to make a page indicator.

JJackson
Feb 19th, 2010, 05:32 AM
Hello JJackson,
See some menus here (http://nopeople.com/design/CSS%20tips/index.html).
This one (http://nopeople.com/CSS/h_ul_menu-with_images/index.html) in particular shows how to make a page indicator.

Thanks! I'll have a look over it. Any idea how I can make the nav and footer repeat horizontally?

Excavator
Feb 19th, 2010, 07:27 AM
There are several menus in that link I gave you that show how to position your li's horizontally. Start with a really basic horizontal ul (http://nopeople.com/CSS/ulmenu/index.html) and view the code to see how it's done.





The footer is different since it's not a list. Both elements, the right and left, need to be in the same container so re-order your markup like this -

</div><!--end content-->

<div id="footer">
<div id="footer-left">
<p>Copyright 2010 TheCodester.
<br>
Hosted by <a href="#"><strong>FrogHost</strong></a></p>
</div><!--end footer-left-->

<p>TheCodester is coded in valid <a href="#"><strong>XHTML</strong></a> and <a href="#"><strong>CSS</strong></a>.</p>
</div><!--end footer-->
</div><!--end container-->

And your CSS like this -


/* Footer/Copyright */

#footer {
background: url(images/footer.png) repeat-y;
width: 680px;
height: 128px;
padding: 60px 10px 0;
}
#footer-left {
width: 350px;
float: left;
}