SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help with navigation bar to extend infinitely

    Hello everyone, I'm a bit new to designing a website. I'm currently working on a class project and it involves creating a page with a large photo as a background. I searched around and got an idea of how it's generally done. This website: http://www.alley-pfannekuchen.de/ has their navigation bar extending on the x-axis.

    When I zoom out I noticed its an image, I think--because at a certain point it stops. But I was wondering is their an easier way (maybe a code?) to have a colored rectangle type of box that repeats?

    Thanks

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Welcome to SitePoint!

    You can do something like this:

    HTML Code:
    <div id="nav">
    <ul>  
     <li><a href="mysite.com">Title</a></li>  
     <li><a href="mysite.com">Title</a></li>  
     <li><a href="mysite.com">Title</a></li>  
     <li><a href="mysite.com">Title</a></li> 
    </ul>
    </div>
    And in your CSS:

    HTML Code:
    #nav {
      width:100%; /* make it stretch the to the entire width of the viewport */    
      background:black;
    }
    
    #nav ul {
      list-style:none; 
      margin:0;
    }
    
    #nav li {    
      display:inline;    
      padding:0;
    }
    
    #nav a:link, #nav a:visited {
      color: white;       
      text-decoration:none;   
      line-height:2; /* calculate height of surrounding box */    
      margin:0;    
      padding: 2em;
    }    
    
    #nav a:hover, #nav a:focus {
      color: black;        
      background:white;
    }     
    Maleika E. A. | Rockatee | Twitter | Dribbble




Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •