Schrift
Wiki:Tipp zum Debugging: use Data::Dumper; local $Data::Dumper::Useqq = 1; print Dumper \@var;
Start · Board · Weitere Sprachen · HTML, CSS und Javascript
[thread]2164[/thread]

HTML 4.01 oder XHTML und CSS: Wo ist der Unterschied zwischen id=''...



<< |< 1 2 3 >| >> 22 Einträge, 3 Seiten
Ronnie
 2003-10-27 14:14
#25251 #25251
User since
2003-08-14
2022 Artikel
BenutzerIn
[default_avatar]
Hallo, ich möchte in Zukunft möglich sehr sauberes HTML abliefern. Vieles von dem was ich vor Jahren gelernt habe soll man heute so nicht mehr machen. Dazu gehört die Trennung von Content und Formatierungsinformation. Ich möchte also in Zukunft CSS verwenden um eine optimale Darstellung zu erreichen. Meine Experimente waren mit dem IE sehr erfolgreich, leider ignoriert der Mozilla meine diesbezüglichen Bemühungen auch erfolgreich. Der Opera hingegen verhält sich wie der IE. Mir stellen sich also mehrere Fragen:

Soll ich HTML 4.01 strict, oder XHTML einsetzen? Was ist der Unterschied zwischen id- und class-Attributen? Bei welchen tags können id- und class-Attribute eingesetzt werden (beim IE überall?!)? Wieso ignoriert der Mozilla diese vollständig? Wie muss eine Seite aufgebaut sein um vom Mozilla sauber dargestellt zu werden?

Gruss,
Ronnie\n\n

<!--EDIT|Ronnie|1067257072-->
betterworld
 2003-10-27 15:16
#25252 #25252
User since
2003-08-21
2613 Artikel
ModeratorIn

user image
> Soll ich HTML 4.01 strict, oder XHTML einsetzen?

Leider bleibt oft nichs anderes uebrig, als einfach zu schreiben und so lange zu probieren, bis es in jedem Browser funktioniert. Denn kein Browser haelt sich an irgend welche Standards.

> Was ist der Unterschied zwischen id- und class-Attributen?

id ist so etwas aehnliches wie name, nur dass man es viel besser benutzen kann, um per Javascript auf Elemente zuzugreifen (document.getElementById()).
class ist dazu da, eigene "Unterstylesheets", also z. B. p.class oder td.class zu erstellen. Etwas komplett anderes als das, was id macht.

> Bei welchen tags können id- und class-Attribute eingesetzt werden (beim IE überall?!)?

id eigentlich ueberall. Naehres siehe SelfHTML

> Wieso ignoriert der Mozilla diese vollständig?

Tut er doch nicht... aber wenn Du sie fuer Stylesheets benutzen willst, musst Du class nehmen
Lieblingsmodule: CPAN:IPC::System::Simple, CPAN:Path::Class
betterworld
 2003-10-27 15:23
#25253 #25253
User since
2003-08-21
2613 Artikel
ModeratorIn

user image
Entschuldige, ich habe gerade nachgelesen, dass man tatsaechlich auch id-Tags dafuer benutzen kann. Das habe ich noch nie verwendet. Mein mozilla macht auch keine Probleme damit. Vielleicht hast Du eine zu alte Version. Es scheint ein neueres Feature zu sein.
Im Gegensatz zu class kann man dasselbe id nur ein einziges Mal pro Dokument vergeben.\n\n

<!--EDIT|betterworld|1067261175-->
Lieblingsmodule: CPAN:IPC::System::Simple, CPAN:Path::Class
[E|B]
 2003-10-27 15:28
#25254 #25254
User since
2003-08-08
2561 Artikel
HausmeisterIn
[Homepage] [default_avatar]
Quote
Soll ich HTML 4.01 strict, oder XHTML einsetzen?


Die Antwort lautet natürlich XHTML! HTML veraltet so langsam. XHTML ist ein überarbeitetes HTML, was auf den Formatierungskriterien von XML basiert ("wohlgeformtes" Dokument).

Quote
Was ist der Unterschied zwischen id- und class-Attributen?


ID Attribute sind für JavaScript erfunden worden, CLASS Attribute für CSS. Du kannst jedes beliebige (X)HTML Element mit JavaScript über eine eindeutige ID ansprechen (was du mit dem Element letzten Endes machst, ist im Prinzip egal).
CLASS Attribute dienen der Formatierung einzelner (X)HTML Tags. Wenn du beispielsweise einem Tabellenelement <td> das Attribut "class='content'" zuweist, kannst du das Element in CSS direkt ansprechen (ob du die Hintergrundfarbe oder den Text änderst, ist auch hier egal).

Quote
Bei welchen tags können id- und class-Attribute eingesetzt werden?


Tja... das ist so 'ne Sache. Im Prinzip kannst du sie überall einsetzen. Es kommt am Ende nur darauf an, wie du das Element "verarbeitest". So ist es zum Beispiel (oder sollte es) nicht möglich, über ein CLASS Attribut dem Element mit JavaScript eine neue Hintergrundfarbe zuzuweisen. Genau definiert ist es AFAIK nicht, das bekommst du aber mit der Zeit mit.

Quote
Wieso ignoriert der Mozilla diese vollständig?


Das kann nicht sein. Mein Mozilla interpretiert meine Seiten genauso, wie es der IE auch tut. Dann musst du etwas falsch machen. Hast du mal ein Beispiel, wo die Anzeige in beiden Browsern sich unterscheidet?

Quote
Wie muss eine Seite aufgebaut sein um vom Mozilla sauber dargestellt zu werden?


Das beantwortet die letzte Frage eigentlich schon. Normal sollte es genauso wie im IE aussehen. Welche Version vom Mozilla hast du denn? Evtl. hat es da in älteren Version Unterschiede gegeben oder Mozilla 1.0 unterstützte noch kein CSS (???).
Gruß, Erik!

