Another horrible CSS thing

garry27 · June 29, 2011

Why is my nav menu self indenting itself and how can I fix it :shrug: and I wont change my code this time

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reptile Care Guide - Homepage</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="Container">

<img src="images/header.gif" width="1000" height="191" alt="Reptile Care Guide" />

<ul id="NavBar">

<li>
    <div class="rollover-tab-div1"></div>
    <div class="rollover-tab-div2"><a href="index.html" title="Reptile Care Guide - Homepage">Home</a></div>
    <div class="rollover-tab-div3"></div> 
</li>


<li>
    <div class="rollover-tab-div1"></div>
    <div class="rollover-tab-div2"><a href="bearded-dragon.html" title="Reptile Care Guide - Bearded Dragon">Bearded Dragon</a></div>
    <div class="rollover-tab-div3"></div>  
</li>

<li>
    <div class="rollover-tab-div1"></div>
    <div class="rollover-tab-div2"><a href="corn-snake.html" title="Reptile Care Guide - Corn Snake">Corn Snake</a></div>
    <div class="rollover-tab-div3"></div>  
</li>
<li>
    <div class="rollover-tab-div1"></div>
    <div class="rollover-tab-div2"><a href="green-anole.html" title="Reptile Care Guide - Green Anole">Green Anole</a></div>
    <div class="rollover-tab-div3"></div>  
</li>
<li>
    <div class="rollover-tab-div1"></div>
    <div class="rollover-tab-div2"><a href="leopard-gecko.html" title="Reptile Care Guide - Leopard Gecko">Leopard Gecko</a></div>
    <div class="rollover-tab-div3"></div>  
</li>
<li>
    <div class="rollover-tab-div1"></div>
    <div class="rollover-tab-div2"><a href="blogs.html" title="Reptile Care Guide - Blogs">Blogs</a></div>
    <div class="rollover-tab-div3"></div>  
</li>


</ul>


<div id="TabBar">
</div>

<div id="MainContent">Content for  id "MainContent" Goes Here</div>

</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

body {
background-image: url(../images/bg-tile3.jpg);
background-repeat: repeat;
}
#Container {
background-color: #FFF;
margin: 0 auto;
width: 1000px;
}

#NavBar {
background-image: url(../images/nav-bar.gif);
height: 38px;
width: 1000px;
background-repeat: no-repeat;
margin: 0px;
text-align: center;
}
#TabBar {
background-image: url(../images/tab-bar.gif);
height: 23px;
width: 1000px;
float: left;
}

#NavBar ul {
    margin: 0; 
padding: 0;
    float: left;
}

#NavBar li {
display: inline;
margin: 0;
padding: 0;

}


.rollover-tab-div1 {
height: 36px;
width: 10px;
float: left;
}

.rollover-tab-div2 {
height: 36px;
width: auto;
float: left;
}

.rollover-tab-div3 {
height: 36px;
width: 10px;
float: left;
}


#NavBar li:hover .rollover-tab-div1 {
background-image: url(../images/rollover-menutab-1.1.gif);
}

#NavBar li:hover .rollover-tab-div2{
background-image: url(../images/rollover-menu-tab-1.2.gif);
}

#NavBar li:hover .rollover-tab-div3 {
background-image: url(../images/rollover-menu-tab-1.3.gif);
}

#NavBar li a {
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #FFF;
font-weight: bold;
padding-right: 15px;
padding-left: 15px;
padding-top: 7px;
height: 36px;
float: left;
}



.clear-float{
clear:both;
margin:0;
padding:0;	
}
#Container #NavBar li div {
background-repeat: repeat-x;
margin: 2px 0 0 0;
padding: 0;
}

http://www.gigaddict.net/reptilepetcare/index.html

Sign In

Another horrible CSS thing

Recommended Posts

garry27

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information