style platzsparend

Schnuckenpapa

Schnuckenpapa

New member
Style platzsparend festlegen

Guten Abend,
ich bitte um Antwort für folgende Frage:
Unten genanntes Beispiel funktioniert. Allerdins sagt w3c "rasse" sei schon definiert in der Zeile 15. Muss ich für jedes div einen eigenen Style definieren oder geht das w3c-conform auch kürzer?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>style platzsparend definieren?</title>

<style type="text/css">
#rasse
{position:absolute; height:100px; width:130px; font-size:9pt; text-align:center;
background:#CCCCFF; border:solid 1px #000000;cursor:pointer; z-index:3;}
</style>
</head>
<body>
<div id="rasse" style="top:10px; left:45px;">
<img border="0" src="images/Bentheimer_Schaf.jpg" onclick="g=0;füllen();" width="128" height="80" alt="Bentheimer Landschaf"> Bentheimer Landschaf </div>
<div id="rasse" style="top:10px; left:180px;">
<img border="0" src="images/Coburger_schaf.jpg" onclick="g=1;füllen()" width="128" height="80" alt="Coburger Fuchs"> Coburger Fuchs </div>
<div id="rasse" style="top:10px; left:315px;">
<img border="0" src="images/Milchschaf_weiss.jpg" onclick="g=2;füllen()" width="128" height="80" alt="Milchschaf weiss"> Milchschaf weiss </div>
<div id="rasse" style="top:10px; left:450px;">
<img border="0" src="images/Milchschaf_schwarz_2.jpg" onclick="g=3;füllen()" width="128" height="80" alt="Milchschaf schwarz"> Milchschaf schwarz </div>
</body>
</html>
Grüsse Schnuckenpapa
 
Zuletzt bearbeitet:
Also eine ID muss eindeutig sein.

Man kann allerdings Klassen definieren :

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>style platzsparend definieren?</title>

<style type="text/css">
.rasse
{position:absolute; height:100px; width:130px; font-size:9pt; text-align:center;
background:#CCCCFF; border:solid 1px #000000;cursorointer; z-index:3;}
</style>
</head>
<body>
<div id="rasse1" class='rasse' style="top:10px; left:45px;">
<img border="0" src="images/Bentheimer_Schaf.jpg" onclick="g=0;füllen();" width="128" height="80" alt="Bentheimer Landschaf"> Bentheimer Landschaf </div>
<div id="rasse2" class='rasse' style="top:10px; left:180px;">
<img border="0" src="images/Coburger_schaf.jpg" onclick="g=1;füllen()" width="128" height="80" alt="Coburger Fuchs"> Coburger Fuchs </div>
<div id="rasse3" class='rasse' style="top:10px; left:315px;">
<img border="0" src="images/Milchschaf_weiss.jpg" onclick="g=2;füllen()" width="128" height="80" alt="Milchschaf weiss"> Milchschaf weiss </div>
<div id="rasse4" class='rasse' style="top:10px; left:450px;">
<img border="0" src="images/Milchschaf_schwarz_2.jpg" onclick="g=3;füllen()" width="128" height="80" alt="Milchschaf schwarz"> Milchschaf schwarz </div>
</body>
</html>

Mit dem class-Attribut kann man Klassen zuweisen und mit dem . statt dem # kann man Klassen definieren!

PS : beim nächsten mal bitte ( CODE / HTML ) Kasten basteln
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben