• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

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