Skip navigation
atlnycdude24
Currently Being Moderated

How to center the menu

Jul 4, 2013 12:58 PM

Okay, I've created a horizontal menu using html/css. The menu works fine but don't know why the blocks (Home, Services, etc) is not centered properly on the nav bar background. Here is my html and css code.

 

 

<div id="nav">

<ul>

<li><a href="#">Home</a>

<ul>

<li><a href="#">Link 1</a></li>

<li><a href="#">Link 1</a></li>

<li><a href="#">Link 1</a></li>

 

 

 

</ul><!--clousre of inner UL tag-->

</li><!--Closing the main li tag-->

</ul><!--end of main ul tag-->

 

 

 

<ul>

<li><a href="#">Services</a>

<ul>

<li><a href="#">Link 1</a></li>

<li><a href="#">Link 1</a></li>

<li><a href="#">Link 1</a></li>

 

 

</ul><!--clousre of inner UL tag-->

</li><!--Closing the main li tag-->

</ul><!--end of main ul tag-->

 

 

<ul>

<li><a href="#">Portfolio</a>

<ul>

<li><a href="#">Link 1</a></li>

<li><a href="#">Link 1</a></li>

<li><a href="#">Link 1</a></li>

 

 

</ul><!--clousre of inner UL tag-->

</li><!--Closing the main li tag-->

</ul><!--end of main ul tag-->

 

 

 

</div><!--end of navigation area-->

 

 

 

html:

 

 

 

css: #nav{           position:absolute;           width:846px;           height:50px;           background-color:#929292;           padding: 0px;           margin-top: 250px;           margin-right: 0;           margin-bottom: 0;           margin-left: 200px; } #nav ul {           margin: 0px;           padding: 0px;           float: left;           position: relative; } #nav ul li {           list-style-type: none;           background-color: #929292;           float: left;           border: 1px solid #CCC;           position: relative; } #nav ul li a {           font-family: Verdana, Geneva, sans-serif;           font-size: 12px;           color: #FFF;           text-decoration: none;           text-align: center;           display: block;           line-height: 30px;           height: 30px;           width: 150px; } #nav ul li a:hover {           color: #CCC; } #nav ul ul {           position: absolute;           visibility: hidden;           top: 31px; } #nav ul li ul li a:hover {           background-color: #536474; } #nav ul li a:hover {           color: #333; } #nav ul li:hover ul {           visibility: visible; } #nav ul li:hover {           background-color: #666; }

 

 

I also attached a screen shot of the menu. I don't want those blocks on the upper left hand corner but smack in the middle. Thanks in advanced for your help!

 

