4. [CSS] body-tag überladen

[CSS] body-tag überladen

  • N

    Um welches (X)HTML geht es hier überhaupt? <h1> ist eines der wichtigsten Elemente einer Seite und in XHTML darf der body-Bereich nicht direkt Text enthalten.

    Zeig doch mal ein Beispiel deines Problems. font-size und font-weight auf das body-Element müsste eigentlich problemlos funktionieren, wenn du dir nicht selbst ein Bein gestellt hast 😉

    0
  • M

    Es geht um HTML.

    Der Code mag zugegebenermaßen etwas unübersichtlich sein.

    CSS:

    body
{
	font-family: "Trebuchet MS", "Arial";
	margin-top:30px;	
	margin-left:30px;
	line-height:normal;
	font-size:10pt;
	font-weight:normal;
	line-height:1.5;
}

marquee
{
	font-family: "Times New Roman";
	font-size:30pt;
}

    HTML:

    <html>
	<head>
		<title>Willkommen zur Homepage...</title>
		<LINK href="style_v2.css" type="text/css" rel="stylesheet"></LINK>
	</head>
	<body>
		<table ID="Table1">
			<tr height="150">
				<th width="150" bgColor="#AAFF33">
				</th>
				<th width="1">
				</th>
				<th width="750" colSpan="2">
					<marquee behavior="slide">&nbsp;blabla</marquee></th>
				</tr>
			<tr height="1">
				<th width="150"></th>
				<th width="1"></th>
				<th width="750" colSpan="2"></th>
			</tr>
			<tr height="20">
				<th align="left" width="150" bgColor="#AAFF33"><b>&nbsp;Home</b></th>
				<th width="1"></th>
				<th width="750" bgColor="#AAFF33" colSpan="2"></th>
			</tr>
			<tr height="1">
				<th width="150"></th>
				<th width="1"></th>
				<th width="750" colSpan="2"></th>
			</tr>
			<tr vAlign="top" height="400">
				<th align="left" width="150" bgColor="#AAFF33">
					&nbsp;Home
					<br>&nbsp;<a href="#forum">Forum</a> 
					<br>&nbsp;<a href="#gästebuch">Gästebuch</a>
					<br>&nbsp;<a href="#kalender">Kalender</a>						
					<br>&nbsp;<a href="#links">Links</a>
					<br><br>&nbsp;<b>Login:</b><br>&nbsp;Name:<br>&nbsp;<input type="text" size="15" ID="Text1" NAME="Text1">
					<br>&nbsp;Passwort:<br>&nbsp;<input type="password" size="15" ID="Password1" NAME="Password1">
					<br>&nbsp;<input type="submit" value="Anmelden" ID="Submit1" NAME="Submit1">
					<br><br>&nbsp;<a href="#login">Registrieren</a>
					<br>&nbsp;<a href="#login">Passwort vergessen</a>
				</th>
				<th width="1">
				</th>
				<th align="left" width="750">
					<h1>Herzlich Willkommen,</h1>
					blubb
				</th>
			</tr>
			<tr height="1">
				<th width="150"></th>
				<th width="1"></th>
				<th width="750" colSpan="2"></th>
			</tr>
			<tr height="20">
				<th align="left" width="150" bgColor="#AAFF33">
					<A style="TEXT-DECORATION: none" href="#hinweis"><font color="#000000"><b>&nbsp;Version: 1.0.0</b></font></A>
				</th>
				<th width="1">
				</th>
				<th width="750" bgColor="#AAFF33" colSpan="2"><p align="right"><a href="#hinweis">Rechtlicher Hinweis</a>&nbsp;</p>
				</th>
			</tr>
			<tr height="1">
				<th width="150"></th>
				<th width="1"></th>
				<th width="750" colSpan="2"></th>
			</tr>
			<tr height="125">
				<th width="150" bgColor="#AAFF33"></th>
				<th width="1"></th>
				<th width="750" colSpan="2">
					<br>Die letzte Aktualisierung der Homepage erfolgte am <b>Donnerstag, dem 6. Juli 2006</b>
					<br>im <A href="\1:blank"><i>passwortgeschützten Bereich</i></A>.
					<br><br>Fehler, Kritik, Anregungen bitte im <a href="#forum">Forum</a> 
					angeben oder eine E-Mail schreiben! 
					<br><br>Besucherzähler<br>
				</th>
			</tr>
		</table>
	</body>
