CSS: HTML table durch div Container ersetzen

03/02/2008 - 00:10 von Lutz Elßner | Report spam
Ich habe eine html table mit 1 Zeile und 2 Spalten, also 2 Zellen
nebeneinander.
Wenn ich den Browser schmaler zusammen schiebe, kommt irgendwann der
horizontale Scroll Balken.

Ich möchte nun aus den 2 Zellen 2 Container machen, die gleich groß sind,
und nebeneinander stehen wenn Platz ist, aber der rechte Container soll in
die nàchste Zeile springen wenn kein Platz ist.

Und dafür CSS benutzen.

Mit "display: inline" funktioniert das wenn nur Text im div Container ist.

Es ist aber links ein form und rechts ein image enthalten.
Nun ist oben die Textbox und darunter der Button, aber am Button klebt das
image halb unter der Textbox.

Außerdem hàtte ich gern, dass jeder Container gleich groß ist, wie bei td
Tabellenzellen, und der Inhalt z.B. zentriert wird.


<div style="display: inline">
<form action="" style="display: inline">
<input id="Text1" type="text" /><br />
<input id="Submit1" type="submit" value="submit" />
</form>
</div>

<div style="display: inline">
<img src="images/yxc.PNG" alt="" />
</div>


Man soll ja Tabellen nicht fürs Layout nehmen. Aber wie?
Und der Zeilenumbruch soll funktionieren, also keine feste Positionierung.

Lutz
 

Lesen sie die antworten

#1 Christoph Schneegans
03/02/2008 - 01:10 | Warnen spam
Lutz Elßner schrieb:

Subject: CSS: HTML table durch div Container ersetzen



Argh. Ich habe ich schon einmal auf
<http://google.com/groups?selm¥em03.19c.1%40freudi.off-site.de>
hingewiesen.

Ich habe eine html table mit 1 Zeile und 2 Spalten, also 2 Zellen
nebeneinander.
Wenn ich den Browser schmaler zusammen schiebe, kommt irgendwann der
horizontale Scroll Balken.



Es gibt Schlimmeres. Bspw. überlappenden Text - mit Tabellen praktisch
unmöglich, bei CSS immer öfter zu sehen.

Ich möchte nun aus den 2 Zellen 2 Container machen, die gleich groß sind,
und nebeneinander stehen wenn Platz ist, aber der rechte Container soll in
die nàchste Zeile springen wenn kein Platz ist.



Das ist leicht, wenn du die Breite eines Containers bspw. auf 30em
festlegst, dann genügt "float: left;" oder "float: right;" für diesen
Container.

Man soll ja Tabellen nicht fürs Layout nehmen.



Sagt wer? <http://www.w3.org/TR/WAI-WEBCONTENT...layout>
wird gerne angeführt, dort werden Layout-Tabellen aber gerade nicht verboten.
<news: entkràftet weitere
gerne benutzte Argumente.

<http://schneegans.de/sv/> · Schema-Validator für XML

Ähnliche fragen