need help with css

J

John Doe

picayunish said:
John Doe wrote in news:[email protected]:

Copy and paste the style into the right id's.
Add <link rel="stylesheet" type="text/css" href="foo.css"> between the
<head>.

Oh Blue links on a dark blue background is hard to see / read.
Click to expand...

Thanks for your reply.

Please take a look at this webpage :
http://larsandre.mine.nu/d042004/temp_menu2.htm

Here I've copy'ed and pasted the style from the first <div> tag into
temp_css.css file that looks like this (for now) :

..Layer2
{
position:absolute;
width:155px;
height:180px;
z-index:1;
left: 236px;
top: 38px;
background-color: #4565af;
layer-background-color: #FFFFCC;
border: 1px none #000000;
overflow: hidden;
}

Anyway, like you can see from the webpage only one of the menu-items work.
What am I doing wrong ?

Thanks for any help :)
 
P

picayunish

John Doe wrote in news:[email protected]:
Thanks for your reply.

Please take a look at this webpage :
http://larsandre.mine.nu/d042004/temp_menu2.htm

Here I've copy'ed and pasted the style from the first <div> tag into
temp_css.css file that looks like this (for now) :

.Layer2
Click to expand...

[snip css code]
Anyway, like you can see from the webpage only one of the menu-items
work. What am I doing wrong ?
Click to expand...

Change the .Layer2 into #Layer2.
Because the .Layer2 stands for class Layer2. But you did use id=Layer2, so
the # in the style sheet stands for id.
So with other words use:

#Layer2
{
position:absolute;
width:155px;
height:180px;
z-index:1;
left: 236px;
top: 38px;
background-color: #4565af;
layer-background-color: #FFFFCC;
border: 1px none #000000;
overflow: hidden;
}
 
M

Malcolm Collett

Change the .Layer2 into #Layer2.
Because the .Layer2 stands for class Layer2. But you did use id=Layer2, so
the # in the style sheet stands for id.
Click to expand...

What is the difference between class and id? When should class be used; and
when should id be used?

For example

#type1 {
...some values
}
....
<img id="type1"......>


..type1 {
...some values
}
....
<img class="type1"......>

I have tried both, and cannot see a difference between the two.

Malcolm Collett
 
W

William Tasso

Malcolm said:
What is the difference between class and id? When should class be
used; and when should id be used?
Click to expand...

id must be unique so ...

use id for heading/masthead, Navigation Bar, Content and such like

use class for Navigation items etc.
 
T

Toby A Inkster

picayunish said:
While a class may apply to *several* elements on a page, an id always
applies to only *one* element.
Click to expand...

Furthermore, an element may have several classes, but only one ID.

e.g.

<style type="text/css">
.big { font-size: 180%; }
.bold { font-weight: bold; }
.red { color: red; }
.centred { text-align: center; }
</style>
....
<h1 class="big red bold centred">Hello World</h1>
 
P

picayunish

Toby A Inkster wrote in news:p[email protected]:
Furthermore, an element may have several classes, but only one ID.

e.g.

<style type="text/css">
.big { font-size: 180%; }
.bold { font-weight: bold; }
.red { color: red; }
.centred { text-align: center; }
</style>
...
<h1 class="big red bold centred">Hello World</h1>
Click to expand...

Why using so many classes instead of one.
Accept you mean e.g.

<style type="text/css">
h1 { font-size: 180%; }
.bold { font-weight: bold; }
.red { color: red; background: transparent; }
.centred { text-align: center; }
</style>


<h1 class="red">Hello World</h1>
some content

<h1 class="bold">Hello World</h1>
some content

<h1 class="centred">Hello World</h1>
 
T

Toby A Inkster

picayunish said:
Toby A Inkster wrote in news:p[email protected]:

Why using so many classes instead of one.
Click to expand...

In this case as a frivilous example, but there are some cases where the
ability to assign multiple classes to one element comes in handy. For
example:

<style>
.male { color: blue; }
.female { color: #f88; }
.deceased { text-decoration: strike-through; }
.alive { font-weight: bold; }
.british { list-style: url('flag-uk.png'); }
.french { list-style: url('flag-fr.png'); }
.german { list-style: url('flag-de.png'); }
.spanish { list-style: url('flag-es.png'); }
</style>
<ul id="peoplelist">
<li class="male alive british">Toby</li>
<li class="deceased german">Hans</li>
<li class="female alive french">Isabelle</li>
<li class="male spanish">Jose</li>
<!-- etc -->
</ul>

In this example, a person can be male, female or unspecified; deceased,
alive or unspecified; and British, French, German, Spanish or unspecified.

If I was going to create individual styles for each possible combination,
eg:

..maleAliveBritish { color: blue; font-weight: bold; list-style:
url('flag-uk.png'); }

then there would be 3*3*5=45 classes needed, bloating the style sheet and
making it less manageable (e.g. if I wanted to change the .female colour,
I would have to change it in 15 places!)

So here it is a good idea to assign multiple classes to a single element.
 
P

picayunish

Toby A Inkster wrote in news:p[email protected]:
In this case as a frivilous example, but there are some cases where the
ability to assign multiple classes to one element comes in handy. For
example:

<style>
.male { color: blue; }
.female { color: #f88; }
.deceased { text-decoration: strike-through; }
.alive { font-weight: bold; }
.british { list-style: url('flag-uk.png'); }
.french { list-style: url('flag-fr.png'); }
.german { list-style: url('flag-de.png'); }
.spanish { list-style: url('flag-es.png'); }
</style>
<ul id="peoplelist">
<li class="male alive british">Toby</li>
<li class="deceased german">Hans</li>
<li class="female alive french">Isabelle</li>
<li class="male spanish">Jose</li>
<!-- etc -->
</ul>

In this example, a person can be male, female or unspecified; deceased,
alive or unspecified; and British, French, German, Spanish or
unspecified.

If I was going to create individual styles for each possible combination,
eg:

.maleAliveBritish { color: blue; font-weight: bold; list-style:
url('flag-uk.png'); }

then there would be 3*3*5=45 classes needed, bloating the style sheet and
making it less manageable (e.g. if I wanted to change the .female colour,
I would have to change it in 15 places!)

So here it is a good idea to assign multiple classes to a single element.
Click to expand...

Now I see.
Thanx for the explanation.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with some CSS 2
I need help fixing my website 2
Stuck with html and css 25
Help with my responsive home page 2
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Site Migration Ruined all my CSS?? 8
Need help making the position of an infinite animation sticky 1
Help me, going live with a quiz 0

Members online

Total: 42 (members: 2, guests: 40)
Robots: 190

Forum statistics

Threads
473,763
Messages
2,569,563
Members
45,039
Latest member
CasimiraVa

Latest Threads

Top