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 create the masonry effects with just bootstrap 3 grid system and css

    How to reflect updates to CSS at runtime in Visual Studio 2012?

    How to transition overlay menu on clicking button

    How to force style formatting into child tags of

    How to make arrow in CSS with angle?

    how to get the cssText of external style?

    how to make a timeline using html, css, javascript?

    How to make responsive video container div?

    How to make the gradient border stay at the screen

    How do I continue to allow the user to click until a certain point?

    Flex 4 How to set background image to VBox?

    How can I make a sub-menu appear adjacent to main menu and not below it with css?

    How do I use Stylish to change the font in Google Tasks?

    How to hightlight non editable backgrid cells?

    How to put banner in css?

    How to load a apply jQuery function upon appending a
    via Ajax?

    WordPress admin stylesheet not showing images

    How to simulate \hfill with HTML and CSS?

    How to achieve a CSS footer “curtain” effect?

    How to strip CSS from a button in a jQuery Mobile dialog

    CSS - How do I get my list element to fill 100% of the block

    How to get 2 CSS files to work together? - Problem with !important overriding rules

    How to edit the CSS of a td element through the hierarchy?

    How to read a browser's unsupported CSS properties?

    jquery/css: I want to change the bgcolor of row only after hovering for 1 or 2 seconds. How to achieve this?

    how to adjust width of first cell of a table using CSS

    CSS form with side by side fields…how to align the labels and fields vertically?

    how to include css style to modify existing placeholder

    Creating a calendar control using CSS: How to auto layout events

    How to select only the “parent” div of an image