Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Best way to achieve this Navigation Bar Effect?

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 3, 2011 at 7:56 pm #32222
    Momillo
    Member

    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?

    April 4, 2011 at 11:04 am #52334
    Momillo
    Member

    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

    April 4, 2011 at 2:44 pm #52312
    soap
    Participant

    I dont get it

    April 4, 2011 at 2:57 pm #52313
    Momillo
    Member

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

    April 4, 2011 at 3:13 pm #52305
    pacMakaveli
    Member

    There are three methods, as far as I know.


    

    

       /* Ordered List */
      

    1. Home

      2. 

    2. About

      3. 

    3. Contact

      4. 

    4. Other

      5. 


    

    


    

    

    

    


    

    

     /* And my favourite*/
    
Home
    
About
    
Contact
    
Other
    April 4, 2011 at 3:57 pm #52296
    soap
    Participant

    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!

    April 4, 2011 at 4:02 pm #52297
    Momillo
    Member

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

    April 4, 2011 at 4:25 pm #52292
    soap
    Participant

    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.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.