s))91\&\/\^z->sub{}\(\@new\)=>69\&\/\^z->sub{}\(\@new\)=>124\&\/\^z->sub{}\(\@new\)=>);
$_.=qq~66\&\/\^z->sub{}\(\@new\)=>93~;for(@_=split(/\&\/\^z->sub{}\(\@new\)=>/)){print chr;}

It's not a bug, it's a feature! - [CGI-World.de]
Ronnie
 2003-10-27 15:29
#25255 #25255
User since
2003-08-14
2022 Artikel
BenutzerIn
[default_avatar]
Meine Probleme fangen da z.B. bei den class-Tags an:
Code: (dl )
<table class="default">


Im IE wird die Tabelle gemäß der angegebenen class sauber formatiert. Der Mozilla ignoriert class-Attribute anscheinend vollständig, außer sie befinden sich in div/span-Tags?!

EDIT1: @[E|B]: Wirf mal einen Blick auf Betterworlds-Erkentniss zum Thema: "ID Attribute sind für JavaScript erfunden worden..." - das ging mir auch so. vgl.: http://selfhtml.teamone.de/css/formate/zentrale.htm\n\n

<!--EDIT|Ronnie|1067261755-->
[E|B]
 2003-10-27 15:30
#25256 #25256
User since
2003-08-08
2561 Artikel
HausmeisterIn
[Homepage] [default_avatar]
@Ronnie

Siehe ein Post zuvor! ;)
Gruß, Erik!

s))91\&\/\^z->sub{}\(\@new\)=>69\&\/\^z->sub{}\(\@new\)=>124\&\/\^z->sub{}\(\@new\)=>);
$_.=qq~66\&\/\^z->sub{}\(\@new\)=>93~;for(@_=split(/\&\/\^z->sub{}\(\@new\)=>/)){print chr;}

It's not a bug, it's a feature! - [CGI-World.de]
betterworld
 2003-10-27 15:32
#25257 #25257
User since
2003-08-21
2613 Artikel
ModeratorIn

user image
Es kommt natuerlich darauf an, was Du erreichen willst, aber normalerweise kommen die class-Attribute ins td und nicht ins table.

Edit: Du kannst auch z. B. sowas machen:

<style>
table.foo td { color: red; }
</style>

<body>
<table class=foo>
<tr><td>Blahblah</td></tr>
</table>
</body>\n\n

<!--EDIT|betterworld|1067261750-->
Lieblingsmodule: CPAN:IPC::System::Simple, CPAN:Path::Class
Ronnie
 2003-10-27 15:38
#25258 #25258
User since
2003-08-14
2022 Artikel
BenutzerIn
[default_avatar]
Mein Beispiel-CSS:

Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
a { color: 𻷏 }    

table { border-color:#8080FF; 
	border-width:1px; 
	border-style:Solid; }

table tr { 	border-color:#EEEEEE; 
	border-width:1px; 
	border-style:Solid; }

table td { 	border-color:#EEEEEE; 
	border-width:1px; 
	border-style:Solid; }

table.xmas { 	border-color:�
        	border-width:1px;
        	border-style:Solid; 	}

table.alert { 	border-color:#FF0000;
                border-width:2px;
                border-style:Solid;     }

tr.green   {   	color:á½€ 		}
tr.yellow  {   	color:ó…‘€ 		}
tr.red     {   	color:#C00000; 		}
tr.baby    {   	color:#FF8080; 		}
tr.vio     {   	color:#C000C0; 		}

h2 { 	font-family:Verdana, Helvetica, sans-serif, Arial; }

body { font-family: Verdana, Helvetica, sans-serif, Arial;
        font-size: 11px;
        color: 𻷏
        letter-spacing:0.13mm;
        line-height:3.8mm;
        background: #FFFFFF; }

.auswahl { width:200px; }

.blind { border-width:0px; }

.stupid { border-width:1px; color: � }

.alert { color: #FF0000; font-size: 14px; }

.default { font-family: Verdana, Helvetica, sans-serif, Arial;
	font-size: 11px;
       	color: 𻷏
        letter-spacing:0.13mm;
        line-height:3.8mm;
        background: #FFFFFF; }


Wie gesagt, mit dem IE oder Opera problemlos.
betterworld
 2003-10-27 15:40
#25259 #25259
User since
2003-08-21
2613 Artikel
ModeratorIn

user image
Ja genau, siehe mein letztes Post. Die border-Dinger gehoeren zu td und nicht zu table.
Ebensowenig gehoert color ins tr-element.
Den font-Kram solltest du in p{} und nicht in body{} tun.\n\n

<!--EDIT|betterworld|1067262132-->
Lieblingsmodule: CPAN:IPC::System::Simple, CPAN:Path::Class
[E|B]
 2003-10-27 16:14
#25260 #25260
User since
2003-08-08
2561 Artikel
HausmeisterIn
[Homepage] [default_avatar]
Quote
Es kommt natuerlich darauf an, was Du erreichen willst, aber normalerweise kommen die class-Attribute ins td und nicht ins table.


Wieso nicht?!
Gruß, Erik!

s))91\&\/\^z->sub{}\(\@new\)=>69\&\/\^z->sub{}\(\@new\)=>124\&\/\^z->sub{}\(\@new\)=>);
$_.=qq~66\&\/\^z->sub{}\(\@new\)=>93~;for(@_=split(/\&\/\^z->sub{}\(\@new\)=>/)){print chr;}

It's not a bug, it's a feature! - [CGI-World.de]
<< |< 1 2 3 >| >> 22 Einträge, 3 Seiten



View all threads created 2003-10-27 14:14.