<div style="width:100%; background-color: cornflowerblue">
            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; padding-top: 3px; padding-bottom: 3px; color: white; font-size: 20px;">About</a></li>
            </div>

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; color: white; padding-top: 3px; padding-bottom: 3px; font-size: 20px;">Books</a></li>
            </div>

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href=""style="text-decoration:none; color: white; padding-top: 3px; padding-bottom: 3px; font-size: 20px;">Electronics</a></li>
            </div>

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; color: white; padding-top: 3px; padding-bottom: 3px; font-size:20px;">Apparel</a></li>
            </div>   

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; color: white; padding-top: 3px; padding-bottom: 3px; font-size:20px;">Activities</a></li>
            </div>   

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; color: white; padding-top: 3px; padding-bottom: 3px; font-size:20px;">Student Life</a></li>
            </div>   

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; color: white; padding-top: 3px; padding-bottom: 3px; font-size:20px;">Athletics</a></li>
            </div>    

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; color: white; padding-top: 3px; padding-bottom:     3px; font-size:20px;">Engagements</a></li>
            </div>   
    </div>

The ENGAGEMENT piece is not aligning up on my navigation bar...this is the only problem i am having

Recommended Answers

Well, the first issue I see is that you have 8 items each at 13% wide. Thats more than 100%, so it wont fit across your display.

Also, I'd recommendt hat you do not apply inline styles, as it makes it very difficult to make changes. You should consider using …

Jump to Post

All 2 Replies

Well, the first issue I see is that you have 8 items each at 13% wide. Thats more than 100%, so it wont fit across your display.

Also, I'd recommendt hat you do not apply inline styles, as it makes it very difficult to make changes. You should consider using an external style sheet. Here is an example with internal styles. You also had some div elements that werent close properly and you really need to use the <ul> element in conjuction with the <li> element.

<!DOCTYPE html>
<html>
<head>
<style>
.nav {
width:100%; 
background-color: cornflowerblue;
}

.nav ul li {
width: 12%;
float: left;
text-align: center;
height: 30px;
background-color: cornflowerblue;
list-style-type: none;
}

.nav ul li a {
text-decoration:none; 
padding-top: 3px; 
padding-bottom: 3px; 
color: white; 
font-size: 20px;
}
</style>
</head>
<body>
  <div class="nav">
    <ul>
        <li><a href="#" >About</a></li>
        <li><a href="#" >Books</a></li>
        <li><a href="#" >Electronics</a></li>
        <li><a href="#" >Apparel</a></li>
        <li><a href="#" >Activities</a></li>
        <li><a href="#" >Student Life</a></li>
        <li><a href="#" >Athletics</a></li>
        <li><a href="#" >Engagements</a></li>
    </ul>   
  </div>
</body>
</html>

Thanks I actually figured out the problem took a minute !

Be a part of the DaniWeb community

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