Trying to make this fit the entiref width

8 replies
  • WEB DESIGN
  • |
Hi,

I would like to make the navbar in my header 100% of the page, here's the html and css code below:

HTML Code:
 <div class="nav_container"> 

<nav>
<ul class="fancyNav">

 <li id="home"><a href="http://www.worldclassads.com/index.php" class="homeIcon">Home</a></li>
 <li id="about"><a href="http://www.worldclassads.com/index.php?page=index/about">About us</a></li> 
 <li id="contact"><a href="http://www.worldclassads.com/index.php?page=user/support">Contact us</a></li>
 <li id="faqs"><a href="http://www.worldclassads.com/index.php?page=index/faqs">FAQ's</a>
 <li id="linktous"><a href="http://www.worldclassads.com/index.php?page=index/linktous">Link To Us</a></li>
 <li id="advertise"><a href="http://www.worldclassads.com/index.php?page=index/advertise">Advertise With Us</a>
 <li id="test"><a href="http://www.worldclassads.com/index.php?page=index/postad">Post an Ad</a>
 </li>
 
                
 </ul>
 </nav>
 </div>
Code:
/*----------------------------
    CSS3 Animated Navigation
-----------------------------*/


.fancyNav{
    /* Affects the UL element */
    overflow: hidden;
    display: inline-block;
}

.fancyNav li{
    /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */
    
    background-color: #f0f0f0;
    background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
    background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    
    border-right: 1px solid rgba(9, 9, 9, 0.125);
    
    /* Adding a 1px inset highlight for a more polished efect: */
    
    box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    
    position:relative;
    
    float: left;
    list-style: none;
}

.fancyNav li:after{

    /* This creates a pseudo element inslide each LI */    
    
    content:'.';
    text-indent:-9999px;
    overflow:hidden;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
    opacity:0;
    
    /* Gradients! */
    
    background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
    background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    
    /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
    
    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    
    /* This will create a smooth transition for the opacity property */
    
    -moz-transition:0.25s all;
    -webkit-transition:0.25s all;
    -o-transition:0.25s all;
    transition:0.25s all;
}

/* Treating the first LI and li:after elements separately */

.fancyNav li:first-child{
    border-radius: 4px 0 0 4px;
}

.fancyNav li:first-child:after,
.fancyNav li.selected:first-child:after{
    box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    
    border-radius:4px 0 0 4px;
}

.fancyNav li:last-child{
    border-radius: 0 4px 4px 0;
}

/* Treating the last LI and li:after elements separately */

.fancyNav li:last-child:after,
.fancyNav li.selected:last-child:after{
    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    
    border-radius:0 4px 4px 0;
}

.fancyNav li:hover:after,
.fancyNav li.selected:after,
.fancyNav li:target:after{
    /* This property triggers the CSS3 transition */
    opacity:1;
}

.fancyNav:hover li.selected:after,
.fancyNav:hover li:target:after{
    /* Hides the targeted li when we are hovering on the UL */
    opacity:0;
}

.fancyNav li.selected:hover:after,
.fancyNav li:target:hover:after{
    opacity:1 !important;
}

/* Styling the anchor elements */

.fancyNav li a{
    color: #5d5d5d;
    display: inline-block;
    font: 20px/1 Lobster,Arial,sans-serif;
    padding: 12px 35px 14px;
    position: relative;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
    z-index:2;
    text-decoration:none !important;
    white-space:nowrap;
}

.fancyNav a.homeIcon{
    background:url('../navbar/img/home.png') no-repeat center center;
    display: block;
    overflow: hidden;
    padding-left: 12px;
    padding-right: 12px;
    text-indent: -9999px;
    width: 16px;
}


/*-------------------------
    Demo Page Styles
--------------------------*/


h1,h2{
    color: #fff;
    line-height: 1;
    background-color: #222;
    font-family: 'Segoe UI Light','Segoe UI',Arial,sans-serif;
    font-weight: normal;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    margin-left: -446px;
}

h1{
    font-size: 36px;
    padding: 5px 15px 10px;
    top: 0;
}

h2{
    font-size: 14px;
    padding: 4px 13px 9px 11px;
    top: 51px;
}

header{
    display:block;
    margin-top:50px;
    position:relative;
}

