Tabelle via CSS

oliwol · #1 (**permalink**) 19.02.2007, 13:58

Hallo, Überschrift ist etwas übertrieben, will keine ganze Tabelle, aber so ähnlich.

Folgender Code:

Code:

<b>Beschreibung:</b> 

Einfach ein Text  der nichts zusagen hat, Einfach ein Text  der nichts zusagen hat, Einfach ein Text  der nichts zusagen hat, Einfach ein Text  der nichts zusagen hat.

So via CSS mach ich folgendes:

Code:

b {
float: left;
width: 120px;
}

So wenn jetzt der Text länger wird, und in die 2. Spalte rutscht, soll er beim Textanfang weiter gehen und nicht unter "Beschreibung" wieder anfangen.
Habt Ihr ne Lösung?

Gruß Oli

Maxefix · #2 (**permalink**) 19.02.2007, 14:10

Versuch mal den Text auch zu floaten. Ich würde das aber eh mit Definitionslisten lösen:

PHP-Code:


			
<dl>

  <dt>Beschreibung:</dt>

  <dd>Einfach ein Text  der nichts zusagen hat, Einfach ein Text  der nichts zusagen hat, Einfach ein Text  der nichts zusagen hat, Einfach ein Text  der nichts zusagen hat.</dd>

</dl>

PHP-Code:


			
dl {

 float: left;

 width: 120px;

}

dd {

 float: left;

 width: 400px;

}

Jetzt brauchst natürlich noch ein clearendes Element. Oder du verwendest Easyclearing.

MFG Max

mazzo · #3 (**permalink**) 19.02.2007, 14:18

Zitat:

Zitat von oliwol

So wenn jetzt der Text länger wird, und in die 2. Spalte rutscht, soll er beim Textanfang weiter gehen und nicht unter "Beschreibung" wieder anfangen.

Zusatz zum bereits geposteten Code von Maxefix:
das floatierte Element braucht noch ein margin-left in der Breite des daneben stehenden Elements, damit obenstehendes in Kraft tritt.

oliwol · #4 (**permalink**) 19.02.2007, 14:29

Danke für die Antworten, mit der Variante hat es Super(!) funktioniert.

Gruß Oli

oliwol · #5 (**permalink**) 19.02.2007, 14:48

Hab aber doch noch ne Frage.

Hab auch immer oft mit dem IE/Hack gearbeitet:

Code:

dl:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

/* Hides from IE-mac \*/
* html dl {height: 1%;}
/* End hide from IE-mac */

Aber der IE/7 spielt nicht mehr mit.

Gibt es da noch was neues??

mazzo · #6 (**permalink**) 19.02.2007, 14:52

der IE7 interpretiert den "Starhack" nicht mehr. Gib CSS für den IE per ConditionalComment in einer eigenen ie.css aus und dort wiederum kannst Du mit dem Starhack zwischen IE6 (und davor) und IE7 unterscheiden.

Maxefix · #7 (**permalink**) 19.02.2007, 15:12

Das sollte dir helfen:

PHP-Code:


			
 /* Nur IE bis Version 6 */

* html p.absatz {

 ... 

}

/* Nur IE, nur Version 7 */

*+html p.absatz {

 ... 

}

/* Nur IE, alle Versionen */

*+html  p.absatz,

* html p.absatz {

 ... 

}

/* Moderne Browser, IE nur Version 7 */

html>body p.absatz {

 ... 

}

/* Moderne Browser ohne IE 7 */

html>/**/body p.absatz {

 ... 

}

MFG Max

oliwol · #8 (**permalink**) 19.02.2007, 15:26

Sehr gut!

Auch das hat funktionirt, inkl. neuer Erkenntnisse...

Vielen Dank.

Gruß Oli

oliwol · #9 (**permalink**) 19.02.2007, 19:37

So noch was im IE/7

HTML:

Code:

<dl>
<dt><img src="bild.gif" width="60" height="90" alt="Bla" /></dt>
<dd>Text</dd>
<dd>Text</dd>
<dd>Text</dd>
</dl>

CSS: Normal

Code:

dl {
border: 2px solid #54615D;
padding: 5px;
}

dl:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

CSS: Nur IE/7

Code:

/* Hides from IE-mac \*/
*+html dl {height: 1%;}
/* End hide from IE-mac */

Der Rahmen darum ist ca. 10 px hoch und umfasst einfach nicht den <dl> Block. Warum nicht?

Gruß oli

heiko_rs · #10 (**permalink**) 19.02.2007, 22:12

Im Prinzip brauchst Du überhaupt kein clear, wenn dd nicht floatet (u.U. ein Vorteil, da es dann dann keine Breite braucht) und immer höher bzw. mindestens genauso hoch ist wie das floatende dt, denn dann schließt dl alle Elemente auch ohne clear ein.

Und falls dt doch mal höher ist als dd, bekommst Du eh ein Problem, das ich hier mal gelöst habe: Definitionsliste im Tabellendesign

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
CSS Tabelle - Zellen verbinden	Praktikant	CSS	5	16.08.2010 15:55
"Reine" CSS Alternative für DIESE Tabelle...?	Forgetta	CSS	8	16.07.2010 12:01
Layout: Tabelle -> CSS \| ohne Schönheitsfehler?	Knickedi	CSS	20	05.08.2006 02:18
Tabelle mit CSS zentrieren	to.ni	CSS	8	27.02.2004 10:33