HTML Layout ohne Tabelle

Bates83

Commander
Registriert
Dez. 2001
Beiträge
2.079
Hallo,

es geht um meine Seite www.unibeam.de. Um die Bilder in einem Raster darzustellen habe ich sie in eine 4x3 Tabelle gebettet, das funktioniert auch ohne Probleme. Allerdings würde ich gerne auf ein tabellenbasiertes Layout verzichten. Wie lässt sich ein solches x * y Design ohne <table> ausrichten?
 
Mal ganz billig gemacht. So müsste der Tag aussehen.
Code:
<a href="[URL]http://www.amazon.de"><img[/URL] src="[URL]http://www.unibeam.de/bilder/start/amazon1.png"></a[/URL]>
Man fügt 4 Seiten hintereinander an. Bei der letzten Seite wird dann <br> drangehängt. Dadurch wird ein Break / Zeilenumbruch ausgeführt (siehe Anhang).
 

Anhänge

Zuletzt bearbeitet:
Bei ryan_blackdrago kann ich die Abstände für <a> dann über das Stylesheet bestimmen?! Vor einiger Zeit habe ich schonmal versucht mit div ein Raster zu erstellen, bin aber daran verzweifelt. Mal gucken ob ich eine gute Anleitung finde.
 
<div style="position: absolute; top: xypx; left: xypx;"><img src="xy"></div>

wäre auch eine Möglichkeit die Dinger absolut zu positionieren, ich weiß allerdings nicht als wie sauber das gilt.
 
Zuletzt bearbeitet:
DIVs als Tabellenersatz ist so ne Sache. Prinzipiell gilt, dass Tabellen zu Layoutzwecken unsauber sind - wenn eine Tabelle aber das einfachere von zwei Mitteln ist, sollte man pragmatisch sein und sie trotzdem nehmen. Das gilt auch für Deinen Fall. Da reicht die Tabelle im Markup, da brauchts kein zusätzliches CSS zu ihrer Formatierung. Mit DIVs brauchst Du beides. Und bei DIVs hast Du das Problem, dass es schwierig wird, ihre Höhen innerhalb einer Zeile aneinander anzupassen, sobald diese nicht mehr statisch sondern dynamisch sein sollen...

Fazit: in Deinem Fall kannst die Tabelle drin lassen. Wenn Du das nicht willst, dann realisier die Zellen als DIVs, die Du in einem übergeordneten DIV das die Tabellenbreite festlegt mittels "flow: left;" fließend aneinanderreihst. Das bedeutet aber auch, dass Du nach diesen das Flow wieder aufheben musst, indem Du dem nachfolgenden Element "clear: both;" gibst.

PS: absolute Positionierung würde ich übrigens vermeiden wo es nur geht, weil ich das immer als fürchterlich unflexibel erlebt hab.


EIDT: das nur noch als prinzipielle Anmerkung. Diese Bewertungen sauber/unsauber leiten sich ja vom Ideal einer sauberen Trennung zwischen Inhalt und Form ab. In Deinem Fall wär die Tabelle aber wohl auch aus Sicht eines Hardcore-Idealisten vertretbar. Denn sie tut genau das was sie soll, nämlich Inhalte in tabellarischer Form aufzubereiten.
 
Zuletzt bearbeitet:
Danke, ich arbeite gerade mit DIV und absoluten Positionen, es ist aber viel Feinarbeit bis es wenigstens halb so gut aussieht wie vorher^^

Ich habe dieses Grid als Vorlage verwendet, das Layout ist jetzt fix, ich starte noch mein Netbook und gucke mir das ganze auf 1024x600 an. Zum angucken des überarbeiteten Layouts müsst ihr die Ansicht aktualisieren.
 
Zuletzt bearbeitet:
Vermutlich wirst Du Dir so leichter tun.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Div-Table</title>

<style type="text/css">

/*<![CDATA[*/
body       {font-family:"courier new"}
div.x01    {display:table; border-collapse:collapse;}
div.x02    {display:table-row;}
div.x03    {display:table-cell; text-align:center; width:340px; 
            border:1px solid grey; padding:2px;}
/*]]>*/

</style>
</head>
<body>
<div class="x01">
<div class="x02">
<div class="x03">01</div>
<div class="x03">02</div>
<div class="x03">03</div>
<div class="x03">04</div>
</div>

<div class="x02">
<div class="x03">05</div>
<div class="x03">06</div>
<div class="x03">07</div>
<div class="x03">08</div>
</div>

<div class="x02">
<div class="x03">09</div>
<div class="x03">10</div>
<div class="x03">11</div>
<div class="x03">12</div>
</div>

</div>
</body>
</html>

GF
 
@Gordon Freeman:

Das halte ich für keine gute Idee. Einige noch relativ verbreitete Browser können das nicht. Der IE7 zum Beispiel nicht. Beim IE8 weiß ich das nicht.
 
Gordons Methode läuft nicht im IE, aber das Konzept ist interessant. Ich belasse es jetzt mit dem festen Layout und bearbeite noch die Abstände.
 
Versteh ich ehrlich gesagt nicht. Display-Eigenschaften beherrscht der IE ab Version 4 - und der Code hält nat. sowohl der SGML-Parser als auch der HTML-Tidy Prüfung zu 100% stand.

