nicht angemeldet
3 Spalten: Li&Re nach Contentgröße, Mitte den Rest
henman
MudGuardHallo Leute,
ich habe eine ganz einfache Aufgabe, sehe aber nicht, wie man diese mit CSS lösen kann:
Ich möchte eine Zeile (zB div) haben, die aus 3 Spalten besteht und als Header zB über einer Tabelle steht, mit der diese Zeile links und rechts bündig abschließt.
- Linke Spalte soll so breit sein wie das enthaltene Wort/Image. Breite von Wort/Image variiert, kann nicht im CSS hard-coded werden
- Rechte Spalte soll so breit sein wie das enthaltene Wort/Image Breite von Wort/Image variiert, kann nicht im CSS hard-coded werden
- Mittlere Spalte soll die restliche verfügbare Breite einnehmen, und zentrierten Text enthalten.
Wichtig: Die Gesamtbreite der Zeile soll der Tabelle entsprechen, die darunter steht und es könnte keine Breiten im CSS fest vorgegeben werden, da die Breiten der Images und der Tabelle variieren.
Für Java-Kenner: In Java würde ich für die Headerzeile beispielsweise ein BorderLayout verwenden und das linke und rechte Image einfach in den West bzw East-Bereich stecken. Aber in HTML & CSS?
-
Hi watermann
Du kannst die Tabelle doch in ein Div stecken und das Div mit "auto" versehen (was Höhe/Breite usw. betrifft).
Dann ist das Div immer so groß wie die Tabelle.Divs untereinander können ja "floaten", oder prozentuale Größen beim Positionieren annehmen.
Gruß Gary
-
Hi Gary,
danke für Deine Antwort, aber mir ist nicht so ganz klar wie das funktionieren soll: width:auto; ist doch 1) der Defaultwert und lässt 2) den Div nicht auf die Breite der enthaltenen Tabelle schrumpfen.
Was man machen könnte, wäre dem Div display:inline; zu verpassen. Problem: Wenn ich dann bspw. ein span in dem Div nach rechts floate, liegt das span rechts außerhalb des Divs.
Beispiel:
<body> <div style="background-color:red;display:inline;"> <span style="">1</span><span style="float:right;">2</span> <table style=""> <tr><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td></tr> <tr><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td></tr> <tr><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td></tr> <tr><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td></tr> <tr><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td><td><img src="t1.jpg"></img></td></tr> </table> </div> </body>-
Hi Gary,
danke für Deine Antwort, aber mir ist nicht so ganz klar wie das funktionieren soll: width:auto; ist doch 1) der Defaultwert und lässt 2) den Div nicht auf die Breite der enthaltenen Tabelle schrumpfen.
Was man machen könnte, wäre dem Div display:inline; zu verpassen. Problem: Wenn ich dann bspw. ein span in dem Div nach rechts floate, liegt das span rechts außerhalb des Divs.
Beispiel:
[code lang=html]
<body>
<div style="background-color:red;display:inline;">ergänze mit display:inline-block;
Verwende bitte ein CSS Files statt inline CSS.<span style="">1</span><span style="float:right;">2</span> <table style="">...
</table></div>
</body>mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
ergänze mit display:inline-block;
besser wäre wohl
... <span id="li">...</span> [1] <span id="re">...</span> <div>Überschrift <table>...</table> </div> ...mit
span {border: 1px solid red;} #li {float: left;} #re {float: right;} div {border: 1px solid blue; text-align: center;} table {margin: auto;}[1] Die Id-Bezeichner sollten nach Inhalt, nicht nach Gestaltung gewählt werden.
Matthias
--
-
Om nah hoo pez nyeetz, apsel!
besser wäre wohl
noch besser
... > <span id="li">...</span> > <span id="re">...</span> > <table> <caption>Überschrift</caption> ... </table> > ... >Matthias
--
-
Hallo Matthias,
hast schon recht. Das hier war nur ein Sample-Snippet zu Demonstrationszwecken. Das echte Markup sieht ohnehin noch ein wenig anders aus.
Vielen Dank für Eure Antworten! Klasse!
-
-
-
Hallo Beat,
ergänze mit display:inline-block;
Perfekt! Das ist genau das, was ich gesucht habe! inline-block! Super, 1000 Dank!
Verwende bitte ein CSS Files statt inline CSS.
Ja, schon klar, aber für Demonstrationzwecke hier für ich es überschaubarer, die 2-3 styles direkt ans Element zu schreiben.
Vielen Dank für die Antwort!
-
-
-
-
hallo,
Ich möchte eine Zeile (zB div) haben, die aus 3 Spalten besteht und als Header zB über einer Tabelle steht, mit der diese Zeile links und rechts bündig abschließt.
- Linke Spalte soll so breit sein wie das enthaltene Wort/Image. Breite von Wort/Image variiert, kann nicht im CSS hard-coded werden
- Rechte Spalte soll so breit sein wie das enthaltene Wort/Image Breite von Wort/Image variiert, kann nicht im CSS hard-coded werden
- Mittlere Spalte soll die restliche verfügbare Breite einnehmen, und zentrierten Text enthalten.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float wird dein Freund sein. Damit kannst du den linken und rechten Container in ihre Ecken "schubsen".
grüße,
henman--
"Sir! We are surrounded!" - "Excellent! We can attack in any direction!"-
Hallo henman,
danke für die Antwort, aber dann ist die Tabelle und meine Zeile noch nicht gleich breit:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float wird dein Freund sein. Damit kannst du den linken und rechten Container in ihre Ecken "schubsen".
-
Om nah hoo pez nyeetz, waterman!
Hallo henman,
danke für die Antwort, aber dann ist die Tabelle und meine Zeile noch nicht gleich breit:
doch, wenn du die "mittlere Überschrift" und die Tabelle in ein DIV steckst.
Matthias
--
-
Hallo Matthias,
danke für die Antwort!
doch, wenn du die "mittlere Überschrift" und die Tabelle in ein DIV steckst.
Nur damit wir uns richtig verstehen:
<div id="container"> <div id="mittlereUeberschrift" style="width:auto;">...</div> <table></table> </div>Dieses Snippet, ergibt nicht, dass "mittlereUeberschrift" horizontal bündig mit der Tabelle abschließt. Das würde es nur, wenn die Tabelle eine width:100%; bekäme. Das soll die Tabelle aber nicht, da die Tabelle mit Ihrem Inhalt das Größe-gebende Element ist/sein muss.
-
hallo,
<div id="container">
<div id="mittlereUeberschrift" style="width:auto;">...</div>
<table></table>
</div>> > Dieses Snippet, ergibt nicht, dass "mittlereUeberschrift" horizontal bündig mit der Tabelle abschließt. Das würde es nur, wenn die Tabelle eine width:100%; bekäme. Das soll die Tabelle aber nicht, da die Tabelle mit Ihrem Inhalt das Größe-gebende Element ist/sein muss. hm. dann mach #container zu inline-block, die Breite sollte sich dann an die der Tabelle anpassen. Dann sollte #mittlereUeberschrift sich auch richtig anpassen. Ansonsten.. wenns so wichtig ist, dass die Breite gleich ist, warum kann #mittlereUeberschrift dann nicht der Tabellenkopf sein? grüße, henman -- "Sir! We are surrounded!" - "Excellent! We can attack in any direction!"-
Hi,
Ansonsten.. wenns so wichtig ist, dass die Breite gleich ist, warum kann #mittlereUeberschrift dann nicht der Tabellenkopf sein?
oder die caption
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
-
-
-