How to align a menu bar using css and html? [closed]


Tags: html,css

Problem :

The problem is that I placed a horizontal menu bar on my site that fits the whole screen or page so when I tried resizing and making the menu bar smaller to make the size the same with the other parts on the site, everytime I zoom in and out the page, the menu bar resizes unproportionally with the other parts.

To see the problem for yourself, please check my site at http://thenativeisodrafts.tumblr.com and try zooming in and out the page.

Thank you very much!

Here's the CSS:

#cssmenu ul {
    margin: 0;
    padding: 0;
}
#cssmenu li {
    margin: 0;
    padding: 0;
}
#cssmenu a {
    margin: 0px;
    padding: 0px;
}
#cssmenu ul {
    list-style: none;
}
#cssmenu a {
    text-decoration: none;
}
#cssmenu {
    height: 70px;
    background-color: rgb(35,35,35);
    border-bottom: 5px solid #cd2c23;
    border-top: 5px solid #cd2c23;
    position:absolute;
    right:241px;
    z-index: 1000;
}
#cssmenu > ul > li {
    float: left;
    margin-left: 15px;
    position: relative;
}
#cssmenu > ul > li > a {
    color: rgb(160,160,160);
    font-family: Verdana, 'Lucida Grande';
    font-size: 15px;
    line-height: 70px;
    padding: 15px 20px;
    -webkit-transition: color .15s;
    -moz-transition: color .15s;
    -o-transition: color .15s;
    transition: color .15s;
}
#cssmenu > ul > li > a:hover {
    color: rgb(250,250,250);
}
#cssmenu > ul > li > ul {
    opacity: 0;
    visibility: hidden;
    padding: 16px 0 20px 0;
    background-color: rgb(250,250,250);
    text-align: left;
    position: absolute;
    top: 55px;
    left: 50%;
    margin-left: -90px;
    width: 180px;
    -webkit-transition: all .3s .1s;
    -moz-transition: all .3s .1s;
    -o-transition: all .3s .1s;
    transition: all .3s .1s;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
    box-shadow: 0px 1px 3px rgba(0,0,0,.4);
    z-index: 1000;
}
#cssmenu > ul > li:hover > ul {
    opacity: 1;
    top: 65px;
    visibility: visible;
}
#cssmenu > ul > li > ul:before {
    content: '';
    display: block;
    border-color: transparent transparent rgb(250,250,250) transparent;
    border-style: solid;
    border-width: 10px;
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -10px;
}
#cssmenu > ul ul > li {
    position: relative;
}
#cssmenu ul ul a {
    color: rgb(50,50,50);
    font-family: Verdana, 'Lucida Grande';
    font-size: 13px;
    background-color: rgb(250,250,250);
    padding: 5px 8px 7px 16px;
    display: block;
    -webkit-transition: background-color .1s;
    -moz-transition: background-color .1s;
    -o-transition: background-color .1s;
    transition: background-color .1s;
}
#cssmenu ul ul a:hover {
    background-color: rgb(240,240,240);
}
#cssmenu ul ul ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -16px;
    left: 206px;
    padding: 16px 0 20px 0;
    background-color: rgb(250,250,250);
    text-align: left;
    width: 160px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
    box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}

Here's the HTML codes:

<div id='cssmenu' style="width:940.5px; margin:auto">
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub '><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>


Solution :

The problem is #cssmenu has position: absolute declared on it. Remove this and you should be golden:

#cssmenu {
    height: 70px;
    background-color: #232323;
    border-bottom: 5px solid #CD2C23;
    border-top: 5px solid #CD2C23;
    // position: absolute; // Remove this
    // right: 241px; // And this
}

    CSS Howto..

    How to give line-break from css, without using
    ?

    How to make a jQuery step animation?

    How to exclude Hover for Active LI (Menu)?

    How to prevent table row from re-sizing when hidden text is displayed?

    How to hover span content from li

    how to use automatic css hyphens with word-break: break-all?

    How can I make 2 elements share the same rollover state in CSS?

    CSS - How to hide extra images

    CSS How to make a DIV that starts 100px from the top reach the bottom of the page

    How to make the height REALLY 100%

    How to change background color of my selector's Pseudo-element on rollover?

    How to edit CSS class via jQuery if statement

    How set font-size in TinyMce

    How i can remove gap between Menu Box

    How to make a jsp page keyboard accessible and how to change the position of a popped up jsp page?

    How to change CSS (background-image) from JQuery in Rails?

    Bootstrap: How to make repeated divs go around a fixed div

    How to move an entire group of objects with Javascript

    On css: if text line is break show dots

    How to create shapes in css? [closed]

    How can I add a border to the right side of this object?

    How to create a completely flexible piano keyboard with HTML and CSS

    How do I make images interactive?

    how to change color of selected menu in css or jquery [closed]

    All nested menus show when hovering over menu instead of just the first

    How to create a

    How can I include conversion from LESS to CSS in my ANT build file without including an extra Rhino .jar?

    How to remove extra space after a colon in CSS with Sublime Text 2?

    how to DRY up (remove redundancy) from this css class selector declaration?

    How to separate html header and content with css and make the content scrollable