0
<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

2
Contributors
2
Replies
16
Views
4 Years
Discussion Span
Last Post by Monkey101
0

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>

Edited by JorgeM

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.