[Sieht auch in den verbreitetsten Browsern gleich aus - siehe Anhang]

Anhang anzeigen 191998

GF
 
Zuletzt bearbeitet:
Also erst einmal freue ich mich immer, wenn ein weiterer Hobbydesigner seinen Weg in die Webentwicklung findet und vor allem, wenn er auf tabellenlose Layout setzen möchte.

Was mir gar nicht gefällt, sind die Ratschläge, die hier gegeben werden: Statt einer Tabelle auf div-Elemente zurück zu greifen und mit denen die Tabellenzellen nachzuahmen ist völliger Unfug. Ein div-Element hat keine Bedeutung, es entsteht eine "div-Suppe".

Ich bin für folgendes Markup:

HTML:
<div class="gallery">
<ul>
<li><a href="#"><img alt="Bla" src="bla.jpg"></a></li>
<li><a href="#"><img alt="Bla" src="bla.jpg"></a></li>
<li><a href="#"><img alt="Bla" src="bla.jpg"></a></li>
usw.
</ul>
</div>

Das div-Element dient als Behälter für eine unsortierte Liste mit den Bildern.

Dazu dieses Stylesheet:

Code:
.gallery {
margin: auto; /* zentriert das Element, falls eine Breite (width) angegeben ist */
width: 600px; /* nach belieben ändern */
}
.gallery li {
display: inline; /* lässt die Listenelemente nebeneinander erscheinen */
}
.gallery li a {
display: block;
margin: 10px; /* Außenabstand */
}

Hab's jetzt nicht getestet. Falls es nicht geht, sag' mir bitte Bescheid! :)
 
bluescript schrieb:
Prinzipiell gilt, dass Tabellen zu Layoutzwecken unsauber sind - wenn eine Tabelle aber das einfachere von zwei Mitteln ist, sollte man pragmatisch sein und sie trotzdem nehmen.
Ergänzung: Darum geht es nicht - warum man keine Tabellen verwenden sollte. Tabellen sollten ausschließlich für tabellarische Inhalte verwendet werden. Somit setzt man dieses Element seiner Bedeutung entsprechend korrekt ein. Ich muss aber gestehen dass bei vertikalen Zentrierungen eine Tabelle als allerletztes Hilfsmittel doch nicht so schlecht ist ;)

Gordon Freeman schrieb:
Versteh ich ehrlich gesagt nicht. Display-Eigenschaften beherrscht der IE ab Version 4 - und der Code hält nat. sowohl der SGML-Parser als auch der HTML-Tidy Prüfung zu 100% stand.
Sicher werden Display-Eigenschaften unterstützt. Es scheitert aber an der Eigenschaft table-cell die der IE6 bspw. nicht annimmt.

S.o.T.s Form, die Logos in einer Liste darzustellen ist hier wohl die beste Lösung.
 
S.o.T.s Vorschlag mit der unsortierten Liste ist natürlich um Längen besser als die Verwendung von DIVs - hätt ich auch merken müssen, schließlich mach ichs selber ja genauso... Auf die Weise liegt der Inhalt strukturiert vor, was bei DIVs nicht der Fall ist. Den Unterschied merkt man allerdings erst, wenn man die eingebundenen Styles deaktiviert, bzw. einen Browser verwendet, der CSS nicht beherrscht.
 
An eine Liste dacht ich auch, aber da dürfte es schwierig werden, Elemente sowohl neben-, als auch untereinander anzuzeigen.
Bild 1.jpg

Statt display:inline; müsste man außerdem float: left; benutzen, um li-Elemente nebeneinander anzuzeigen.
 
@ Mr. Snoot: Es hindert einen aber auch nichts daran, in den entsprechenden Fällen einfach zwei Buttons in ein Listitem reinzupacken. Klar durchbricht das strenggenommen die Logik einer Liste, aber wie schon gesagt - man kanns auch übertreiben. Letzten Endes hat HTML und CSS dem Inhalt zu dienen und nicht andersrum.
 
ajo, wiedermal ein thread, wo der Hass auf table-layout übertrieben und Missverstanden wird.
Ich empfehle da nur allzugern meine kleine Lektüre zu Tabellen in HTML:
https://www.computerbase.de/forum/threads/warum-tabellen-zum-layouten-besser-sind.554996/

Dennoch würde ich wahrscheinlich in diesem Fall mit einer Liste und float left einfacher zum Ziel kommen...
Eine gesunde Portion an Pragmatik fehlt hier aber leider wieder den meisten.

Ich finde aber auch das Konzept "4 Spalten 3 Zeilen" hier nicht richtig. Wieso nicht einfach eine "Liste" von Elementen, die soweit die Fensterbreite das erlaubt, aneinander gereiht werden, und dann nach bedarf umgebrochen wird. Wobei dann jedes Element eine Feste Breite bekommt, womit dann alle Elemente dann auch untereinander sind.
Wenn man wirklich nur 4 Elemente nebeneinander haben möchte, dann einfach im UL eine maximale breite von 4 * element breite angeben.
 
Zuletzt bearbeitet:
Zurück
Oben