[CSS] 2 stylen gebruiken op één pagina (toekennen aan <td>)

[Verwijderd]

Ik ben al geruime tijd bezig met het proberen te scheiden van Stylesheets (CSS); ik heb 1 tabel met 3 kollommen en wil in alle drie de kolommen drie verschillende stylen gebruiken, hoe kan ik dit het beste doen?

Ik heb aan mijn site de regel toegevoegd:
<link rel="stylesheet" type="text/css" href="style.css"> en de desbetreffende style.css-file in mijn root gezet, alleen: moet ik nu nog twee andere files maken (bijv. style2.css en style3.css) voor de andere twee kolommen of is er een andere manier? Ik maak mijn site in Dreamweaver en Dreamweaver maakt zelf bij bijvoorbeeld het aanpassen van de font-color een style aan (<style=text/css>), maar dat wil ik niet; ik wil de stylen in een apart document opnemen als dat gaat.

Het lijkt me niet zo ingewikkeld, alleen gaat er steeds iets fout met het scheiden van de stylen. Maar ok, ben ook een redelijke beginner..

Alvast bedankt.

[BtM909]

Je moet het onderscheid niet met aparte stylesheet documenten maken, maar in je stylesheet.

Je maakt dan gebruik van classes en eventueel id's.

Als dat eenmaal werkt, maakt de scheiding in aparte files ook niet meer uit, want die worden allemaal geladen en toegepast!

[sjaakaq]

Cascading Stylesheet:

td.nummero1{
stijl enzo;
}

td.nummero2{
stijl enzo;
}

td.nummero3{
stijl enzo;
}

HTML:

...
<td id="nummero1">lala</td>
<td id="nummero2">lala</td>
<td id="nummero3">lala</td>
...

[André]

leokennis: een . is voor classes en een # voor id's

[Verwijderd]

bedenk ook dat het class en het id attribuut niet is "om er een style aan te hangen". In principe kan dit namelijk aan elk attribuut.

Een id is een naam die je geeft aan een element. Deze zijn uniek, net als dat namen van personen (zo goed als) uniek zijn
Een class is een bepaalde groep waar een element in zit, vergelijk het met een beroep ofzo. Een element kan zelfs in meerdere classes zitten. (het attribuut heet niet voor niets class, anders had het wel style geheten)

[Verwijderd]

Ok, ik heb inmiddels ID's aangemaakt en de tag: <div id="menu"> toegevoegd aan de <td>-tag waar het om gaat. Ik heb ook een tweede <div id="content"> toegevoegd aan een andere <td>-tag, en ik zie verschil, dus dat werkt. Alleen pakt hij een aantla van de tags toch niet goed, met name de a:hover, a:visited, a:active style-opties... het werkt dus wel voor o.a. de font grootte en het font zelf, maar deze dus niet, hoe kan dat?

Dit is mijn stylesheet op dit moment:

#menu {
font-size: 8pt;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
a:visited {color:#FFFFFF};
a:link {color:#FFFFFF};
a:hover {color:#cc9933};
a {text-decoration: none};
a:vlink {color:#FFFFFF};
a:active {color:#FFFFFF};
}

#content {
font-size: 8pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}

#mmcontent {
font-size: 4pt;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
a:visited {color:#FFFFFF};
a:link {color:#FFFFFF};
a:hover {color:#cc9933};
a {text-decoration: none};
a:vlink {color:#FFFFFF};
a:active {color:#FFFFFF};
}

[ Voor 5% gewijzigd door Verwijderd op 19-11-2004 13:57 ]

[André]

code:

#menu {
  font-size: 8pt;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #FFFFFF;
}

#menu a:visited {color:#FFFFFF};
#menu a:link {color:#FFFFFF};
#menu a:hover {color:#cc9933};
#menu a {text-decoration: none};
#menu a:vlink {color:#FFFFFF};
#menu a:active {color:#FFFFFF};

#content {
  font-size: 8pt;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #000000;
}

#mmcontent {
  font-size: 4pt;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #FFFFFF;
}

#mmcontent a:visited {color:#FFFFFF};
#mmcontent a:link {color:#FFFFFF};
#mmcontent a:hover {color:#cc9933};
#mmcontent a {text-decoration: none};
#mmcontent a:vlink {color:#FFFFFF};
#mmcontent a:active {color:#FFFFFF};

[Verwijderd]

zie ook: http://www.w3.org/TR/CSS21/selector.html#q1

en over mijn bovenstaande opmerking heb ik maar eens een verhaaltje geschreven, want ik blijf het herhalen http://www.rikkertkoppes.com/?thoughts/2004/11/19

[Verwijderd]

Andre: werkt niet helaas, blijft hetzelfde. Ik denk dat ik bovenstaande links maar effe ga doorlezen anders... Bedankt in ieder geval. Ik heb trouwens alles '<span style>' dingen ook gewist, maar er blijkt er geen in de weg te hebben gezeten..

[Verwijderd]

Ik snap niet wat het verschil is en daarmee waarom bijvoorbeeld de uitleg van Andre hierboven toch niet werkt; ik zie niet wat ik moet veranderen aan de hand van je hint om het goed te krijgen.. Helpt het als ik zeg dat ik met een template werk..? (waar volgens mij wel alles in klopt).

Het gaat om de volgende (test-)site: http://www.bestelringtones.com/indextest.html

in de <HEAD> staat het aanroepen van het style.css bestand en aan twee <td>-tags het aanroepen van de id's: #menu en #content d.m.v. '<div id="menu">....</div>'

Kan iemand nog wat toelichten danwel de HTML bekijken van wat ik over het hoofd zie? Bvd..

[ Voor 9% gewijzigd door Verwijderd op 19-11-2004 16:53 ]

[Verwijderd]

sluit je body selector eens af...

verder als ik de layout zo zie betwijfel ik of je html wel correct is, maar dat weet ik niet, want ik zie eigenlijk alleen maar een ontzettende brei js code

overigens is :vlink geen pseudoclass

[Verwijderd]

Heren, bedankt; het werkt nu helemaal goed. Ik hbe m'n HTML nagelopen, onnodige rotzooi weggemikt, het gebruik van id's vervangen door classes en het werkt erg goed nu. Thanks for alle info!