Chaos im CSS

html.de-Forum HTML, XHTML & CSS
1

Hallo,
bei mir ist das Chaos ausgebrochen. Schaut euch mal meinen Code an.
Es soll alles untereinander und richtig nebeneinader stehen. Dazu soll
alles in Farbe sein. Nur irgendwie stehe ich mit CSS auf Kriegsfuss.
Es will einfach nicht. Könnt Ihr mir nicht helfen damit alles da steht wo
es stehen soll und alles richtig eingefärbt ist?
Ich weiss einfach nicht wo die Fehler liegen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
 
<head>
<title>Mein erstes Quanta Dokument</title>
<meta name="GENERATOR" content="Quanta Plus">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="StyleSheet" type="text/css" href="ExternesStyleSheet.css">
</head>
<body>
<table cellspacing="0" style="width:100%; table-layout:fixed; ">
 
 
<tr><th colspan="3" style="background-color : #0080c0;"><h1>Vom 20 bis 26 Oktober</th></tr></h1>
 
 
<tr>
<th scope="col"; style="background-color:#CCDAEA"><h2>L&ouml;WE 23.7. - 23.4.</h2>
 
 
<th scope="col" style="background-color:#CCDAEA" ><h2>WAAGE 24.9 - 23.10.</h2>
 
 
<th scope="col" style="background-color:#CCDAEA"><h2>Sch&uuml;tze 23.11. - 21.12.</h2>
</tr></th></th></th>
 
 
<tr>
<td style="width:15%; overflow:hidden">
<h3 style="background-color : #0080c0;">Beruf und Geld</h3><br>
<h4 style="background-color : #ccdaea;">
Bei Ihnen sitzt der Euro einfach zu locker,<br>
übertreiben Sie Ihre Einkäufe nicht.</h4><br>
<h3 style="background-color : #0080c0;">Liebe</h3> <br>
<h4 style="background-color : #ccdaea;">
Seit Tagen hindert Sie der Stolz an <br>
einer Versohnung. Geben Sie sich<br>
gleich heute einen Ruck, damit <br>
Vesöhnung einkehrt.</h4><br>
<h3 style="background-color : #0080c0;">Gesundheit</h3> <br>
<h4 style="background-color : #ccdaea;">
Der Urlaub hat Ihnen gut getan.<br>
Bemerkenswert, wie fit Sie über die <br>
Runden kommen.</h4><br>
<h3 style="background-color : #0080c0;">Beste Tag der Woche</h3> <br>
<h4 style="background-color : #ccdaea;">Dienstag</h4>
</td>
 
 
<td align="left" valign="top" style="width:15%; overflow:hidden">
<h3 style="background-color : #0080c0;">Beruf und Geld</h3> <br>
<h4 style="background-color : #ccdaea;">
Riskieren Sie nichts, was Sie später <br>
bereuen.</h4><br>
<h3 style="background-color : #0080c0;">Liebe</h3> <br>
<h4 style="background-color : #ccdaea;">
Schluss mit dem Single Leben! Die <br>
Chancen stehen gut.</h4><br>
<h3 style="background-color : #0080c0;" >Gesundheit</h3> <br>
<h4 style="background-color : #ccdaea;" >
Sie müssen seelischen Belastungen mit <br>
wirklich entspannendem Ausgleich <br>
rechtzeitig begegnen.</h4><br>
<h3 style="background-color : #0080c0;" >Bester Tag der Woche</h3><br>
<h4 style="background-color : #ccdaea;" >Samstag.</h4>
 
 
</td>
 
 
<td align="left" valign="top" style="width:15%; overflow:hidden">
<h3 style="background-color : #0080c0;" >Beruf und Geld </h3><br>
<h4 style="background-color : #ccdaea;">
Im Job können Sie sich gut behaupten.</h4><br>
<h3 style="background-color : #0080c0;">Liebe</h3> <br>
<h4 style="background-color : #ccdaea;">
Sie sollten sich nicht in Ihr Schneckenhaus <br>
zurückziehen. Sprechen Sie am <br>
Donnerstag über Ihre Sorgen, dann wird's <br>
auch wieder harmonisch-</h4><br>
<h3 style="background-color : #0080c0;">Gesundheit</h3> <br>
<h4 style="background-color : #ccdaea;">
Sie kommen nicht darum herum, sich in <br>
dieser Woche mehr um Ihre Konditionen zu<br>
kümmern. Das ist die Grundlage für <br>
Wohlbefinden.</h4><br>
<h3 style="background-color : #0080c0;">Bester Tag der Woche</h3> <br>
<h4 style="background-color : #ccdaea;">Dienstag</h4>
 
 
</td>
</tr>
</table>
</body>
</html>

