Member Avatar for plasticfood

Ok i've just starting learning css and html and i created a nav bar following a tutorial.
HTML file---------------------

<div id = "wrapper">
        <div id = "navmenu">

            <ul>
            <li><a href="#">ITEM</a>
                <ul>
                <li>
                    <a href = "#">items</a>
                </li>


                </ul>
            </li>
            </ul>

            <ul>
            <li><a href="#">ITEM</a>
                <ul>
                <li>
                    <a href = "#">item</a>
                </li>

                </ul>
            </li>
            </ul>

            <ul>
            <li><a href="#">ITEM</a>
                <ul>
                <li>
                    <a href = "#">item</a>
                </li>

                </ul>
            </li>
            </ul>

            <ul>
            <li><a href="#">ITEM</a>

            </li>
            </ul>


            <ul>
            <li><a href="#">ITEM</a>

            </li>
            </ul>

        </div>
        </div>

CSS file-------------

body{
    color: black
    font-family: "sans-serif", times new roman; 
    font-size: large;
    background:url('homeImage.png');
    overflow:hidden;
}
h1{     

    position:fixed;
    right: 30px;
    font-size: 50%;
}
h2{
    position:fixed;
    right: 310px; 
    top:-40px;
    font-size: 139%;
}


#navmenu{
    position:relative;
    font-size:100%;
    margin: 0;
    padding: 0; 
    top: 100px;
    right: -450px;

}

#navmenu ul{
    margin: 0;
    padding: 0; 
    line-height:30px;
}

#navmenu li{
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: relative;
    background:#E8E8E8     ;
}

#navmenu ul li a{
    text-align: center;
    font-family: Palatino;
    text-decoration: none;
    height: 30px;
    width:163px;
    display: block; 
    color: #000;
    border:1px solid #000;

}

#navmenu ul ul{
    position: absolute;
    visibility: hidden;
    top: 32px;

}

#navmenu ul li:hover ul{
    visibility: visible;
}


#navmenu li:hover{
    background:#B8B8B8 ;
}

Right now i think i'm just moving the nav bar around based on the screen of my computer. so if i open this site in another computer, the position will not be where i intended it to be. I want my horizontal nav bar to be align to right or centered. How do i do this?

  • 2 Contributors
  • 3 Replies
  • 141 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for JorgeM

If you would like the navmenu to be centered, remove the right property, assign a width and set the left and right margin to auto.

#navmenu{
    position:relative;
    font-size:100%;
    width: 900px;
    margin: 0 auto;
    padding: 0; 
    top: 100px;
}
Member Avatar for plasticfood

Cool thank you! but what if i want it to align to the right or left? I've tried float:left; but that doesn't work.

Member Avatar for JorgeM

You could use float, but that takes the element out of the flow. I am not i front of a computer right now but this should have your nav div aligned to the left.

 #navmenu 

 font-size:100%;
 padding: 0; 
 margin: 0;

Is there other code HTML code on the page that you didn't include?

Is this site online?

Edited by JorgeM
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.