CSS Classes

Hi, As part of my collage assignment I have to make a website (linked together with a navigation bar), and so to give all the webpages a consistent look I'm using a CSS class to apply the same css rules to div tags in the "AllContent" class, meaning the div tag that contains all the webpage content. I can get the CSS class to work for this class but I also have another div tag for sidebar elements (i.e. a selection of text items), and the CSS rules don't have an effect on the div tags in the "sidebar" class. I've programmed this class exactly the same as the "AllContent" class, so how come it doesn't work for the second class? Thanks.

CSS code:
.AllContent
{
width: 1024px;
margin-left: auto;
margin-right: auto;
background-color: #e0e0e0;
}

body
{
background-color: #c0c0c0;
}

li
{
display: inline;
}

// style settings for the sidebar of each webpage (all sidebars will follow
// these style rules)
.sidebar
{
float: left;
background-color: #ffffff;
}

li.sidebar
{
display: block;
}


HTML code:
<html>
<head>
<title>Info</title>
<link rel="stylesheet" type="text/css" href="../Website CSS/Website CSS.css">
</head>

<body>

<div class="AllContent">
<!-- This is the navigation bar, it has been centred and is dependant on -->
<!-- the external CSS file, each item links to the first page in the folder -->
<center>
<ul>
<li><a href="../Home/Home.html">Home</a></li>
<li><a href="../Info/Band1.html">Info</a></li>
<li><a href="../Booking.html">Booking</a></li>
<li><a href="../About/History.html">About</a></li>
<li><a href="../Contact Us/Customer Queries.html">Contact Us</a></li>
</ul>
</center>


<h5>Info: Band #1</h5>

<div class="sidebar">
<ul>
<li class="sidebar">Band #1</li>
<li class="sidebar">Band #2</li>
<li class="sidebar">Band #3</li>
<li class="sidebar">Band #4</li>
<li class="sidebar">Band #5</li>
<li class="sidebar">Festival Site Map</li>
<li class="sidebar">Shops</li>
<li class="sidebar">Activities</li>
<li class="sidebar">Dining</li>
<li class="sidebar">Accommodation</li>
<li class="sidebar">Health and Safety</li>
</ul>

<h4>Hello</h4>

</div>


</div>


</body>
Sign In or Register to comment.