nicht angemeldet
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Hi, habe folgendes Problem:
Ich erzeuge mit einem div Container eine virtuelle Tabellenzeile. Nun möchte ich vier virtuelle Spalten mit 2px Abstand zwischen jeder Zelle. Mit div würde es funktionieren, da div aber ein Block-Element ist macht er jedes mal ein zeilenumbruch. Mit span funktioniert es nicht, weil ich da keine feste Breite zuweisen kann. Und ich brauch eine feste Breite, weil ich einen vorgegebenen Tabellenheader mit festen Spaltengrößen habe.
ich hab mal ein Code-Beispiel rangehängt, damit ihr wisst wie ich mir das gedacht habe:
Hier mein HTML-Code:
<div class="tabelle">
<div class="zeile1">
<span class="spalte1">textbeispiel</span>
<span class="spalte2">textbeispiel</span>
<span class="spalte3">textbeispiel</span>
<span class="spalte4">textbeispiel</span>
</div>
<div class="zeile2">
<span class="spalte1">textbeispiel</span>
<span class="spalte2">textbeispiel</span>
<span class="spalte3">textbeispiel</span>
<span class="spalte4">textbeispiel</span>
</div>
</div>
Und hier CSS:
.tabelle {
position:relative;
width:1000px;
top:40px;
margin-bottom:40px;
overflow:auto;
}
.zeile1 {
position:absolute;
width:1000px;
top:5px;
}
.zeile2 {
position:absolute;
width:1000px;
top:105px;
}
.spalte1 {
background-color:#cddce4;
width:110px;
margin-left:2px;
}
.spalte2 {
background-color:#cddce4;
width:153px;
margin-left:114px;
}
.spalte3 {
background-color:#cddce4;
width:107px;
margin-left:269px;
}
.spalte4 {
background-color:#cddce4;
width:620px;
margin-left:378px;
}
Das Problem bei dieser Konstelation ist, dass die Breite bei span nichts bringt und er automatisch die breite, je nach Inhalt anpasst. Aber ich bräuchte eine feste Breite und bei zu großem Inhalt soll die Höhe automatisch verändert werden.
@@satanicsurfer:
Mit div würde es funktionieren, da div aber ein Block-Element ist macht er jedes mal ein zeilenumbruch.
Die 'http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float'-Eigenschaft kennst du?
Live long and prosper,
Gunnar
warum benutzt Du keine Tabelle?
Weil ich die Vorgabe habe, es ohne Tabellen zu machen, frag nich warum, ich weiß es auch nicht.
Die 'http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float'-Eigenschaft kennst du?
ja kenne ich. ich habe an alle span-elemente "float:left" angehängt und siehe da im IE6+ und Opera funktioniert es einwandfrei, nur beim Firefox kommt Unsinn raus, was ich nicht verstehe, deshlab wollte ich wissen, ob es noch ne andere lösung gibt.
@@satanicsurfer:
ich habe an alle span-elemente "float:left" angehängt und siehe da im IE6+ und Opera funktioniert es einwandfrei, nur beim Firefox kommt Unsinn raus,
Was zu dem Schluss führt, dass du Unsinn in den Firefox hineingibst.
IE und Opera raten vielleicht, was du _gemeint_ haben könntest; Firefox tut das, was du _gesagt_ hast.
was ich nicht verstehe, deshlab wollte ich wissen, ob es noch ne andere lösung gibt.
’ne andere als welche?
Live long and prosper,
Gunnar
’ne andere als welche?
ne andere lösung um die span-elemente auch im firefox korekt darzustellen.
wenn ich die spaltenelemente anstatt mit span, mit div anordne funktioniert es in allen drei browsern, nur halt, dass die höhe nicht mehr passt, weil div zeilenumbrüche macht. kann man das irgendwie verhindern?
so sollte es aussehen:
@@satanicsurfer:
’ne andere als welche?
ne andere lösung um die span-elemente auch im firefox korekt darzustellen.
Sagte ich doch schon: mit 'float'.
Mit „’ne andere als welche“ meinte ich schon, dass du deinen Versuch mit 'float' hier vorstellen solltest.
Live long and prosper,
Gunnar
Float-Lösung:
.zeile1 {
outline:1px solid #ff0000;
width:1000px;
margin-top:5px;
}
.zeile2 {
outline:1px solid #ff0000;
width:1000px;
margin-top:105px;
}
.spalte1 {
float:left;
background-color:#cddce4;
width:110px;
padding-left:2px;
}
.spalte2 {
float:left;
background-color:#cddce4;
width:153px;
padding-left:2px;
}
.spalte3 {
float:left;
background-color:#cddce4;
width:107px;
padding-left:2px;
}
.spalte4 {
float:left;
background-color:#cddce4;
width:600px;
padding-left:2px;
}
Hi,
also das wuerde mich schon neugierig machen, was der Grund sein sollte, eine Tabelle zu machen, ohne eine Tabelle zu machen.
Aber abgesehen davon: Kennst Du den Wert inline-block fuer das Attribut http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display?
(Erst ab CSS 2.1, Du musst wissen, ob Dir das hilft). Mir ist aber auch nicht ganz klar, was Du mit float fuer Probleme hast.
Viele Gruesse
der Bademeister
@@Bademeister:
Aber abgesehen davon: Kennst Du den Wert inline-block fuer das Attribut http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display?
Welche Browser kennen das?
Wenn man IrgendEinen nicht unterstützen möchte, könnte man auch gleich die Werte 'table', 'table-row' und 'table-cell' für die 'display'-Eigenschaft verwenden.
Live long and prosper,
Gunnar
Hi Gunnar,
Welche Browser kennen das?
Die Frage kann ich nicht hinreichend beantworten. Daher habe ich in meinem Posting deutlich zu machen versucht, dass das keine Empfehlung war, sondern ein Hinweis auf Fakten, die je nach Einsatzgebiet eventuell helfen koennten.
Ich denke, wenn ein Wert eines Attributes im CSS-Standard existiert, dann hat ein Hinweis darauf doch grundsaetzlich eine Daseinsberechtigung. Oder?
Wenn man IrgendEinen nicht unterstützen möchte, könnte man auch gleich die Werte 'table', 'table-row' und 'table-cell' für die 'display'-Eigenschaft verwenden.
Das stimmt. Was die Frage untermauert, warum jemand etwas dagegen haben sollte, eine Tabelle als Tabelle umzusetzen.
Viele Gruesse
der Bademeister
Yerf!
Aber abgesehen davon: Kennst Du den Wert inline-block fuer das Attribut http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display?
Welche Browser kennen das?
Opera (ab 7), Safari (ab 1.2), Konquerer (ab 3.5) und endlich auch FireFox (ab 3).
Der IE (mind. ab 6 evtl. auch ältere) kanns im Prinzip auch nur muss man unter manchen Umständen statt inline-block nur inline verwenden (und die IE Bugs erledigen den Rest). Genaueres dazu müsste eigentlich hier im Archiv rumliegen.
Gruß,
Harlequin
@@Harlequin:
Aber abgesehen davon: Kennst Du den Wert inline-block fuer das Attribut http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display?
Welche Browser kennen das?
Opera (ab 7), Safari (ab 1.2), Konquerer (ab 3.5) und endlich auch FireFox (ab 3).
Und für ebendiese „könnte man auch gleich die Werte 'table', 'table-row' und 'table-cell' für die 'display'-Eigenschaft verwenden“, wie ich schon sagte.
Das macht 'inline-block' in diesem Zusammenhang hier recht undiskutabel.
Live long and prosper,
Gunnar
Yerf!
Und für ebendiese „könnte man auch gleich die Werte 'table', 'table-row' und 'table-cell' für die 'display'-Eigenschaft verwenden“, wie ich schon sagte.
Nachdem man das aber auch im IE (und prinzipiell sogar FF2) zum laufen bekommt wollt ich es hier mal wieder erwähnen. inline-block ist eine schöne zusätzliche Möglichkeit die einem CSS bietet und die Fälle abdecken kann, bei denen Float oder table-* Probleme bereiten.
Das macht 'inline-block' in diesem Zusammenhang hier recht undiskutabel.
Ok, in *diesem* Fall hast du Recht, aber ich schreib hier ja auch fürs Archiv ;-)
Gruß,
Harlequin
@@Harlequin:
[…] aber ich schreib hier ja auch fürs Archiv ;-)
Ach so. ;-)
Live long and prosper,
Gunnar
Aber abgesehen davon: Kennst Du den Wert inline-block fuer das Attribut http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display?
(Erst ab CSS 2.1, Du musst wissen, ob Dir das hilft). Mir ist aber auch nicht ganz klar, was Du mit float fuer Probleme hast.
Leider bringt mir das nicht viel, weil das den IE6+ unterstützen muss, und soweit ich weiß, kann der nur CSS 1
@@satanicsurfer:
.table div
{
float: left;
break: left;
}
sollte dein Problem lösen.
Live long and prosper,
Gunnar
@@Gunnar Bittersmann:
Grmpf: ^break^clear
.table div
{
float: left;
clear: left;
}
Live long and prosper,
Gunnar
@@Gunnar Bittersmann:
Grmpf: ^break^clear
.table div
{
float: left;
clear: left;
}
>
> Live long and prosper,
> Gunnar
Vielen Dank... Das funktioniert einwandfrei in allen Browsern.
Hi,
warum benutzt Du keine Tabelle?
Viele Gruesse
der Bademeister