Forums

Momillo

Hello! This is my first post, hope you guys can help me out

So basically I'm a newbie at html/css, im more of a designer. But i started reading some tutorials and got stuck when trying to achieve the navigation bar i had in mind.

http://oi52.tinypic.com/33w04md.jpg

I tried using an unordered list for the images (links) of each page, but i dont know how to apply the folding and continious effect after and before my navi bar, any ideas?

Momillo

I tried putting the img after img, but it seems to be an invisible padding, i already defined padding margin and border to 0 in the ul#navigation

soap

I dont get it

Momillo

I just wanted to know how to effectively achieve the navigation bar in HTML/CSS

pacMakaveli

There are three methods, as far as I know.



<ol> /* Ordered List */
	 <li><a href="#" class="home">Home</a></li>
	 <li><a href="#" class="about">About</a></li>
	 <li><a href="#" class="contact">Contact</a></li>
	 <li><a href="#" class="other">Other</a></li>
</ol>



<ul> /* Unordered List */
	 <li><a href="#" class="home">Home</a></li>
	 <li><a href="#" class="about">About</a></li>
	 <li><a href="#" class="contact">Contact</a></li>
	 <li><a href="#" class="other">Other</a></li>
</ul>



<div class="menu"> /* And my favourite*/
	 <a href="#" class="home">Home</a>
	 <a href="#" class="about">About</a>
	 <a href="#" class="contact">Contact</a>
	 <a href="#" class="other">Other</a>
</div>

soap

oh i see basic stuff..

what he^ said. use an unordered list.

then float the li's left.
make sure you clear the float..

using an unordered list as opposed to just using anchor tags gives you more options and customizability!

Momillo

Yeah, but what about the folding effect and its continuity to "infinity"? how do I do that?

soap

the folding effect is just a graphic.

it seems like you're trying to jump the gun here a bit. if you're that new you should just start with the basics and it will all come into place.

but anyway,

it's done by having the brown bar thing being a background image repeating on the x-axis and having it's container be 100% width of the browser window.

treehouse : what would you like to learn today?

Forums

Best way to achieve this Navigation Bar Effect?