nav-menu.JPG

 
Replies
  • Currently Being Moderated
    Jul 4, 2013 1:26 PM   in reply to atlnycdude24

    You can't center an AP Div since it has been removed from the document flow.

    Please put your HTML & CSS files on your server and post a link.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2013 3:30 PM   in reply to atlnycdude24

    Thanks -

     

    Are you preparing to lose all the absolutely positioned DIVs and proceed to a functional site?

     

    I just used normal DIVs and modified your margins arbitrarily to show this:

     

    rodr.jpg

    Your page is too wide to avoid the dreaded horizontal scrollbar

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2013 4:05 PM   in reply to atlnycdude24

    You're entirely welcome.

     

    Happy 4th

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2013 4:50 PM   in reply to atlnycdude24

    Ken Binney said:

     

     

    You can't center an AP Div since it has been removed from the document flow.

    and

    I just used normal DIVs and modified your margins arbitrarily to show this:

    Your whole approach to web design is wrong, especially because of the plethora of screen sizes in use.

     

    Your minimum page width of 1040 px ensures that smaller screen sizes (e.g. iPad) will have to horizontally scroll the page.

     

    As Ken has conservatively stated, absolute positioning removes the element from the document flow. I would like to rephrase that by saying DO NOT USE AP's IN A NORMAL LAYOUT

     

    And lastly, a huge background image is a no-no. It not only uses unneccesary  bandwidth, it also limits the flexibility of the design.

     

    There are plenty of articles available on the web for you to get an idea of modern web design. Just Google "Responsive Web Design" where CSS-Tricks is probably the most useful site.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2013 5:10 PM   in reply to atlnycdude24

    The new site is one of the best Responsive Web Design (RWD) that I have seen and proves my point.

     

    As a little exercise for you, reduce the browser width on each of the two sites. Notice the horizontal scroll bar for each and notice the changing layout for smaller screen sizes in the new layout?

     

    I rest my case.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2013 5:20 PM   in reply to Ben Pleysier

    As an additional note, the new site has been based on Twitter Bootstrap. Although a very bloated framework, it is easy to work with and does the job well.

     

    For a DW Bootstrap extension, have a look here.

     

    I use Zurb-Foundation, also a bloated framework.

     

    For a more reliable extension, have a look at this commercial product.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2013 6:54 PM   in reply to atlnycdude24

    In regards to my project, don't think that this is the final product. I'm just laying out the building blocks for the foundation. Then I'll fix it so it would become a RWD. I'm pretty sure the people who built the Southern's web page went through the same process as I'm going through.

    No!

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2013 7:12 PM   in reply to atlnycdude24

    atlnycdude24 wrote:

     

    Where is the code?

     

    OK try this code:

     

    1) First layout your HTML like this:

     

    <ul id="nav">

            <li><a href="/">Home</a>

            <ul>

                <li><a href="#">Link 1</a></li>

                <li><a href="#">Link 2</a></li>

                <li><a href="#">Link 3</a></li>

            </ul>

            </li>

            <li>

                <a href="/Services/">Services</a>

                <ul>

                    <li><a href="#">Link 1</a></li>

                    <li><a href="#">Link 2</a></li>

                    <li><a href="#">Link 3</a></li>

                </ul>

            </li>

            <li>

                <a href="/portfolio/">Portfolio</a>

                <ul>

                    <li><a href="#">Link 1</a></li>

                    <li><a href="#">Link 2</a></li>

                    <li><a href="#">Link 3</a></li>

                </ul>

            </li>

            <li><a href="/Reseller/">Reseller</a></li>

            <li><a href="/resources/">Store</a></li>

        </ul>

     

    Now use this CSS:

     

    #nav{

                border:1px solid #ccc;

                border-width:1px 0;

                list-style:none;

                margin:0;

                padding:0;

                text-align:center;

            }

            #nav li{

                position:relative;

                display:inline;

            }

            #nav a{

                display:inline-block;

                padding:10px;

            }

            #nav ul{

                position:absolute;

                left:-9999px;

                margin:0;

                padding:0;

                text-align:left;

            }

            #nav ul li{

                display:block;

            }

            #nav li:hover ul{

                left:0;

            }

            #nav li:hover a{

                text-decoration:underline;

                background:#f1f1f1;

            }

            #nav li:hover ul a{

                text-decoration:none;

                background:none;

            }

            #nav li:hover ul a:hover{

                text-decoration:underline;

                background:#f1f1f1;

            }

            #nav ul a{

                white-space:nowrap;

                display:block;

                border-bottom:1px solid #ccc;

            }

            a{

                color:#c00;

                text-decoration:none;

                font-weight:bold;

            }

            a:hover{

                text-decoration:underline;

                background:#f1f1f1;

     

    This should more or less get you going.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2013 7:45 PM   in reply to atlnycdude24

    This is yet another way doing the same thing:

     

    1) First the HTML code:

     

    <div id="centeredmenu">

       <ul>

          <li><a href="#">Home</a>

             <ul>

                <li><a href="#">Link 1</a></li>

                <li><a href="#">Link 2</a></li>

                <li><a href="#">Link 3</a></li>

                <li><a href="#">Link 4</a></li>

                <li><a href="#">Link 5</a></li>

             </ul>

          </li>

          <li class="active"><a href="#" class="active">Services</a>

             <ul>

                <li><a href="#">Link 1</a></li>

                <li><a href="#">Link 2</a></li>

                <li><a href="#">Link 3</a></li>

                <li><a href="#">Link 4</a></li>

                <li><a href="#">Link 5</a></li>

             </ul>

          </li>

          <li><a href="#">Portfolio</a>

             <ul>

                <li><a href="#">Link 1</a></li>

                <li><a href="#">Link 2</a></li>

                <li><a href="#">Link 3</a></li>

                <li><a href="#">Link 4</a></li>

                <li><a href="#">Link 5</a></li>

             </ul>

          </li>

          <li><a href="#">Reseller</a>

             <ul>

                <li><a href="#">Link 1</a></li>

                <li><a href="#">Link 2</a></li>

                <li><a href="#">Link 3</a></li>

                <li><a href="#">Link 4</a></li>

                <li><a href="#">Link 5</a></li>

             </ul>

          </li>

          <li><a href="#">Store</a>

             <ul class="last">

                <li><a href="#">Link 1</a></li>

                <li><a href="#">Link 2</a></li>

                <li><a href="#">Link 3</a></li>

                <li><a href="#">Link 4</a></li>

                <li><a href="#">Link 5</a></li>

             </ul>

          </li>

       </ul>

    </div>

    2) Now the CSS

     

    #centeredmenu {

       clear:both;

       float:left;

       margin:0;

       padding:0;

       border-bottom:1px solid #000; /* black line below menu */

       width:100%;

       font-family:Verdana, Geneva, sans-serif; /* Menu font */

       font-size:90%; /* Menu text size */

       z-index:1000; /* This makes the dropdown menus appear above the page content below */

       position:relative;

    }

     

    /* Top menu items */

    #centeredmenu ul {

       margin:0;

       padding:0;

       list-style:none;

       float:right;

       position:relative;

       right:50%;

    }

    #centeredmenu ul li {

       margin:0 0 0 1px;

       padding:0;

       float:left;

       position:relative;

       left:50%;

       top:1px;

    }

    #centeredmenu ul li a {

       display:block;

       margin:0;

       padding:.6em .5em .4em;

       font-size:1em;

       line-height:1em;

       background:#ddd;

       text-decoration:none;

       color:#444;

       font-weight:bold;

       border-bottom:1px solid #000;

    }

    #centeredmenu ul li.active a {

       color:#fff;

       background:#000;

    }

    #centeredmenu ul li a:hover {

       background:#36f; /* Top menu items background colour */

       color:#fff;

       border-bottom:1px solid #03f;

    }

    #centeredmenu ul li:hover a,

    #centeredmenu ul li.hover a { /* This line is required for IE 6 and below */

       background:#36f; /* Top menu items background colour */

       color:#fff;

       border-bottom:1px solid #03f;

    }

     

    /* Submenu items */

    #centeredmenu ul ul {

       display:none; /* Sub menus are hiden by default */

       position:absolute;

       top:2em;

       left:0;

       right:auto; /*resets the right:50% on the parent ul */

       width:10em; /* width of the drop-down menus */

    }

    #centeredmenu ul ul li {

       left:auto;  /*resets the left:50% on the parent li */

       margin:0; /* Reset the 1px margin from the top menu */

       clear:left;

       width:100%;

    }

    #centeredmenu ul ul li a,

    #centeredmenu ul li.active li a,

    #centeredmenu ul li:hover ul li a,

    #centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */

       font-size:.8em;

       font-weight:normal; /* resets the bold set for the top level menu items */

       background:#eee;

       color:#444;

       line-height:1.4em; /* overwrite line-height value from top menu */

       border-bottom:1px solid #ddd; /* sub menu item horizontal lines */

    }

    #centeredmenu ul ul li a:hover,

    #centeredmenu ul li.active ul li a:hover,

    #centeredmenu ul li:hover ul li a:hover,

    #centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */

       background:#36f; /* Sub menu items background colour */

       color:#fff;

    }

     

    /* Flip the last submenu so it stays within the page */

    #centeredmenu ul ul.last {

       left:auto; /* reset left:0; value */

       right:0; /* Set right value instead */

    }

     

    /* Make the sub menus appear on hover */

    #centeredmenu ul li:hover ul,

    #centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */

       display:block; /* Show the sub menus */

    }

     

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 6, 2013 8:11 PM   in reply to atlnycdude24

    You need to put the nav bar inside the header tag.  I would do something like this:

     

    <header>

    <h1><a class="header-logo" href="#">Rodriguez Studios Website Design and Development and IT Solutions in Kennesaw Atlanta Georgia</a></h1>

    <ul id="nav">

      <li><a href="/">Home</a>

      <ul>

       <li><a href="#">Link 1</a></li>

       <li><a href="#">Link 2</a></li>

       <li><a href="#">Link 3</a></li>

      </ul>

      </li>

      <li>

       <a href="/Services/">Services</a>

       <ul>

        <li><a href="#">Link 1</a></li>

        <li><a href="#">Link 2</a></li>

        <li><a href="#">Link 3</a></li>

       </ul>

      </li>

      <li>

       <a href="/portfolio/">Portfolio</a>

       <ul>

        <li><a href="#">Link 1</a></li>

        <li><a href="#">Link 2</a></li>

        <li><a href="#">Link 3</a></li>

       </ul>

      </li>

      <li><a href="/Reseller/">Reseller</a></li>

      <li><a href="/resources/">Store</a></li>

    </ul>

    </header><!--logo-->

     

    This would make sure the Nav bar in the part of the header.  I suggest try it on your website and post a revised link.  I will have a look at it later this evening or early tomorrow unless somebody else has solved this for you.

     

    G/L

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 6, 2013 8:12 PM   in reply to atlnycdude24

    It's no use asking our assistance while pursuing with the use of AP's

     

    I thought of helping you by using the Bootstrap extension and came up with this idea for a RWD.

     

    Have a look at the proposal and try changing the width of the browser.

     

    The page took 10 minutes to construct and can easily be changed to suit.

     

    It's up to you.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 8, 2013 1:23 PM   in reply to atlnycdude24

    The obvious solution is to move your logos above the navbar div in your HTML makup.

     

    CSS:

    /**adjust padding as desired**/

    #logos img {display:inline; padding:0 5%}

     

    HTML:

    <div id="logos">

      <img src="logo/Rodriguez-Studios-Web-and-IT-Solution-Logo.jpg" height="100" width="141">

      <img src="logo/Rodriguez-Studios-Web-and-IT-Solution-Logo.jpg" height="100" width="141">

    <div>

     

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points