Tabellenlayout mit CSS nachbilden
johny7
Tabellenlayout mit CSS nachbilden
johny7
StruppiMoin allerseits,
aus seinen Anfängen kennt wohl jeder die rasche Layoutlösung mit Tabellen. Wie bilde ich das mit CSS nach? Ich habe z.B. einen Div-Tag, den ich auf eine bestimmte Breite (z.B: 100%) setze. Wie ordne ich die Inhalte jetzt in einer Reihe gleichmäßig verteilt an?
<p style="width:100%;">
<img src="<?php echo CW_ROOT_HTML; ?>/includes/images/icons/application_add.png" /> Neues Mitglied anlegen
<img src="<?php echo CW_ROOT_HTML; ?>/includes/images/icons/application_edit.png" /> Mitglied editieren
<img src="<?php echo CW_ROOT_HTML; ?>/includes/images/icons/application_delete.png" /> Mitglied löschen
</p>
Alles wird links hintereinander weg geschrieben. Kann ich das nicht auf die ganze Breite strecken?
Vielleicht gibt es ja irgendwo ein Tutorial, in dem man erklärt, wie die bekannten Kniffe der Tabellenlayouts mit CSS nach zu bilden sind...
Grüße, JN
--
ie:{ fl:( br:^ va:| ls:[ fo:| rl:? n4:? ss:| de:] js:| ch:? sh:( mo:| zu:)
http://www.johny7.de
ie:{ fl:( br:^ va:| ls:[ fo:| rl:? n4:? ss:| de:] js:| ch:? sh:( mo:| zu:)
http://www.johny7.de
-
aus seinen Anfängen kennt wohl jeder die rasche Layoutlösung mit Tabellen. Wie bilde ich das mit CSS nach?
Schwierig. Es gibt zwar einige CSS Eigenschaften, um Elemente wie Tabellenelemente anzuordnen. Die funktionieren aber z.T. nicht in allen Browsern und das Layout ist häufig instabil.
CSS ist einfach nicht dafür vorgesehen ein reines Tabellenlayout abzubilden, es eignet sich besser für ein Boxlayout. Du hast Bereiche (Boxen) die sich auf der zu Verfügung stehenden Fläche anordnen.
Wenn du unbedingt ein Tabellenlayout nutzen willst, ist es meiner Meinung eine Überlegung Wert auch Tabellen zu nutzen. Dafür wurden sie einst auch entwickelt. Sie haben den Vorteil, dass dein Raster stabil ist und in allen Browsern auch stabil angezeigt wird.
<p style="width:100%;">
<img src="<?php echo CW_ROOT_HTML; ?>/includes/images/icons/application_add.png" /> Neues Mitglied anlegen
<img src="<?php echo CW_ROOT_HTML; ?>/includes/images/icons/application_edit.png" /> Mitglied editieren
<img src="<?php echo CW_ROOT_HTML; ?>/includes/images/icons/application_delete.png" /> Mitglied löschen
</p>> > Alles wird links hintereinander weg geschrieben. Kann ich das nicht auf die ganze Breite strecken? Doch, wenn du die Elemente floatest und in deinem Fall z.b. 33% breit machst. width:100% ist bei Blockelementen, die nicht gefloatet oder absolut positioniert sind, überflüssig Struppi.-
Ein display: inline; auf die img tags wäre der selbe effekt.
lg steffen
-
Moin allerseits,
Ein display: inline; auf die img tags wäre der selbe effekt.
Was für ein selber Effekt? Die Grafiken werden mitsamt Text alle in einer Reihe angezeigt. Oder meinst du, man könnte dann einfach die 100% weglassen?
Grüße, JN
--
ie:{ fl:( br:^ va:| ls:[ fo:| rl:? n4:? ss:| de:] js:| ch:? sh:( mo:| zu:)
http://www.johny7.de -
Ein display: inline; auf die img tags wäre der selbe effekt.
Das ist bei Bildern der Standardwert, was soll das für einen Effekt haben?
Struppi.
-
-
Moin allerseits,
Schwierig. Es gibt zwar einige CSS Eigenschaften, um Elemente wie Tabellenelemente anzuordnen. Die funktionieren aber z.T. nicht in allen Browsern und das Layout ist häufig instabil.
CSS ist einfach nicht dafür vorgesehen ein reines Tabellenlayout abzubilden, es eignet sich besser für ein Boxlayout. Du hast Bereiche (Boxen) die sich auf der zu Verfügung stehenden Fläche anordnen.
Wenn du unbedingt ein Tabellenlayout nutzen willst, ist es meiner Meinung eine Überlegung Wert auch Tabellen zu nutzen. Dafür wurden sie einst auch entwickelt. Sie haben den Vorteil, dass dein Raster stabil ist und in allen Browsern auch stabil angezeigt wird.
Gibt es keine Möglichkeit, mit CSS an zu weisen: Verteile mir n Elemente innerhalb der übergeordneten Box mit der Breite x gleichmäßig auf einer Horizontalen?
Grüße, JN
--
ie:{ fl:( br:^ va:| ls:[ fo:| rl:? n4:? ss:| de:] js:| ch:? sh:( mo:| zu:)
http://www.johny7.de-
Gibt es keine Möglichkeit, mit CSS an zu weisen: Verteile mir n Elemente innerhalb der übergeordneten Box mit der Breite x gleichmäßig auf einer Horizontalen?
doch, mit float
Struppi.
-
-
-
Hello,
Moin allerseits,
aus seinen Anfängen kennt wohl jeder die rasche Layoutlösung mit Tabellen. Wie bilde ich das mit CSS nach? Ich habe z.B. einen Div-Tag, den ich auf eine bestimmte Breite (z.B: 100%) setze. Wie ordne ich die Inhalte jetzt in einer Reihe gleichmäßig verteilt an?
Da möchte ich Dich auf einen sehr ausfühlichen Artikel von Gunnar aufmerksam machen, der Dir vielleicht weiter hilft.
http://bittersmann.de/articles/inline-block/
Liebe Grüße aus dem schönen Oberharz
Tom vom Berg
-
-
Moin allerseits,
Ebenso hilfreich könnte dieser Thread sein.
Aha, also doch als Tabellen...
--
ie:{ fl:( br:^ va:| ls:[ fo:| rl:? n4:? ss:| de:] js:| ch:? sh:( mo:| zu:)
http://www.johny7.de-
Ebenso hilfreich könnte dieser Thread sein.
Aha, also doch als Tabellen...Nein, dort werden die von mir bereits erwähnten CSS Eigenschaften genutzt.
Wenn das Layout eine Tabelle (oder besser: ein grid) ist, dann müssen die Elemente auch diese Eigenschaften haben. Entweder durch CSS oder du benutzt table.Struppi.
-
Om nah hoo pez nyeetz, johny7!
Aha, also doch als Tabellen...
nicht wirklich*, nur so dargestellt wie eine Tabelle. Semantisch bleibt die <ul> eine Liste, dargestellt wird sie als Tabelle. Semantisch bleiben die <li> Listenelemente, nur dargestellt werden sie als Tabellenzellen.
*eigentlich überhaupt nicht
Matthias
--
-
-
-