</html>

    Nochmalige Problembeschreibung: Trotz der Angaben im Stylesheet werden manche Eigenschaften nicht wie gewünscht ausgeführt.

    Mr. B

    0
  • C

    @Mr. B: Wenn ich mich recht erinnere (ist allerdings schon ewig her...) interpretiert der IE font-size im body-tag nicht korrekt.
    Warum willst du den Text denn nicht in <div></div> oder <p></p> packen? Ist imho sowieso die schönere Lösung!

    Gruß, Caipi

    0
  • M

    Caipi schrieb:

    @Mr. B: Wenn ich mich recht erinnere (ist allerdings schon ewig her...) interpretiert der IE font-size im body-tag nicht korrekt.

    Bei Firefox klappts auch nicht (und andere Browser benutze ich nicht).

    Jemand noch ne Idee??

    Mr. B

    0
  • M

    Die CSS-Eigenschaften werden ja an die Kind-Elemente weitergegeben, wenn dort nichts anderes definiert ist. Allerdings funktioniert das bei Tabellen wohl nicht. Wenn Du den Text also in divs packst und nicht in Tabellen, dann sollte alles tutti sein.

    0
  • M

    Gibts denn keinen Befehl / Tag, der sich über diese Kind-Sache da hinwegsetzt? Ich habe von !important gelesen, aber das klappt bei mir auch nicht...

    Außerdem kann deine Theorie auch nicht ganz stimmen, denn wieso sollten manche Eigenschaften weitergegeben werden und manche gerade nicht (Schriftart klappt, aber Schriftdicke nicht)?

    Mr. B

    0
  • M

    OK, ich hab' jetzt mal ein wenig getestet. Dass der manche Eigenschaften nicht weiterreicht an die Kind-Elemente liegt wohl an dem fehlendem DocType. Wenn ich bei Deinem Beispiel einfach mal den Kopf so abändere:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

    dann wird die Schriftgröße korrekt weitervererbt.

    Dass font-weight:normal bei Dir nichts bringt hängt damit zusammen, dass Du alles in th-Tags geschrieben hast und nicht td-Tags verwendest. th ist per default glaube ich immer fett, zumindest ist es bei mir so. Wenn ich aus den th-Tags einfache td-Tags mache, dann wird alles korrekt weiter-vererbt.

    Also, merken: Immer korrekten DocType verwenden und immer die richtigen HTML-Elemente. 🙂

    PS: Ich habe nur zu Testzwecken den XHTML1.1-DocType genommen, mir ist bewusst, dass Dein Beispiel-Code kein XHTML ist, aber evtl. überarbeitest Du ihn auch noch dahingehend. 🙂

    0
  • M

    Sehr vielen Dank, mantiz! Das mit dem <th>-Tag ist mir nie aufgefallen. 🕶

    Noch eine Frage: Was sind die Vorteile von XHTML im Vergleich zu HTML?

    Ich fühl mich grad ein bisschen so, wie als wenn ich hinterm Mond lebte, weil ich gerade gelesen habe, das XHTML eine Weiterentwicklung von HTML ist. Und ich dachte immer, das wäre eine von vielen anderen "Sprachen" die mit X anfangen (XML, XSL, XPath etc.), die mir ein Mysterium sind... 😉

    Mr. B

    0
  • M

    So lange beschäftige ich mich noch nicht mit den Standards, daher alle Angaben ohne Gewähr. 🙂

    Soweit ich weiß ist XHTML einfach nur die Weiterentwicklung von HTML. Bei XHTML sind einige Tags als deprecated gekennzeichnet, sprich sie sollten nicht mehr verwendet werden, die es im HTML 4.01 Standard noch gibt, z.B. <center></center>.

    XHTML wurde soweit ich weiß speziell für den Einsatz in Verbindung mit CSS (weiter)entwickelt und es sind eigentlich nur Elemente zur logische Textstrukturierung enthalten und keine mehr zur Darstellung, wie z.b. center, was alles per CSS gemacht werden soll.

    Allerdings kann ich mich auch irren.

    0
  • M

    mantiz schrieb:

    Soweit ich weiß ist XHTML einfach nur die Weiterentwicklung von HTML. Bei XHTML sind einige Tags als deprecated gekennzeichnet, sprich sie sollten nicht mehr verwendet werden, die es im HTML 4.01 Standard noch gibt, z.B. <center></center>.

    XHTML wurde soweit ich weiß speziell für den Einsatz in Verbindung mit CSS (weiter)entwickelt und es sind eigentlich nur Elemente zur logische Textstrukturierung enthalten und keine mehr zur Darstellung, wie z.b. center, was alles per CSS gemacht werden soll.

    Wo sind jetzt genau die Vorteile? Ich sehe da keine... ^^

    Mr. B

    0
  • M

    Ich habe hier einen netten Artikel darüber gefunden.

    Neuerungen und Vorteile von XHTML

    Ein großes Ärgernis ist heutzutage, dass ein Grossteil der Internetseiten im Web sehr schlechtes Markup enthält, so dass viele Seiten nur schlecht oder gar nicht angezeigt werden können. Die Verwendung von XHTML führt hingegen zwangsläufig zu wohlgeformten Dokumenten, da er als eine XML-Anwendung definiert ist und in XML alles fehlerfrei ausgezeichnet werden muss. Wenn als application/xhtml+xml und nicht text/html ausgeliefert wurde, werden Browser, die in der Lage sind XHTML-Dokumente darzustellen, anstatt die fehlerhafte Seite zu interpretieren einfach eine Fehlermeldung ausgeben. Da einige Browser, wie z.B. der IE, XHTML+XML Appplikationen leider nicht interpretieren können, kann man entweder dynamisch durch Browsererkennung der passende MIME Type wählen oder noch aus Kompatibilitätsgründen als Text/HTML ausliefern.

    Was habe ich als Surfer für einen Vorteil, wenn die HTML-Seite schlampig gecodet ist? Solange ich als Otto-Normal-Surfer nur die vordere Seite der Seite sehe, sprich das Endprodukt, dann interessiert mich es doch gar nicht, ob der Code schlecht oder schlampig gecodet wird. Was ist das also für ein Vorteil?

    Mir scheint, wenn man sich die anderen Vorteile auf der Seite durchliest, als hätte man noch nicht allzu viel von XHTML 1.1.

    Ich bin aber mal gespannt, was XHTML 2.0 bringen wird, wenn es "fertig" entwickelt ist.

    Mr. B

    0
  • M

    Ein Vorteil wäre evtl. noch, dass sich "XHTML 1.1" bzw. "XHTML 1.0 Strict" besser anhört als "HTML 4.01 Transitional". Es ist einfach cooler. 🕶

    Nee, Spass beiseite. Das Problem ist, dass sich die Leute wenig Gedanken um den Aufbau einer Seite machen. Wenn jmd. den ein oder anderen Text zentriert haben will, dann schreibt er diesen in ein center-Tag. Oder wenn er einen bestimmten Bereich in einer Farbe haben will, dann nutzt er bgcolor. All dies hat aber mit dem Inhalt überhaupt nichts zu tun. (X)HTML sollte nur dafür verwendet werden den Text logisch auszuzeichnen, Sprich Überschriften definieren, Absätze, Hervorhebungen (aber nur, dass etwas hervorgehoben werden soll, nicht wie). Dann per CSS soll dieses Dokument gestyled werden.

    Eine Seite, die dies imho vorbildlich umsetzt ist: http://www.e-workers.de. Dort wird zwar noch HTML 4.01 verwendet, allerdings strict und nicht transitional.

    Und wenn Du kein XHTML verwenden möchtest, dann nimm "HTML 4.01 strict". 😃

    0
  • M

    Und was hat man davon, wenn man in (X)HTML Inhalt und Aussehen voneinander in zwei Dateien trennt? Dann kann man doch gleich XML und XSL / CSS benutzen. Was ist der Zweck der ganzen Sache?

    Mr. B

    0
  • M

    Naja, XHTML kann eigentlich problemlos von älteren Browsern dargestellt werden, soweit ich weiß. Für XML/XSL muss der Browser schon XML-fähig sein, was die aktuellen zwar sind, aber ältere nicht unbedingt, da bekommt man dann ein Problem.

    Und bei XML/XSL werden die Daten evtl. logisch im XML-Dokument angeordnet, aber die Darstellung erfolgt dann doch wieder per (X)HTML(XSL).

    XHTML+CSS ist einfach irgendwo zwischen dem alten HTML(+CSS) und dem "neuen" XML+XSL+CSS, wobei die Daten nicht von der Dokumenten-Stuktur getrennt sind.

    Egal, wenn Du keinen Vorteil siehst, dann nimm halt HTML 4.01, oder evtl. älter, aber dann bitte valid. 😃

    0
  • M

    mantiz schrieb:

    Egal, wenn Du keinen Vorteil siehst, dann nimm halt HTML 4.01, oder evtl. älter, aber dann bitte valid. 😃

    Na, die Sache ist nur die, dass ich gerne verstehen möchte, warum die W3C Geld für solche Projekte raushaut!?

    Mr. B

    0
  • M

    Lies Dir mal bei wikipedia den Artikel über xhtml durch: link.
    Evtl. auch über xsl und xslt. Evtl. wird es so etwas klarer.

    0
  • M

    Danke, hatte ich auch schon vorher.

    Noch eine Frage: Ich habe in der CSS-Datei bestimmte Eigenschaften für <td> festgelegt. Ein <td> soll alle vorgegebenen Eigenschaften haben außer die der Textausrichtung. Der Inhalt soll nämlich links in der Mitte angezeigt werden.

    Wie bewerkstellige ich das (ohne das Attribut class zu benutzen)? Anscheinend beachten die Browser es nicht, wenn ich in der HTML-Datei bei dem Tag einen anderen Wert bei der Eigenschaft schreibe... wenn es doch nur eine Prioritätenliste gäbe!... erst würden die Vorgaben des Browsers gelten, dann die der CSS und zum Schluss mit höchster Priorität die Vorgaben, die in der HTML selbst drinstehen... das wär doch schön 😉

    Mr. B

    0
  • M

    Doch, das geht. Du musst Dir einfach nur merken, dass das letzte, was gesetzt wird gilt, dann kannst Du das folgendermaßen machen:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
	<head>
		<title>CSS-Test</title>

		<link rel="stylesheet" type="text/css" href="styles.css" media="screen" title="Style 01" />
		<style type="text/css">
			table {
				width:  50%;
				border: none;
			}
			td {
				height:         50px;
				border:         1px dashed #F00;
				text-align:     left;
				vertical-align: center;
			}
		</style>

	</head>

	<body>

		<table>
			<tr>
				<td>Spalte 01</td>
				<td style="text-align:right;">Spalte 02</td>
			</tr>
		</table>

	</body>
</html>

    styles.css

    table {
	width:  100%;
	border: 1px solid #000;
}

td {
	text-align: center;
	border:     1px solid #000;
}

    Nun werden als allererstes die Style-Angaben aus der Datei 'styles.css' verwendet. Im Dokument kannst Du nun zwischen <style> und </style> Eigenschaften überschreiben. Und im Einzelfall kannst Du im style-Attribut eines Tags Eigenschaften überschreiben, die dann nur für dieses Tag gelten.

    0
  • M

    Danke schön, es klappt!

    Woher weißt du das alles? Machst du das beruflich?

    Mr. B

    0
  • M

    Ja, das auch, hab' mir aber alles privat beigebracht. Ich finde es einfach schön, was man mit CSS alles machen kann, daher habe ich mich ne Zeit lang mal relativ intensiv damit befasst. 😃

    0
Anmelden zum Antworten