SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Navigation Bar

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navigation Bar

    I'm trying to get the navigation bar to go the length of the container any help?

    www.itssecured.com

    Just learning. LOL

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    It depends on how you want this to look, but the easiest thing to do is to change this:

    Code:
    #nav {
    background: #FF5B00;
    float: left;
    margin: 0;
    padding: 0;
    z-index: 11;
    }
    to this:

    Code:
    #nav {
    background: #FF5B00;
    overflow: hidden;
    margin: 0;
    padding: 0;
    z-index: 11;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It depends on how you want this to look, but the easiest thing to do is to change this:

    Code:
    #nav {
    background: #FF5B00;
    float: left;
    margin: 0;
    padding: 0;
    z-index: 11;
    }
    to this:

    Code:
    #nav {
    background: #FF5B00;
    overflow: hidden;
    margin: 0;
    padding: 0;
    z-index: 11;
    }
    Doing this the drop down menu will not work.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by tncandle View Post
    I'm trying to get the navigation bar to go the length of the container any help?
    For clarification, are you asking for the nav bar to stretch to the full width of the page and remain on one line instead of wrapping (I see it wrapping in FF)?

    If so, what browser are you using and what is your browser's default font size?

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes that is what I want.
    Browser Firefox 16 font size.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    See if this appeals to you....

    I added the code for a modern version of clearfix and added it to #navWrapper by adding the class "cf". If you are seriously supporting IE6 and 7, you will have to replace it with an earlier version.

    Deleted the background: property from ul#nav because it isn't needed.

    Changed the horizontal padding on the anchor elements from 18px to 9px.

    Changed the z-indexes associated with the menu items, too.

    It's a close fit, but it works "as designed". Users who zoom text-only will still experience the same wrapping problem, though.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    /* 
    CSS Reset
    */
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    /* 
    End of CSS Reset
    */
    body {
        background-color: #1414cc;
        background-image: url(images/body-bg.png);
    	background-repeat: repeat-x;
    }
    #mainwrapper {
        width: 960px;
        margin-left: auto;
        margin-right: auto;
        background-color: #ffffff;
    }
    #headerwrapper {
        height: 160px;
    }
    #logowrapper {
        margin-left: 10px;
        padding-top: 4px;
        float: left;
    }
    .phone {
        width: 350px;
        margin-left: 540px;
        padding-top: 40px;
        text-align: center;
    }
    .number {
        color: #1414cc;
        font-family: helvetica,arial,sans-serif;
        font-size: 2.4em;
        line-height: 1.1em;
    } 
    .jobs {
        font-size: 0.8em;
        font-family: helvetica,arial,sans-serif;
        line-height: 0;
    }
    /* rotator in-page placement */
    div.rotator {
    	position:relative;
    	height:218px;	
    }
    /* rotator css */
    div.rotator ul li {
    	float:left;
    	position:absolute;
    	list-style: none;
    }
    /* rotator image style */	
    div.rotator ul li img {
    	background: #FFF;
    }
    div.rotator ul li.show {
    	z-index:500;
    }
    
    /* ------ modern clearfix ----- */
    .cf:before,
    .cf:after {
        content:"";
        display:table;
        line-height:0;
    }
    .cf:after {
        clear:both;
    }
    /* ----------------------------- */
    
    #navWrapper {
        background-color: #ff5b00;
    }
    #nav {
        float: left;
        margin: 0; padding: 0;
    }
    #nav li a, #nav li {
        float: left;
    }
    #nav li {
        list-style: none;
        position: relative;
    }
    #nav li a {
        padding-left: 9px;
        padding-right: 9px;
        text-decoration: none;
        padding-top: 8px;
        padding-bottom: 8px;;
        text-decoration: none;
        color: #ffffff;
        background: #ff5b00;
        background: -moz-linear-gradient(top, #ff5b00 2px, #ff5b00 18px, #ff5b00 16px);
        background: -webkit-gradient(linear, left top, left 25, from(#ff5b00), color-stop(4%, #ff5b00), to(#ff5b00));
        /*
        border-right: 1px solid #3c3c3c;
        border-left: 1px solid #292929;
        border-bottom: 1px solid #232323;
        border-top: 1px solid #545454;
        */
    }
    #nav li a:hover {
        background: #ff5b00;
        background: -moz-linear-gradient(top, #2a0d65, #2a0d65);
        background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
    }
    /* Submenu */
    .hasChildren {
    	position: absolute;
    	width: 5px; height: 5px;
    	right : 0;
    	bottom: 0;
    }
    #nav li ul {
        display: none;
        position: absolute;
        left: 0;
        top: 100%;
        padding: 0; margin: 0;
        z-index: 1;
    }
    #nav li:hover > ul {
        display: block;
    }
    #nav li ul li, #nav li ul li a {
        float: none;
    }
    #nav li ul li {
        _display: inline; /* for IE6 */
    }
    #nav li ul li a {
        width: 170px;
        display: block;
    }
    /* SUBSUB Menu */
    #nav li ul li ul {
        display: none;
    }
    #nav li ul li:hover ul {
        left: 100%;
        top: 0;
    }
    #nav li ul {
    }
    #centercontent {
    	width: 675px;
    	float: left;
    	border-right-width: 1px;
    	border-right-style: solid;
    	padding: 10px;
    }
    #rightside {
     
    }
    #footer {
        clear:both;
    }
    </style>
    </head>
    <body>
    <div id="mainwrapper">
      <div id="headerwrapper">
        <div id="logowrapper"> <img src="images/logo.png" /> </div>
        <div class="phone">
          <p class="number"><strong>423.288.6924</strong></p>
          <p class="jobs"><strong>Residential & Commercial / Remodels / Repairs / Installations</strong></p>
        </div>
      </div>
      <!-- End of Header Wrapper -->
      <div id="navWrapper" class="cf">
        <ul id="nav">
          <li><a href="index.php">Home</a></li>
          <li><a href="#">About</a>
            <ul>
              <li><a href="about.php">Our Company</a></li>
              <li><a href="technicians.php">Our Technicians</a></li>
              <li><a href="testimonials.php">Testimonials</a></li>
            </ul>
          </li>
          <li><a href="#">Services</a>
            <ul>
              <li><a href="#">Residential Service</a></li>
              <li><a href="#">Commercial Service</a></li>
              <li><a href="protection.php">Home Protection Plan</a></li>
            </ul>
          </li>
          <li><a href="">Contact Us</a>
            <ul>
              <li><a href="contact.php">Contact Precision Electrical</a></li>
              <li> <a href="employment.php">Employment Oppertunities</a></li>
            </ul>
          </li>
          <li><a href="products.php">Products</a></li>
          <li><a href="#">Energy Island</a>
            <ul>
              <li><a href="powersupply.php">Whole House Power Supply</a></li>
              <li><a href="#">Solar Energy</a></li>
              <li><a href="#">Wind Generation</a></li>
            </ul>
          </li>
          <li><a href="#">Commercial Energy Services</a>
            <ul>
              <li><a href="#">Lighting Upgrades</a></li>
              <li><a href="tax.php">Tax Benefits</a></li>
            </ul>
          </li>
          <li><a href="request.php">Service Request</a></li>
        </ul>
      </div>
      <div id="content">
        <div id="centercontent">
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum lorem et nulla posuere lacinia. Phasellus leo turpis, feugiat eu sapien et, eleifend facilisis lectus. Maecenas volutpat nunc ac dolor fringilla lacinia. Etiam dapibus sollicitudin mi, a auctor libero iaculis eu. Mauris cursus molestie commodo. Mauris ut tempor metus. In nec pulvinar magna, vel gravida nunc. Etiam fringilla ipsum leo, sit amet vulputate nunc porttitor vitae. </p>
          <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus non ante id nisi fermentum accumsan sed et diam. Vestibulum odio arcu, porta ut purus ac, vehicula adipiscing mauris. Suspendisse in tortor nec risus pretium malesuada. Nulla facilisi. Maecenas posuere velit nec dolor pellentesque tempus. Mauris tempus accumsan rutrum. Sed laoreet congue felis tristique tristique. Sed eu odio in urna ultricies scelerisque. Aenean lacinia metus sed tortor viverra porta quis a diam. Curabitur sed tristique tortor, vestibulum fermentum massa. Nulla fermentum ligula nisi, eu ornare massa interdum vel. </p>
        </div>
        <!-- End of Center Content -->
        <div id="rightside">
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum lorem et nulla posuere lacinia. Phasellus leo turpis, feugiat eu sapien et, eleifend facilisis lectus. Maecenas volutpat nunc ac dolor fringilla lacinia. Etiam dapibus sollicitudin mi, a auctor libero iaculis eu. Mauris cursus molestie commodo. Mauris ut tempor metus. In nec pulvinar magna, vel gravida nunc. Etiam fringilla ipsum leo, sit amet vulputate nunc porttitor vitae. </p>
        </div>
        <!-- End of Rightside -->
        <div id="footer">ttt </div>
        <!-- End of Footer -->
      </div>
      <!-- End of Content -->
    </div>
    <!-- End of Main Wrapper -->
    </body>
    </html>

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    See if this appeals to you....

    I added the code for a modern version of clearfix and added it to #navWrapper by adding the class "cf". If you are seriously supporting IE6 and 7, you will have to replace it with an earlier version.

    Deleted the background: property from ul#nav because it isn't needed.

    Changed the horizontal padding on the anchor elements from 18px to 9px.

    Changed the z-indexes associated with the menu items, too.

    It's a close fit, but it works "as designed". Users who zoom text-only will still experience the same wrapping problem, though.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    /* 
    CSS Reset
    */
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    /* 
    End of CSS Reset
    */
    body {
        background-color: #1414cc;
        background-image: url(images/body-bg.png);
    	background-repeat: repeat-x;
    }
    #mainwrapper {
        width: 960px;
        margin-left: auto;
        margin-right: auto;
        background-color: #ffffff;
    }
    #headerwrapper {
        height: 160px;
    }
    #logowrapper {
        margin-left: 10px;
        padding-top: 4px;
        float: left;
    }
    .phone {
        width: 350px;
        margin-left: 540px;
        padding-top: 40px;
        text-align: center;
    }
    .number {
        color: #1414cc;
        font-family: helvetica,arial,sans-serif;
        font-size: 2.4em;
        line-height: 1.1em;
    } 
    .jobs {
        font-size: 0.8em;
        font-family: helvetica,arial,sans-serif;
        line-height: 0;
    }
    /* rotator in-page placement */
    div.rotator {
    	position:relative;
    	height:218px;	
    }
    /* rotator css */
    div.rotator ul li {
    	float:left;
    	position:absolute;
    	list-style: none;
    }
    /* rotator image style */	
    div.rotator ul li img {
    	background: #FFF;
    }
    div.rotator ul li.show {
    	z-index:500;
    }
    
    /* ------ modern clearfix ----- */
    .cf:before,
    .cf:after {
        content:"";
        display:table;
        line-height:0;
    }
    .cf:after {
        clear:both;
    }
    /* ----------------------------- */
    
    #navWrapper {
        background-color: #ff5b00;
    }
    #nav {
        float: left;
        margin: 0; padding: 0;
    }
    #nav li a, #nav li {
        float: left;
    }
    #nav li {
        list-style: none;
        position: relative;
    }
    #nav li a {
        padding-left: 9px;
        padding-right: 9px;
        text-decoration: none;
        padding-top: 8px;
        padding-bottom: 8px;;
        text-decoration: none;
        color: #ffffff;
        background: #ff5b00;
        background: -moz-linear-gradient(top, #ff5b00 2px, #ff5b00 18px, #ff5b00 16px);
        background: -webkit-gradient(linear, left top, left 25, from(#ff5b00), color-stop(4%, #ff5b00), to(#ff5b00));
        /*
        border-right: 1px solid #3c3c3c;
        border-left: 1px solid #292929;
        border-bottom: 1px solid #232323;
        border-top: 1px solid #545454;
        */
    }
    #nav li a:hover {
        background: #ff5b00;
        background: -moz-linear-gradient(top, #2a0d65, #2a0d65);
        background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
    }
    /* Submenu */
    .hasChildren {
    	position: absolute;
    	width: 5px; height: 5px;
    	right : 0;
    	bottom: 0;
    }
    #nav li ul {
        display: none;
        position: absolute;
        left: 0;
        top: 100%;
        padding: 0; margin: 0;
        z-index: 1;
    }
    #nav li:hover > ul {
        display: block;
    }
    #nav li ul li, #nav li ul li a {
        float: none;
    }
    #nav li ul li {
        _display: inline; /* for IE6 */
    }
    #nav li ul li a {
        width: 170px;
        display: block;
    }
    /* SUBSUB Menu */
    #nav li ul li ul {
        display: none;
    }
    #nav li ul li:hover ul {
        left: 100%;
        top: 0;
    }
    #nav li ul {
    }
    #centercontent {
    	width: 675px;
    	float: left;
    	border-right-width: 1px;
    	border-right-style: solid;
    	padding: 10px;
    }
    #rightside {
     
    }
    #footer {
        clear:both;
    }
    </style>
    </head>
    <body>
    <div id="mainwrapper">
      <div id="headerwrapper">
        <div id="logowrapper"> <img src="images/logo.png" /> </div>
        <div class="phone">
          <p class="number"><strong>423.288.6924</strong></p>
          <p class="jobs"><strong>Residential & Commercial / Remodels / Repairs / Installations</strong></p>
        </div>
      </div>
      <!-- End of Header Wrapper -->
      <div id="navWrapper" class="cf">
        <ul id="nav">
          <li><a href="index.php">Home</a></li>
          <li><a href="#">About</a>
            <ul>
              <li><a href="about.php">Our Company</a></li>
              <li><a href="technicians.php">Our Technicians</a></li>
              <li><a href="testimonials.php">Testimonials</a></li>
            </ul>
          </li>
          <li><a href="#">Services</a>
            <ul>
              <li><a href="#">Residential Service</a></li>
              <li><a href="#">Commercial Service</a></li>
              <li><a href="protection.php">Home Protection Plan</a></li>
            </ul>
          </li>
          <li><a href="">Contact Us</a>
            <ul>
              <li><a href="contact.php">Contact Precision Electrical</a></li>
              <li> <a href="employment.php">Employment Oppertunities</a></li>
            </ul>
          </li>
          <li><a href="products.php">Products</a></li>
          <li><a href="#">Energy Island</a>
            <ul>
              <li><a href="powersupply.php">Whole House Power Supply</a></li>
              <li><a href="#">Solar Energy</a></li>
              <li><a href="#">Wind Generation</a></li>
            </ul>
          </li>
          <li><a href="#">Commercial Energy Services</a>
            <ul>
              <li><a href="#">Lighting Upgrades</a></li>
              <li><a href="tax.php">Tax Benefits</a></li>
            </ul>
          </li>
          <li><a href="request.php">Service Request</a></li>
        </ul>
      </div>
      <div id="content">
        <div id="centercontent">
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum lorem et nulla posuere lacinia. Phasellus leo turpis, feugiat eu sapien et, eleifend facilisis lectus. Maecenas volutpat nunc ac dolor fringilla lacinia. Etiam dapibus sollicitudin mi, a auctor libero iaculis eu. Mauris cursus molestie commodo. Mauris ut tempor metus. In nec pulvinar magna, vel gravida nunc. Etiam fringilla ipsum leo, sit amet vulputate nunc porttitor vitae. </p>
          <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus non ante id nisi fermentum accumsan sed et diam. Vestibulum odio arcu, porta ut purus ac, vehicula adipiscing mauris. Suspendisse in tortor nec risus pretium malesuada. Nulla facilisi. Maecenas posuere velit nec dolor pellentesque tempus. Mauris tempus accumsan rutrum. Sed laoreet congue felis tristique tristique. Sed eu odio in urna ultricies scelerisque. Aenean lacinia metus sed tortor viverra porta quis a diam. Curabitur sed tristique tortor, vestibulum fermentum massa. Nulla fermentum ligula nisi, eu ornare massa interdum vel. </p>
        </div>
        <!-- End of Center Content -->
        <div id="rightside">
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum lorem et nulla posuere lacinia. Phasellus leo turpis, feugiat eu sapien et, eleifend facilisis lectus. Maecenas volutpat nunc ac dolor fringilla lacinia. Etiam dapibus sollicitudin mi, a auctor libero iaculis eu. Mauris cursus molestie commodo. Mauris ut tempor metus. In nec pulvinar magna, vel gravida nunc. Etiam fringilla ipsum leo, sit amet vulputate nunc porttitor vitae. </p>
        </div>
        <!-- End of Rightside -->
        <div id="footer">ttt </div>
        <!-- End of Footer -->
      </div>
      <!-- End of Content -->
    </div>
    <!-- End of Main Wrapper -->
    </body>
    </html>
    That worked. Thanks

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by tncandle View Post
    That worked. Thanks
    Thanks for the feedback.


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
  •