[CSS] Design ohne Tabellen?

Rockhound

Lt. Commander Pro
Registriert
Jan. 2003
Beiträge
1.604
Hi Forumbasler,
der Trend geht ja schon lang zu Designs ohne Tabellen. Dem Trend möcht ich natürlich folgen und versuche mich derzeit, zum ersten mal, an dieser Seite: http://s144235413.online.de/www/
Wie das ganze aussehen sollte, sieht man anhand dieses Bildes: http://s144235413.online.de/www/layout.jpg

Ich habe mal bei der Page den CSS kram in der index.php gelassen damit ihr euch den Quelltext ansehen könnt.

Das Problem sieht man vllt schon deutlich.
Wieso macht er solch einen Abstand zwischen dem Foto und der Google Grafik?

Und was sagt ihr zu dem Aufbau der Seite. Mißbrauch ich die <div>-Tags zu sehr oder gibt es einen einfacherern Weg?

Danke im Voraus.
 
Das Problem sieht man vllt schon deutlich.
Wieso macht er solch einen Abstand zwischen dem Foto und der Google Grafik?

Bei mir sieht alles normal aus. Bei mir ist da irgendwo "solch ein Abstand".
Was für nen Browser benutzt du?

Oder willst du wissen, wie du es machst, dass zw. dem Bild und der Google Grafik ein größerer abstand entsteht?
 
Kann wie Computer Freak auch keinen Abstand zwischen Grafik und Seite erkennen. Aufbau mit den div-container ist soweit gelungen, wenn Du tatsächlich immer die kleinen Schriftzüge auf die Grafiken setzen musst, denn diese könnte man - wenn man schon eine ganze Grafik fertigt - eigentlich auch in die Grafik reinwursteln. ;)
 
Mit Firefox stimmt alles merk ich eben auch grad, aber beim IE6 & 7 ist dieser Abstand vorhanden.
 
hi,
also ich nehm ma an, dass des vom Box-Model-Bug des IE herrührt. Sicher bin ich mir da aber nicht, denn mir ist schön öfter aufgefallen, dass der IE einfach ma die DIVs beispielsweise anderst anordnet als Firefox oder Opera, der IE ist halt nicht so W3C konform, wie die anderen beiden. Die einzige Lösung die mir dazu einfällt ist ein extra für den IE angepasstes Stylesheet, welches eben auch nur der IE lesen kann, alle anderen bekommen das normale Stylesheet (Stichwort: Conditional Comments).

gruß
zuXXez
 
Zuletzt bearbeitet: (link angepasst)
Aso, jetzt sehe ich es auch. Setz mal nach dem Bild:

PHP:
<img src="pics/foto_platzhalter.jpg" />
Folgendes dahinter und führ mit dem normalen Code fort:

PHP:
<div style="height: 0; font-size: 0; overflow: hidden; clear: both;"></div>
 
nein, der IE7 hat den box model bug nicht mehr im standard modus. und da die website auch einen gültigen xhtml DOCTYPE hat, dürfte der IE auch nicht in den quirks modus schalten.

ich guck später ma, jetzt muss ich aber fernsehn^^
 
Der Abstand ist der vertikale Margin des form-Elements, er beträgt beim IE traditionell ca. 1,5em.

Davon abgesehen gehört zu einem funktionierenden CSS auch ein valider DOM-Baum: eine ID ist eineindeutig und darf nur ein einziges Mal im DOM-Baum vorkommen.

greetings, Keita
 
Rockhound schrieb:
Mißbrauch ich die <div>-Tags zu sehr [...] ?

JA!

Deine Seite leidet unter ersten Anzeichen sogenannter DIVitis und IDitis. DIVs sind nützlich und praktisch, manchmal aber auch irgendwie überflüssig. Das gleiche gilt für IDs.

Dein DIV #right beinhaltet eine H1 #header1. Die könntest du im Stylesheet aber genauso gut via "#right h1" ansprechen, ergo "alle H1, die sich in #right befinden". Und momentan sieht's nicht so aus, als würden da noch weitere H1 in den #right kommen - du sparst also die ID #header1.

Häufig wird die Grundstruktur einer Seite über die DIVs #wrapper (dein #main), #header und #content angelegt. Vielleicht noch eine #leftcol oder #rightcol, je nach Layout. Menüs werden, weil auch semantisch irgendwie angemessen, gerne als Listen angelegt. Bleibt das Menü innerhalb des #header, kann es via "#header ol" und "#header ol li" angesprochen werden - außerhalb des #headers wird der ol einfach die ID #menu verpasst; aber ohne nen extra DIV drumherum zu wickeln.

Im Grunde DIVs also nur dann einsetzen, wenn Inhalt grob sortiert werden soll und es nicht anders geht. Einer OL, die an sich ja schon ein Blockelement ist, kann man aber wunderbar die gleichen Styles überbraten, für die man bei einzelnen Links nen DIV benötigen würde. Guck dir die Seite einfach mal ohne Styles an - die Navigation sieht als Liste einfach übersichtlicher aus als ein Haufen Links hintereinander. Bei 5 Links geht das noch, bei größeren Seitenstrukturen blickt man da schnell nicht mehr durch.

Gut Ding will Weile haben und am Anfang isses echt frustrierend, weil ungewohnt ;)
Viel Erfolg!
 
@KonKorT: Klappt leider nicht mit deinem Code den du gepostet hast. Sieht genau gleich aus.
@kiro: danke für die Tipps: Hab das eine oder andere umsetzen können.
@Keita: Auch ohne <form> macht er mir ein kleinen Abstand rein.

Aber das Problem bleibt beim IE7 & 6 weiterhin vorhanden. Hat denn keiner eine Idee? Weil wenns garnicht möglich sein sollte seh ich irgendwie mehr Sinn darin die Struktur mit Tabellen zu machen.
 
Zuletzt bearbeitet:
Der minimale Abstand zwischen den Grafiken rührt daher, daß auf ein Inline-Element ein Block-Element folgt, der Abstand ist die Unterlänge der aktuellen Schriftgröße. Wenn du das Inline-Element mit einem br-Element abschließt oder das Inline-Element in ein Block-Element packst, ist der Abstand verschwundibus.

greetings, Keita
 
Zurück
Oben