✔ 2 spaltige Tabelle mit CSS ersetzen

[Necro_nomicon]

Hallo!

Wuerde gerne eine einzeilige zweispaltige Tabelle ohne <table> aufbauen, rein mit CSS.
Kennt jemand hierfuer einen Link zu einem Tutorial? Ich finde keinen.

 

[Maik]

Hi,

wenn das CSS auch von den älteren Browsergenerationen einwandfrei interpretiert werden soll, realisierst du ein einzeiliges zweispaltiges (Tabellen-)Layout einfach mit zwei <div>-Blöcken und der float-Eigenschaft, oder du nutzt das <ul>-Element mit zwei Listeneinträgen (<li>), die darin horizontal / nebeneinander ausgerichtet werden.

Ansonsten stehen dir hier grundsätzlich die Tabelleneigenschaften der display-Eigenschaft zur Verfügung, die in der IE-Familie aber erst seit dem IE8 unterstützt werden - siehe hierzu das dazugehörige Praxis-Beispiel.

mfg Maik

 

[Necro_nomicon]

Danke!

Keine Ahnung warum ich es mit einem div mit zwei p (je float:left, und float:right probiert habe.

Zwei div und alles funkt. Danke

 

[Necro_nomicon]

Wenn ich jetzt in der Spalte allerdings ein Bild haben und in der anderen Spalte Text, dann ist leider ein Zeilenumbruch.

Hat dies etwas mit Block-Element des Bildes zu tun?

 

[Maik]

Ein Bild (<img>-Element) besitzt von sich aus keine "Block-Element-Charakteristika", da es zur Familie der Inline-Elemente gehört, die keinen Absatz im Textfluß erzeugen.

mfg Maik

 

[Necro_nomicon]

ja stimmt. Ist ja eher umgekehrt, dass man es als Block-Element erst angeben muss.

Habe meinen Fehler gefunden. Ich hatte ein div mit float:left und ein div mit float:right. Das ist natuerlich ein Bloedsinn, da es bei zwei Spalten reicht einmal das float anzugeben.

Nach einer Bildschirmpause war alles klarer.

Danke fuer die Hilfe!

 

[Maik]

Ich hatte ein div mit float:left und ein div mit float:right. Das ist natuerlich ein Bloedsinn, da es bei zwei Spalten reicht einmal das float anzugeben.

Selbst hiermit, was auch nicht zwingend Blödsinn ist, produziere ich keinen unerwünschten Zeilenumbruch.

mfg Maik

 

[Necro_nomicon]

naja bei mir schon, seitdem es weg ist funkt es. Das Problem mit Zeilenumbruch gab es auch nur im FF (3).


vorher:

				<div style="float:left; padding-right:7px;">
						<img src="img/test.jpg" width="150" height="90" alt=""></div>
					<div style="float:right;">
						<p>Rechte Spalte</p>
						<p>Weiterer Text</p>

						<p>weiterer Text<br>
						noch mehr Text</p></div>
				
				
				<p style="clear:both;">Absatz nach dem float</p>

jetzt:

				<div style="float:left; padding-right:7px;">
						<img src="img/test.jpg" width="150" height="90" alt=""></div>
					<div>
						<p>Rechte Spalte</p>
						<p>Weiterer Text</p>

						<p>weiterer Text<br>
						noch mehr Text</p></div>
				
				
				<p style="clear:both;">Absatz nach dem float</p>

+++edit+++
am Bild kanns nicht gelegen haben, da ich dieses testweise auch durch Text ersetzt habe, aber dennoch ein Zeilenumbruch war.

 

[Maik]

Moin,

naja bei mir schon, seitdem es weg ist funkt es. Das Problem mit Zeilenumbruch gab es auch nur im FF (3).


vorher:

				<div style="float:left; padding-right:7px;">
						<img src="img/test.jpg" width="150" height="90" alt=""></div>
					<div style="float:right;">
						<p>Rechte Spalte</p>
						<p>Weiterer Text</p>

						<p>weiterer Text<br>
						noch mehr Text</p></div>
				
				
				<p style="clear:both;">Absatz nach dem float</p>

der "Zeilenumbruch" ergibt sich hier in FF, Opera, Safari & Co. lediglich durch den voreingestellten Außenabstand des <p>-Elements

• Vorher:
  
• Nachher:
  

p { margin:0; }

mfg Maik

 

[Necro_nomicon]

Danke!

Das ist allerdings gut zu wissen, da das Problem sonst immer wieder auftaucht.