nicht angemeldet
Überlauf verhindern und stattdessen das Element vergrößern
Hallo Forum,
Ich habe ein Blockelement, das eine Box erzeugt, die sich über das gesamte Fenster ausdehnt.
<body>
<p style="border: 1px outset red;">
...
</p>
</body>
Wenn jetzt in diesem Element sich ein sehr langes Wort befindet, und ich nicht möchte, dass das Element umgebrochen wird, dann geht das Wort im Mozilla 1.3, Opera 6.11 und Konqueror 3.1.1 (IE kann ich im Moment unter Linux nicht testen) gemäß der CSS2-Spezifikation über den roten Rand des Blockelements hinaus; das Blockelement behält aber seine aktuelle Breite. (nämlich die des Fensters)
Hier: http://www.christian-seiler.de/temp/test-element-width-1.html
Das möchte ich aber nicht. Ich möchte, dass das Element, wenn der Inhalt zu groß wird, sich der größe des Inhalts anpasst. Ich habe mir mal die CSS2-Spezifikation nochmal zu Gemüte geführt, genaugenommen die Kapitel 9, 10 und 11. Leider steht da nur, dass sich Mozilla, Opera und Konqueror korrekt verhalten, nicht jedoch, wie ich mein Problem lösen kann.
Mir ist klar, dass bei Tabellenzellen das ganze wie gewünscht funktioniert. Also habe ich mir gedacht, ich könnte ein bisschen CSS "vergewaltigen" und habe folgendes probiert:
html {
width: 100%;
display: table;
margin: 0;
padding: 0;
}
body {
display: table-cell;
width: 100%;
margin: 0;
padding: 0;
color: #000;
background: #fff;
}
Ich schaue mir dann das Ergebnis im Mozilla 1.3 an und freue mich, es klappt so, wie ich es will. Dann starte ich Opera 6.11 und habe schon die erste Enttäuschung: wenn der Inhalt zu groß ist, dann klappt es, wenn der Inhalt dagegen kleiner als die volle Breite ist, dann klappt es nicht mehr. Konqueror bleibt beim Versuch, die Seite zu rendern, gnadenlos hängen.
Hier: http://www.christian-seiler.de/temp/test-element-width-2.html
Als letztes versuche ich noch, die Methode etwas abzuwandeln. Ich packe den Inhalt der ganzen Seite in ein <div>:
<body>
<div id="table-cell">
<p style="border: 1px outset red;">
...
</p>
</div>
</body>
Die CSS-Anweisungen lauten jetzt so:
html {
margin: 0;
padding: 0;
}
body {
width: 100%;
display: table;
margin: 0;
padding: 0;
}
#tablecell {
display: table-cell;
width: 100%;
margin: 0;
padding: 0;
color: #000;
background: #fff;
}
Testseiten hier:
http://www.christian-seiler.de/temp/test-element-width-3.html
(mit nicht umbrechbarem Inhalt)
http://www.christian-seiler.de/temp/test-element-width-4.html
(mit umbrechbarem Inhalt)
Mozilla 1.3 und Opera 6.11 zeigen mir dann das ganze so an, wie ich es will. Konqueror klappt auch wunderbar, *solange* das Fenster kleiner ist, als das Element, sobald das Fenster größer ist, dann ist der Rahmen um das Element nur so groß wie nötig, füllt jedoch nicht die ganze Breite aus.
Ich weiß, semantisches Markup ist was anderes als ein Container-<div> um die ganze Seite, aber ich sehe wirklich keine andere Möglichkeit, außer bei only-for-Mozilla-Seiten.
Und nun zu meinen eigentlichen Fragen:
1. Wie reagieren IE 5 und IE 6? (laut http://www.xs4all.nl/~ppk/css2tests/intro.html verstehen sie kein display: table)
2. Weiß jemand, wie man es Konqueror doch noch beibringen kann?
3. Weiß jemand, wie iCab, OmniWeb und IE5/Mac reagieren?
4. Weiß jemand eine andere (bessere) Lösung? Stehe ich vielleicht auf einem Riesenschlauch?
Viele Grüße,
Christian
--
Ich bin ein Bandbreitenverschwender. Meine Signatur tut mir leid. Ehrlich!
Ich bin ein Bandbreitenverschwender. Meine Signatur tut mir leid. Ehrlich!
-
Hallo Christian,
Was du suchst, ist wohl min-width:100%.
Mozilla und Opera 7 können das auf jeden fall.
IE interpretiert ein normales width wie ein min-width.Grüße
Daniel
-
Hallo Daniel,
Was du suchst, ist wohl min-width:100%.
Das kenne ich schon, Konqueror reagiert bei dieser Konstruktion gar nicht auf diese Eigenschaft. width: 100%; habe ich ja schon drin.
Mozilla und Opera 7 können das auf jeden fall.
Ich weiß, aber Mozilla und Opera sind auch nicht mein Problem...
Trotzdem Danke für die Hilfe.
Viele Grüße,
Christian--
Ich bin ein Bandbreitenverschwender. Meine Signatur tut mir leid. Ehrlich!
-
-
Hallo Christian,
alles für den IE 6.0SP1/XP
http://www.christian-seiler.de/temp/test-element-width-1.html
Box bis an rechten Rand, bricht nicht um. Wenn Fenster kleiner als Text, dann umschliesst die Box den Text und bricht NICHT um.
http://www.christian-seiler.de/temp/test-element-width-2.html
Kein Platz zwischen Box und Fensterrand. Umbruch genau wie oben.
http://www.christian-seiler.de/temp/test-element-width-3.html
(mit nicht umbrechbarem Inhalt)Wie 2
http://www.christian-seiler.de/temp/test-element-width-4.html
(mit umbrechbarem Inhalt)Wie 2, bricht aber um.
- Weiß jemand eine andere (bessere) Lösung? Stehe ich vielleicht auf einem Riesenschlauch?
Wieder nur ein Gedanke: min-width/max-width?
Gruss, Thoralf
--
Sic Luceat Lux!-
Hallo Thoralf,
http://www.christian-seiler.de/temp/test-element-width-1.html
Box bis an rechten Rand, bricht nicht um. Wenn Fenster kleiner als Text, dann umschliesst die Box den Text und bricht NICHT um.Dann ist das mal wieder die Gedankenlese-KI des IE. Nur dass das Dokument diesmal valide ist. :-)
http://www.christian-seiler.de/temp/test-element-width-3.html
(mit nicht umbrechbarem Inhalt)
Wie 2Prima.
http://www.christian-seiler.de/temp/test-element-width-4.html
(mit umbrechbarem Inhalt)
Wie 2, bricht aber um.Super. Klasse. Und das ohne CSS-Hack. *freu*
- Weiß jemand eine andere (bessere) Lösung? Stehe ich vielleicht auf einem Riesenschlauch?
Wieder nur ein Gedanke: min-width/max-width?
Beim Konqueror hilft min-width nicht (siehe meine Antwort auf Daniels Posting) und _alleine_ min-width zu verwenden - statt meinem Konstrukt - bringt auch nicht das gewünschte Ergebnis: http://www.christian-seiler.de/temp/test-element-width-5.html
Viele Grüße,
Christian--
Ich bin ein Bandbreitenverschwender. Meine Signatur tut mir leid. Ehrlich!-
Hallo Christian,
Beim Konqueror hilft min-width nicht (siehe meine Antwort auf Daniels Posting) und _alleine_ min-width zu verwenden - statt meinem Konstrukt - bringt auch nicht das gewünschte Ergebnis: http://www.christian-seiler.de/temp/test-element-width-5.html
Auch eine vollständige Width-Angabe, also min-width: 100%; width: auto; max-width: none; schiebt die Box auch beim Phoenix 0.5 in den Text rein.
Ich hab eben mal mit span/div innerhalb des P gespielt, aber über dieses Ineinanderrutschen komm ich nicht hinaus.
Gruss, Thoralf
--
Sic Luceat Lux!
- Weiß jemand eine andere (bessere) Lösung? Stehe ich vielleicht auf einem Riesenschlauch?
-
Hallo,
ich hab mir jetzt nicht alle deine beispiele angesehen.
aber so:<style type="text/css">
html{overflow:auto;height:100%;}
</style></head><body>
<p style="border: 1px outset red;white-space: nowrap;"> Dies ist ein
langer Text, der nicht umgeborchen werden soll. Bitte das Fenster
kleiner als die Länge dieses Textes machen. Danke. </p>
</body>wird zumindest in mozilla und ie6 das <p> ausgedehnt.
Gruss, Jan aus Dresden
-
Hallo Jan,
html{overflow:auto;height:100%;}
wird zumindest in mozilla und ie6 das <p> ausgedehnt.Auch eine Möglichkeit. Allerdings mag Opera 6 das nicht.
Vielleicht sollte ich mal erwähnen, wozu das ganze gut sein soll:
Wenn ich bei "klassischen" CSS-Layouts das Fenster zu weit zusammenschiebe, dann gibt es "Überlagerungen", anstelle dass sich die Box ausdehnt. (Ist im Standard leider so festgeschrieben und es gibt auch keine Eigenschaft, mit der man das ändern könnte) Das passiert zum Beispiel auch bei Deiner Seite, allerdings muss man dort schon sehr stark schieben:
<img src="http://www.christian-seiler.de/temp/fractatulum-sehr-eng.png" border="0" alt="">
(ich hoffe Du bist mir jetzt nicht böse, dass ich Deine Seite rauspicke, bei anderen ist es natürlich genauso)
Nunja, diese Tatsache hat mich dann doch ziemlich gestört, vor allem, wenn der Inhalt sowieso schon recht breit ist. (z.B. eine breite (semantisch richtig eingesetzte ;)) Tabelle einer Webanwendung)
Daher bin ich hinter diesem Problem her.
Viele Grüße,
Christian--
Ich bin ein Bandbreitenverschwender. Meine Signatur tut mir leid. Ehrlich!-
Hallo Christian, Jan, und alle anderen!
Wenn ich bei "klassischen" CSS-Layouts das Fenster zu weit zusammenschiebe, dann gibt es "Überlagerungen", anstelle dass sich die Box ausdehnt. (Ist im Standard leider so festgeschrieben und es gibt auch keine Eigenschaft, mit der man das ändern könnte)
Ist dafür nicht die 'min-width' Eigenschaft gedacht!?
Nunja, diese Tatsache hat mich dann doch ziemlich gestört, vor allem, wenn der Inhalt sowieso schon recht breit ist. (z.B. eine breite (semantisch richtig eingesetzte ;)) Tabelle einer Webanwendung)
Daher bin ich hinter diesem Problem her.
@Christian: So ganz erschließt sich mir dein Problem noch nicht... *aufderleitungsteh*, zumindest nicht bei Browsern, die die min & max Eigenschaften kennen.
Was ist denn gegen einen Umbruch einzuwenden? IMHO ist eben für Inhalte, die 'nebeneinander' positioniert werden sollen, irgendwann auch mal eine kleinstmögliche Fensterbreite erreicht, unterhalb derer keine 'ordentliche' Darstellung mehr möglich (sinnvoll) ist (Extremfall: Das Fenster ist irgendwann so schmal, dass pro Zeile nur noch ein Zeichen dargestellt werden kann).Eigentlich ist doch 'alles' was du willst, eine minimale Fenstergöße 'erzwingen', bei deren Unterschreitung kein Umbruch mehr erzeugt wird.
@Jan: Hab' noch keine Lösung für das Height-Prolem im Opera gefunden (aus dem Chip-Forum)! ;-)
Gruß Gunther
-
Hallo Gunther,
Ist dafür nicht die 'min-width' Eigenschaft gedacht!?
Wenn ich die minimale Größe des Inhalts aber nicht kenne?
Was ist denn gegen einen Umbruch einzuwenden?
Nichts. Das Problem ist ja, wenn die Inhalte selbst so groß werden, dass kein Umbruch mehr möglich ist. (Langes Wort, Breite Tabelle, großes Bild, etc.) Ich habe beim Beispiel den Umbruch doch bloß deaktiviert, damit ich einen längeren Inhalt ohne großes Rumgetue hinbekomme.
Eigentlich ist doch 'alles' was du willst, eine minimale Fenstergöße 'erzwingen', bei deren Unterschreitung kein Umbruch mehr erzeugt wird.
Nein. Der Umbruch geschieht ja sowieso nicht bei einer gewissen Mindestbreite. Das ist nicht das Problem. Das Problem ist, ich weiß nicht von vornerein, wie groß der minimale Inhalt sein wird. Ich generiere die Seiten dynamisch und dann kann es auch mal sein, dass eine "Zeile" sehr lang ist, weil da z.B. eine sehr große Tabelle drin ist. Ein anderes Mal ist da aber nur ein Absatz drin, der prima umgebrochen werden kann. Daher weiß nur eine einzige "Entität", was die eigentlich Mindestgröße ist: der Browser, der die Seite gerade anzeigt.
Viele Grüße,
Christian--
Ich bin ein Bandbreitenverschwender. Meine Signatur tut mir leid. Ehrlich!
-
-
Hallo,
ich habe nochmal etwas herum probiert:<style type="text/css">
html{overflow:auto;height:100%}
</style>
</head><body>
<p style="white-space:nowrap;padding:5px">
<span style="border:1px solid red;margin:5px;"> Dies ist ein
langer Text, der nicht umgeborchen werden soll. Bitte das Fenster
kleiner als die Länge dieses Textes machen. Danke. </span>
</p>
</body>so funktioniert es auch im opera6.
Man muss halt sehen ob es im speziellen so taugt, wenn es auf das optische ergebnis ankommt ist es so ok, problematisch wird es dann wenn dem <span> noch formate gegeben werden sollen, die für inline-elemente nicht gedacht sind.Naja, vieleicht nützt es dir ja so.
Gruss, Jan aus Dresden
-
Hallo Jan,
ich habe nochmal etwas herum probiert:
Danke erstmal.
Naja, vieleicht nützt es dir ja so.
Leider nicht. Wie gesagt ging es mir gar nicht um diesen Spezialfall sondern um das Problem an sich - mit beliebigen Blockelementen beliebig verschachtelt. Trotzdem danke für Deine Mühe.
Viele Grüße,
Christian--
Ich bin ein Bandbreitenverschwender. Meine Signatur tut mir leid. Ehrlich!-
Hallo Zusammen,
hiermit stelle ich eine Behauptung in den Raum.
Es gibt _keinen_ Ersatz für Tabellenzellen durch div- und/oder span-Elemente.
<html>
<head>
<title>Tabellenzellen</title>
</head>
<body>
<table style="width:100%;">
<tr>
<td style="width:100%; border:1px solid red; white-space:nowrap; padding:10px;">beliebig langer Zeileninhalt</td>
</tr>
</table>
<table style="width:100%;">
<tr>
<td style="width:100%; border:1px solid red; white-space:nowrap; padding:10px;">beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt</td>
</tr>
</table>
<table style="width:100%;">
<tr>
<td style="height:200px; width:100%; border:1px solid red; padding:10px;">beliebig langer Zeileninhalt</td>
</tr>
</table>
<table style="width:100%;">
<tr>
<td style="height:200px; width:100%; border:1px solid red; padding:10px;">beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt</td>
</tr>
</table>
</body>
</html>Wer das Gegenteil behauptet, der macht diese Darstellung ohne Tabellen nach. Allerdings ist Bedingung, dass jeweils wirklich beliebig langer Inhalt in den Zellen stehen kann, ohne die Formate ändern zu müssen.
viele Grüße
Axel
-
Hallo Axel,
Wer das Gegenteil behauptet, der macht diese Darstellung ohne Tabellen nach.
<html>
<head>
<title>Tabellenzellen</title>
<style type="text/css">
.tfw {
display: table;
width: 100%;
margin-bottom: 4px;
margin-top: 4px;
}
.tfwtd {
width:100%;
border:1px solid red;
padding:10px;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="tfw">
<div class="tfwtd" style="white-space:nowrap;">beliebig langer Zeileninhalt</div>
</div>
<div class="tfw">
<div class="tfwtd" style="white-space:nowrap;">beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt</div>
</div>
<div class="tfw">
<div class="tfwtd" style="height:200px;">beliebig langer Zeileninhalt</div>
</div>
<div clasS="tfw">
<div class="tfwtd" style="height:200px;">beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt</div>
</div>
</body>
</html>Ja, ich weiß, schön ist anders.
Getestet: Mozilla 1.3, Konqueror 3.1.1, Opera 7.10 Beta 1, alle Linux. IE müßte es übrigens auch tun. (da er sich ja sowieso verhält, wie gewünscht) Eventuell müssen noch weitere <div>s her wegen des Box model bug bzw. weil der IE sonst die width:100%;-Angaben im standards compliance mode richtig versteht, aber display: table-cell/table nicht kann und deswegen die divs etwas zu breit macht.
.oO(gilt das auch als Tabelle?)
Viele Grüße,
Christian--
Ich bin ein Bandbreitenverschwender. Meine Signatur tut mir leid. Ehrlich!-
Hallo Christian,
Wer das Gegenteil behauptet, der macht diese Darstellung ohne Tabellen nach.
<html>
<head>
<title>Tabellenzellen</title>
<style type="text/css">
.tfw {
display: table;/*unfair! ;-))*/
width: 100%;
margin-bottom: 4px;
margin-top: 4px;
}
.tfwtd {
width:100%;
border:1px solid red;
padding:10px;
display: table-cell;/*unfair! ;-))*/
vertical-align: middle;
/*funktioniert nicht im IE5.x, 6 nicht getestet/
}
</style>
Eventuell müssen noch weitere <div>s her...Eben.
.oO(gilt das auch als Tabelle?)
Eben nicht. Tabellen sind einfacheres Markup ;-)). Welchen Vorteil hätte diese Konstruktion noch gegenüber einer Tabelle?
viele Grüße
Axel
-
Hallo Axel,
/*unfair! ;-))*/
/*unfair! ;-))*/Du hast nicht gesagt, dass ich fair sein soll... ;-)
vertical-align: middle;
/*funktioniert nicht im IE5.x, 6 nicht getestet/Klar. Habe ich nicht anders erwartet. IE 5 und auch 6 für Windows können beide kein display: table und kein display: table-cell; => vertical-align wird angewandt, als ob das ganze ein Blockelement und nicht eine Tabellenzelle wäre. (http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align)
Welchen Vorteil hätte diese Konstruktion noch gegenüber einer Tabelle?
Hier vergewaltige ich Elemente, die keine semantische Bedeutung haben. Bei Tabellen vergewaltige ich Elemente, die eine semantische Bedeutung haben. ;-)
Viele Grüße,
Christian--
Ich bin ein Bandbreitenverschwender. Meine Signatur tut mir leid. Ehrlich!-
Hallo Christian, hallo Axel, und alle anderen!
Ich hätte da auch noch ein 'Konstrukt', das ohne table-cell auskommt. Hab's allerdings nur im MSIE6, NS7, und OP7.03 getestet unter Windows.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Tabellen vs. CSS</title>
</head>
<body><div style="width: 100%;">
<p style="border:1px solid red; white-space:nowrap; padding:10px;">beliebig langer Zeileninhalt</p>
</div><div style="width: auto;">
<p style="width:100%; border:1px solid red; white-space:nowrap; padding:10px; display: inline;">beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt</p>
</div><div style="width: 100%;">
<p style="height:200px; border:1px solid red; padding:10px;">beliebig langer Zeileninhalt</p>
</div><div style="width: 100%; height: 200px; border:1px solid red;">
<div style="padding: 10px;">beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt</div>
</div></body>
</html>Wie gesagt - nur ein Versuch... (immerhin auch valide *bg*)
Gruß Gunther
-
Im MSIE geht es so natürlich nicht (ohne den Doctype-Switch in den Standard-compliants Mode schon eher, dann geht es im OP allerdings nicht)!
Aber der MSIE ist ja z.B. dank der Conditional Comments das kleinste Problem, da er das gewünschte Ergebnis ja quasi schon ohne jegliche Verrenkungen liefert.
Gruß Gunther
-
Hallo Gunter,
Im MSIE geht es so natürlich nicht (ohne den Doctype-Switch in den Standard-compliants Mode schon eher, dann geht es im OP allerdings nicht)!
Eben.
Aber der MSIE ist ja z.B. dank der Conditional Comments das kleinste Problem, da er das gewünschte Ergebnis ja quasi schon ohne jegliche Verrenkungen liefert.
*g* Dafür verrenkst Du Dich mit Conditional Comments.
Die Lösung mit Tabelle funktioniert, ohne Verrenkungen, in allen gängigen Browsern.
Mal ehrlich: Eine CSS-only-Lösung, die sinnvoll wäre, sähe so aus:
<html>
<head>
<title>CSS-Layout</title>
<style type="text/css">
<!--
p.nowrapmitrahmen {min-width:100%; overflow:visible; border:1px solid red; white-space:nowrap; padding:10px;}
p.wrapmiddlemitrahmen {height:200px; width:100%; border:1px solid red; padding:10px;}
-->
</style>
</head>
<body>
<p class="nowrapmitrahmen">beliebig langer Zeileninhalt</p>
<p class="nowrapmitrahmen">beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt</p>
<p class="wrapmiddlemitrahmen">beliebig langer Zeileninhalt</p>
<p class="wrapmiddlemitrahmen">beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt</p>
</body>
</html>Im HTML steht also die Semantik. Es handelt sich um 4 Textabsätze.
Das CSS sorgt für das Layout. Alles, was damit geht ist sinnvoll. Sobald man aber _im HTML_ zusätzliche Elemente (div, span ...) benötigt, die _nur_ für das Layout nötig sind, ist die Trennung von Inhalt und Layout hinfällig. Dann kann man auch Tabellen verwenden.
Da die Regelung für overflow:visible nun mal so ist, wie sie ist:
This value indicates that content is not clipped, i.e., it may be rendered outside the block box. Weil das vertikale Ausrichten von mehrzeiligen Textblöcken eben _nur_ in Tabellenzellen funktioniert, muss man sie, meiner Meinung nach, sogar verwenden. Ein <div style="display:table-cell;">...</div> hat genau dieselbe semantische Wertigkeit, wie ein <table><tr><td>...</td></tr></table>, nämlich keine.viele Grüße
Axel
-
Hallo!
Das wäre eigentlich die Lösung des Problems.
<p style="display:table-cell">...<p>
Semantisch richtig und das Layout regelt CSS.
Nach der CSS2-Spec sind fehlende Tabellenelemente vom Browser zu ergänzen. Man muss also auch keine Divs für <table> und <tr> da hin schreiben.
Der einzige Schönheitsfehler ist, dass die Tabellen-CSS eigentlich für XML gedacht sind und in der Spezifikation steht, dass die bei HTML ignoriert werden dürfen.Grüße
Daniel
-
-
-
-
-
-
-
-
-
-
Hallo, Christian,
Vielleicht sollte ich mal erwähnen, wozu das ganze gut sein soll:
Wenn ich bei "klassischen" CSS-Layouts das Fenster zu weit zusammenschiebe, dann gibt es "Überlagerungen", anstelle dass sich die Box ausdehnt.
Ich dachte mir, dass du darauf hinauswillst. ;)
Das Problem sind natürlich die klassischen CSS-Layouts. Skalierbarkeit wird in der Regel immer definiert als »Skalierbarkeit bis zum längsten Wort«. Deshalb wäre es konsequent, auf jegliche Paralleltechniken wie Spaltenlayout zu verzichten (manche fordern es tatsächlich), weil sie die Grenze, an der alles zusammenfällt und sich überlappt, entscheidend höher ansetzen, nämlich bereits bei beispielsweise drei- bis viermal so breit wie das längste Wort.
Bei Tabellen ist es natürlich ähnlich problematisch, weil oft vorausgesetzt wird, dass ohne Ränder und padding 50-80 Zeichen pro Zeile angezeigt werden können. Dabei hast du aber wenigstens nicht das Problem, dass sich alles hoffnungslos überlappt, insofern ist die Starrheit hier (ausschließlich) im Hinblick auf deine Anforderungen ein Vorteil.
Bei Bildern sehe ich das größte Problem, weil sie überhaupt nicht anpassungsfähig sind, aber wie willst du dagegen nachträglich vorgehen? Es ist vermutlich unmöglich, weshalb du dir darüber wenig Gedanken machen kannst.Grüße,
Mathias-
Hallo Mathias,
Bei Bildern sehe ich das größte Problem, weil sie überhaupt nicht anpassungsfähig sind, aber wie willst du dagegen nachträglich vorgehen? Es ist vermutlich unmöglich, weshalb du dir darüber wenig Gedanken machen kannst.
Was ist denn eigentlich mit meinem "Hack"? Er funktioniert ja im Mozilla 1.3, Opera 6, (ich nehme an, damit auch 5), Opera 7, IE 6 und Konqueror 3.1.1. [1]
Die einzige Angst, die ich habe, ist, dass es mit Mac-Browsern Probleme macht, da ich mit diesen nicht testen kann. (und bisher hat sich anscheinend noch kein Mac-User in diesen Thread verirrt)
Aber ansonsten "löst" dieser Hack doch das ganze Problem mit der Skalierbarkeit, bei ausschließlich Mozilla/IE und der Inkaufnahme eines abstürzenden Konquerors ginge es sogar ohne <div>s um die ganze Seite, wenn man Konqueror noch korrekt unterstützen will, dann braucht man 2 <div>s, wenn man auf ein paar Probleme im Konqueror nicht so viel Wert legt, braucht man nur eines und es funktioniert prima im Mozilla und Opera ab 6.
Mich würde mal interessieren, was andere (auch Du) dazu sagen...
Viele Grüße,
Christian[1] Ich habe es doch noch für Konqueror hinbekommen, indem ich nochmal ein <div> verschachtelt habe - Konqueror kann display:table/table-cell, aber er mag es anscheinend nicht, wenn man es auf html oder body anwendet, das hier funktioniert in allen oben genannten Browsern: http://www.christian-seiler.de/temp/test-element-width-6.html
--
Ich bin ein Bandbreitenverschwender. Meine Signatur tut mir leid. Ehrlich!
-
-
-