SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I make a nav menu go although across the page?

    How do I make a nav menu go although across the page horizontally? I have an image 1px by 36x that I want to repeat across the page. Like google.com has at the top of the page the menu goes to both sides of the browser.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Floats and a repeated background image?
    Code css:
    ul {
      overflow: hidden;
      background: url(nav_bg.jpg) repeat-x 0 0;
    }
    li {
      float: left;
      height: 36px;
      line-height: 36px;
      padding: 0 20px;
    }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nlsilverberg View Post
    How do I make a nav menu go although across the page horizontally? I have an image 1px by 36x that I want to repeat across the page. Like google.com has at the top of the page the menu goes to both sides of the browser.
    Static (non positioned) elements will automatically stretch to the width of their container so in effect you don't really have to do anything special. Just apply a background image as Mark suggests above and it will stretch the width of the container and if the container is the viewport it will stretch all the way across.

    (Remember to remove the default margin and padding from the ul though)

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just tried it and here is what happened.
    For some reason it is not going to each side all the way.

    HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "html://www.w3.org/TR/xhtm1/DTD/xhtml-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8"/>
    <link href="navstyle.css" rel="stylesheet" type="text/css"/>

    </head>
    <body>
    <div id="wrapper">
    <div id="header">
    </div> <!-- end of header div -->
    <div id="navmenu">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    <li><a href="testimonies.html">Testimonies</a></li>
    <li><a href="faq.html">FAQ</a></li>
    </div> <!-- end of navmenu div -->
    <div id="bodycontent">

    </div> <!-- end of wrapper div -->
    </body>
    </html>

    CSS


    #navmenu ul {
    overflow: hidden;
    background: url(images/nav11.psd) repeat-x 0 0;
    }

    #navmenu li {
    list-style-type: none;
    float: left;
    height: 36px;
    line-height: 36px;
    padding: 0 15px;
    display: inline;
    }

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    You won't be able to load a photoshop file directly in the browser, you'll need to export it to png / jpg /gif.

    It's also a good idea to make the links themselves have the padding so they have a bigger click target.
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <style>
    #navmenu ul {
      overflow: hidden;
      background: url(images/nav11.png) repeat-x 0 0;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    #navmenu li {
      float: left;
      margin: 0;
      padding: 0;
    }
    #navmenu a {
      float: left;
      height: 36px;
      line-height: 36px;
      padding: 0 15px;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div id="header"></div>
      <div id="navmenu">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About Us</a></li>
          <li><a href="services.html">Services</a></li>
          <li><a href="contact.html">Contact Us</a></li>
          <li><a href="testimonies.html">Testimonies</a></li>
          <li><a href="faq.html">FAQ</a></li>
        </ul>
      </div>
      <div id="bodycontent"></div>
    </div>
    </body>
    </html>

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I converted the image to .png and copied the code you posted (I changed nothing) and it is still looking like the picture I post earlier.

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Are you sure the path to the image is correct?
    Trying adding a background color so that you can see how much space it occupies.
    Code:
    background: black url(images/nav11.png) repeat-x 0 0;


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
  •