Member Avatar for Monkey101 
<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
  • 189 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Monkey101

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

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
Member Avatar for Monkey101

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 developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.