.nav_container {background-color:#f5f5f5; background-image: url('../../images/textures/brushed-alum-dark.png'); border-bottom: 2px solid #000; float: left; width: 100%;}

nav{
    display: block;
    float: left;
    margin: 0 auto 0;
    text-align: center;
    width:     auto;
}

footer{
    color: #BBBBBB;
    font-size: 15px;
    line-height: 1.6;
    padding: 60px 20px 0;
    text-align: center;
    display:block;
}

footer b{
    color: #888888;
    display: block;
    font-size: 10px;
    font-weight: normal;
}

a, a:visited {
    text-decoration:none;
    outline:none;
    color:#54a6de;
}

a:hover{
    text-decoration:underline;
}
Thank you
Brian
#entiref #fit #make #width
  • Profile picture of the author rhinocl
    Add
    width:100%;
    to the declaration for
    .fancyNav
    and also for
    .nav_container
    and any elements that contain them if those are not already 100% width
    {{ DiscussionBoard.errors[9479523].message }}
    • Profile picture of the author Brian07002
      Originally Posted by rhinocl View Post

      Add
      width:100%;
      to the declaration for
      .fancyNav
      and also for
      .nav_container
      and any elements that contain them if those are not already 100% width
      I did add the decl. for .fancyNav and .nav_container that didn't work, I haven't yet found any other elements that are not 100% though...
      {{ DiscussionBoard.errors[9479549].message }}
  • Profile picture of the author win58
    They are at 100%
    Are you looking for something like this?
    Add to the bottom of your style.css and you may need to add !important

    div.nav_container {
    margin-left: 10%;
    }
    {{ DiscussionBoard.errors[9479671].message }}
    • Profile picture of the author Brian07002
      Originally Posted by win58 View Post

      They are at 100%
      Are you looking for something like this?
      Add to the bottom of your style.css and you may need to add !important

      div.nav_container {
      margin-left: 10%;
      }
      That does in fact move the nav, but not exactly what I wanted to do. I want to utilize the navbar to 100% of its container div.

      Have a look here: World Class Ads - Classified Advertising Worldwide-Country

      The navbar is at top, has about us contact us FAQs etc...I wanted that to fit all the way across its containing div.

      I know I could just add another <li tag but the what about higher resolution monitors?

      I have been struggling w/ css for years, so I am sorry if I sound like I am asking a very basic question...I actually know php better than css, probably since I am a simple guy, and css constantly changes...
      {{ DiscussionBoard.errors[9479757].message }}
    • Profile picture of the author Brian07002
      Originally Posted by win58 View Post

      They are at 100%
      Are you looking for something like this?
      Add to the bottom of your style.css and you may need to add !important

      div.nav_container {
      margin-left: 10%;
      }
      Actually this did work, I had made some other changes but this did in fact make it work as intended, but I have shrunk down the browser window in width, and when I did, although the menu appears to be responsive, (it shrinks with the browser window), the links in the menu overlap (text over text, not read-able) when the window get too narrow. Anyone have an idea what might be wrong?

      Thank you
      Brian
      {{ DiscussionBoard.errors[9481491].message }}
  • Profile picture of the author win58
    You need to stretch/add menu items to fill it in full view but as the window closes, the menu starts to stack and transform the menu bar. You're better off to have smaller menu items so they stay in place longer on a large/desktop monitor. Fluid design needs more creativity.

    See images below, full and half screen.







    {{ DiscussionBoard.errors[9479817].message }}
  • Profile picture of the author win58
    Yeah. You made changes beside the above that's causing it.
    Your menu is no longer responsive. My suggestion is to go back
    where you started and rethink your strategy about making a fixed
    width menu on a responsive site.
    {{ DiscussionBoard.errors[9482107].message }}
    • Profile picture of the author Brian07002
      Originally Posted by win58 View Post

      Yeah. You made changes beside the above that's causing it.
      Your menu is no longer responsive. My suggestion is to go back
      where you started and rethink your strategy about making a fixed
      width menu on a responsive site.
      Actually, I did fix it. It is still responsive. I had to add the overflow option setting it to hidden, so now it does not overlap. But, I plan to eventually make one of those 'mobile style' square buttons, and using media queries to change the nav menu.
      {{ DiscussionBoard.errors[9482848].message }}

Trending Topics