CSS: Convert to class

KevinCB · 20 Aug 2007 at 09:26

Hi,

I have some CSS code, which I would like to change into a class so I can use it again on the page, but I'm having difficulty trying to do it.

The code is for the <ul></ul> form property.
I've managed to create a class for 'nav', but can't pick up the <li></li> properties associated with it.

Appreciate any help.
Thanks.

Here is the code:

Code:

ul#nav {
	clear:both;
	float:left;
	color: #000000;
	background: #E0FFE0; 
	padding:0px 0px 20px 0px;
	margin:0px 0px 20px 0px;
	list-style: none;
	width:200px;
	border-bottom:1px solid #72A372;
}

ul#nav li {
	padding:2px 0px 2px 0px;
	margin:0px 0px 0px 0px;
	float: left;
	width:200px;
}

ul#nav li a {
	border:1px solid #E0FFE0;
	display: block;
	font-size: small;
	font-weight: normal;
	text-decoration: none;
	padding:0px 0px 0px 20px;
	margin:0px 0px 0px 0px;
}

ul#nav li a:hover {
    background: #FFFFFF;
    color: #993333;
    width: 178px;
    border: 1px solid #72A372;
}

Boov · 20 Aug 2007 at 10:14

if your html element has an id="XXX", then you can css reference to that using the hash (#) symbol as you have done

if it has a class="XXX" then you can css reference that using the fullstop (.) symbol

Code:

<ul id="nav">
<li class="home"><a></li>
<li class="about"><a></li>
<li class="etc"><a></li>
</ul>

Code:

#nav {example-css:blah}
#nav .home {example-css:more}
#nav .about {example-css:more}

classes can be used multiple times throughout the current page, for example you could make a .news-article class for your front page, and have several news items displayed. but id's need to be unique, so you should only use them for the design elements that only appear once per page, like you have done, for the nav, banner, header, footer, content area etc.

KevinCB · 20 Aug 2007 at 14:49

Hmmm, I wanted to try and make the 'nav' a class, so I can use it again, but still retain all the style properties for the unordered list and list properties.

For example:

Code:

<ul class="nav">
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>
</ul>
<ul class="nav">
   <li><a href="#">Link 4</a></li>
   <li><a href="#">Link 5</a></li>
   <li><a href="#">Link 6</a></li>
</ul>

Is that possible?

JonD · 20 Aug 2007 at 14:59

KevinCB said:
Hmmm, I wanted to try and make the 'nav' a class, so I can use it again, but still retain all the style properties for the unordered list and list properties.

For example:

Code:

<ul class="nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> <ul class="nav"> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> </ul>

Is that possible?

Try this:

Code:

ul.nav {
  bla bla bla
}
ul.nav li {
  bla bla bla
}
ul.nav li a {
  bla bla bla
}

If you want to just give the nav a class but keep the li different for each class just dont include the "ul.nav" before the li element in the css file.

KevinCB · 20 Aug 2007 at 16:44

OK, when I try that it changes all the style for some reason.

Click here for an example of what happens.

The image on the left shows how it looks using id and the image on the right shows how it looks when I change it to a class, using exactly the same as the code posted above.

It seems to add padding on the left of the text, and removes the white background colour.
I'm assuming this is because it is embedded in another div, but how do I get around that?

UPDATE: I have managed to sort it out with a bit of playing around.

Thanks