MfG
Feld

2

bei mir ist das Chaos ausgebrochen

Allerdings!
Aber hab keine Hoffnung, dass ich da aufräume. Nur mal ein paar Tipps:

Wenn du schon eine CSS-Datei verwendest (deren Code wir nicht kennen), dann solltest du auch möglichst alle Styleangaben da reinschreiben. Z.B. was Überschriften- oder Hintergrundformatierung betrifft.

Das Chaos scheint mir aber eher durch deinen unübersichtlichen Tabellencode zumindest mitverursacht.
Wenn du Tabellen nicht zwingend für eine tabellarische Darstellung brauchst, dann weg damit. Sollte für reine Layoutzwecke nicht mehr verwendet werden.
Dann bau alles neu mit Div’s auf und überlege dir wo die hinsollen und wie sie formatiert werden sollen.

3

Aber bevor Du Ordnung im CSS schaffst, musst Du Ordnung im HTML schaffen, denn da ist auch das Chaos ausgebrochen. Und nicht nur mit CSS stehst Du auf Kriegsfuß. Allerding, wenn ich CSS wäre, und Du mir mit so einem HTML-Code ankämst, würde ich auch auf Kriegsfuß mit Dir stehen.
Der Validator meldet immerhin noch 6 Fehler, die aber dafür essenziell sind.

Und auch ich bin der Meinung, dass das nciht wirklich nach tabellarischen Daten aussieht, also gibts keinen Grund für die Tabelle, die ja ohnehin für eigentlich alle Validierungsfehler sorgt.

Trennung von Inhalt und Layout sorgt für mehr Ordnung im Code. Inhalt und Auszeichnung, reines HTML in die HTML-Datei. Layout und Design, alles CSS, in ein externes Stylesheet. Dann verlierst Du nicht den Überblick und musst nicht die selbe Definition an 1000 Stellen machen. Erleichtert auch die Wartung der Seite.

Gruß,
-Efchen

4

Hallo,
vielen Dank für eure Hilfe.
Wie soll das funktionieren ohne Tabellen?

MfG
Feld

5

Wie darf ich die Frage verstehen?

HTML ist eine Strukturbeschreibungssprache. Mit HTML legt man fest, was der Inhalt bedeutet. Es gibt etliche Tags, die genau aussagen, um was für einen Inhalt es sich handelt. Überschriften werden mit

bis

ausgezeichnet, Adressen mit , Textabsätze mit

. Wichtige Textpassagen mit , sehr wichtige mit . Dergleichen gibt es viele Elemente und für jeden Inhalt gibt es ein Tag, das ihn am besten beschreibt. Eine Übersicht über eine Fußball-Liga z.B. wird als Tabelle ausgezeichnet, weil es sich um tabellarische Daten handelt.

Das ist immer der erste Schritt bei einer Web-Seite. Mit der semantisch und syntaktisch korrekten Basis aus HTML kann man sich dann ans Layout/Design per CSS machen.

6

Da gibt es viele Möglichkeiten.
Z.B. mit solchen News-Boxen Newsbox, Infobox, Teaser
untergebracht in einem dreispaltigen Layout Dreispaltiges Layout, zentriert mit fixen Breiten

Vor allem definierst du dabei die ganzen Überschriften und Texte nur einmal in der CSS-Datei. Allein das bringt dir bereits ne Menge Code-Ersparnis und folglich auch mehr Übersicht.

7

Wichtig ist aber vor allem, dass man bei CSS-Design nicht den Fehler macht und versucht, jede Tabellenzelle aus dem vorherigen Tabellenlayout irgendwie gesondert darzustellen, womöglich mit dem Tag

, das dazu nicht gedacht ist. Auch wenn oft die angebliche Methode „Layout mit
“ kursiert, ist sie dennoch genauso falsch wie Layout mit Tabellen.

8

Hallo,
Ahha… jetzt geht mir ein Lichtlein auf was ihr meint.:slight_smile:
Vielen Dank für eure Hilfe.

MfG
Feld

9

Würde mich freuen, wenn es so wäre :slight_smile:
Leider tun sich die meisten Leute schwerer damit, zu verstehen, wozu HTML gedacht ist, als am Ende mit CSS.

Aber ich nehme an, wir hören wieder von Dir :slight_smile: