[HaBo]

24.09.10, 16:35

Hi!
Browser FF 3.6.10
HTML 4
CSS 2

Nachfolgende Seite gibt eine Tabelle aus.
Nun wollte ich das letzte Element in der letzten Zeile mittels style="float:right"
an den rechten Tabellenrand schieben, um einen schönen Abschluss zu erhalten.

Das passiert auch aber im zuge der Anweisung wird das verschobene Element um ein paar px nach oben gezogen, was im Endeffekt schlecht aussieht.
Definiert hab ich das nicht, kann eigentlich auch ohne das style="float:right" mit dem
Resultat leben, aber ich wüsste schon gerne wiso das Element nach oben gezogen wird.
Mfg

sw33t

HTMLCODE

CSS-Code

beavisbee · 24.09.10, 16:55

erstmal 'ne Gegenfrage:
wenn du tatsächlich eine Tabelle darstellen willst, wieso nutzt du dann nicht 'nen <table>?

Für Designs soll man auf tables verzichten und mit divs arbeiten, das ist ja alles richtig. Aber für eine tatsächliche tabellarische Auflistung von irgendwas, ist es nicht verboten, weiterhin auch eine Tabelle für einzusetzen...

Anzeige

- Anzeige -

24.09.10, 17:11

1.Pure Faulheit.
Ich muss weniger HTML-Code schreiben, und kann CSS-Attribute in die Klassen schreiben welche die einzelnen Tabellenteile repräsentieren,
und da ich die CSS-Klassen der Tabelle auch anderweitig verwende ist das für mich recht praktisch.

2.Konsistenz
Ich verwende für mein komplettes Design Css-Elemente und dann <table> an dieser Stelle zu verwenden ist iw inkonsisten.
So erstelle ich auch diverse Menues auf diese Weise.

beavisbee · 24.09.10, 17:32

hast du schon mal versucht, jedem einzelnen DIV eine andere border und background-color zu geben, um dann genau zu sehen, welches DIV in welcher float-Variante wo hin gezogen wird?

metax. · 24.09.10, 17:32

Echte HTML-Tabellen mit anderen Elementen zu simulieren ist mindestens genauso falsch, wie HTML-Layout mit Tabellen zu regeln.
Der Browser kann echte Tabellen nämlich besser als Tabellen darstellen (z.B. was so Geschichten angeht, wie Ausdrucken über mehrere Seiten, oder ähnliches).
Ganz zu schweigen davon, dass du mit den Tabellen-Display-Styles in einigen Browsern auf die Nase fällst.

Was das Float angeht: Ich bin mir nicht sicher, ob du Float mit Tabellenlayout-gebundenen Elementen kombinieren kannst.
Die Tabelle (Display: Table-cell) bestimmt ja schon die Größe und Position des Elemente, da ist ein Float ja eine konkurrierende Anweisung.
Wenn du das ganze mal irgendwo hochlädst, kann ich vielleicht mehr sagen. Aus deiner Beschreibung werde ich nicht so ganz schlau und um das jetzt selber zusammenzubasteln fehlt mir leider die Zeit ...

24.09.10, 23:06

Ich hab die htmldatei mal angehangen.
Es ist keine Zelle dafür verantwortlich, sondern die Zeile von der hochgezogenen Zelle wird dicker und der Inhalt wird versetzt angeordnet .

Das float und display:table-xxxxx wiedersprüchliche anweisungen sind daran hab ich gar nicht gedacht.

mfg

sw33t

overflow · 24.09.10, 23:09

html

css

Meinst du das so ?
Hab dich auch nicht ganz verstanden

26.09.10, 22:45

Nein, sowas meine ich leider auch nicht.
Werd mein Design dann wohl komplett auf tables umstellen müssen.

Aber wiso dieser komische Seiteneffekt zustande kommt interessiert mich schon noch.
mfg

sw33t

beavisbee · 27.09.10, 07:48

Zitat:

Zitat von sw33tlull4by

Werd mein Design dann wohl komplett auf tables umstellen müssen.

Wieso wehrst du dich dagegen, in deinem DIV-Design lediglich die Tabelle als Table darzustellen? Du willst jetzt nicht wirklich das komplette Layout auf Tabelle machen, nur dass du keinen table im div-layout hast???

Zitat:

Zitat von sw33tlull4by

Aber wiso dieser komische Seiteneffekt zustande kommt interessiert mich schon noch.

hast du mal meinen Tipp probiert, jedes DIV anders einzufärben und Rahmen zu geben, um zu sehen, was genau mit den DIVs passiert, wenn du sie floatest?

edit:
oder mal doch einfach mal auf, wie es am Ende aussehen soll, auf dass wir erstmal besser verstehen, was genau du überhaupt willst

overflow · 27.09.10, 23:24

Eine Zeichnung wäre hilfreich

30.09.10, 09:58

Hi sorry das es solange gedauert hat.
Test1 ist wie es aussehen sollte.
test2 ist wie es aussieht.

mfg

sw33t

BasicAvid · 30.09.10, 11:37

Mal eine blöde Frage, warum benutzt dann nicht einfach text-align wie in deinem Beispiel? Bei einer normalen Table würde man es auch so machen.

Fallst Du aber das ganze Element aus welchem Grund auch immer an der rechten Seite haben möchtest, müsstest Du den linken Zellen Inhalt left-Floaten und den rechten right-Floaten. Da haste aber dann wieder das Problem, wenn das Element größer wird, der Inhalt trotzdem noch links ausgerichtet wird, was bedeutet, dass wenn Dein Element so groß wie die Zelle wird, der Inhalt wieder Links ausgerichtet wird. Was natürlich wiederum dazu führt, dass Du das selbe Problem wieder hast.

04.10.10, 16:59

Es geht mir nicht (mehr) um float:right per se sondern um diesen komischen seiteneffekt.
Weil ich es interessant finde das da etwas passiert ist was eigentlich nicht definiert ist, und wiso das so ist.
mfg

sw33t

BasicAvid · 05.10.10, 09:04

Ok, mach mal folgendes, gib der column_plain und der cell_plain ein float: left;, der cell_plain noch z.B. eine width:200px; und Deiner letzten stretchingmenue das style="float: right" und schau was passiert. Dann kommste bestimmt auch drauf, warum der einzelne Layer sich mit dem float:right so verhält wie er sich verhält. Die zugrunde liegenden Elemente sind immer noch Div-Elemente (Block-Elemente). Sobald Du die Elemente floatest, funktionieren auch css-table-styles, wie z.B. border-spacing.

07.10.10, 00:15

vielen dank für die Erklärung.

Anzeige

- Anzeige -

24.09.10, 17:32	#5 (permalink)
metax. Registriert seit: 22.01.07 Likes: 10	Echte HTML-Tabellen mit anderen Elementen zu simulieren ist mindestens genauso falsch, wie HTML-Layout mit Tabellen zu regeln. Der Browser kann echte Tabellen nämlich besser als Tabellen darstellen (z.B. was so Geschichten angeht, wie Ausdrucken über mehrere Seiten, oder ähnliches). Ganz zu schweigen davon, dass du mit den Tabellen-Display-Styles in einigen Browsern auf die Nase fällst. Was das Float angeht: Ich bin mir nicht sicher, ob du Float mit Tabellenlayout-gebundenen Elementen kombinieren kannst. Die Tabelle (Display: Table-cell) bestimmt ja schon die Größe und Position des Elemente, da ist ein Float ja eine konkurrierende Anweisung. Wenn du das ganze mal irgendwo hochlädst, kann ich vielleicht mehr sagen. Aus deiner Beschreibung werde ich nicht so ganz schlau und um das jetzt selber zusammenzubasteln fehlt mir leider die Zeit ... __________________ Wenn keiner zuschaut, teile ich heimlich durch Null! Meine Homepage: Planet Metax \| meine Bilder: DeviantArt \| Twitter

24.09.10, 23:09	#7 (permalink)
overflow Registriert seit: 17.01.04 Likes: 17	html <div class="table"> <div class="column_plain"> <div class="cell_plain"> <div class="stretchingmenue"> content </div> </div> <div class="cell_plain"> <div class="stretchingmenue"> content </div> </div> </div> <div class="column_plain"> <div class="cell_plain"> <div class="stretchingmenue"> content </div> </div> <div class="cell_plain"> <div class="stretchingmenue"> content </div> </div> </div> <div class="column_plain"> <div class="cell_plain"> <div class="stretchingmenue"> content </div> </div> <div class="cell_plain"> <div class="stretchingmenue"> content </div> </div> </div> <div class="column_plain"> <div class="cell_plain" id="fl"> <div class="stretchingmenue"> content </div> </div> <div class="cell_plain"> <div class="stretchingmenue"> <div id="fr">content</div> <div id="cf"></div> </div> </div> </div> </div> css GNU nano 2.2.4 File: basic.css .cell_plain{ display:table-cell; } .column_plain { display:table-row; } .table { display:table; width:40%; } .stretchingmenue{ margin-top:0.25em; margin-bottom:0.25em; } #fr{ float: right; } #cf{clear: both; } #fl{float: left;} Meinst du das so ? Hab dich auch nicht ganz verstanden

30.09.10, 11:37	#12 (permalink)
BasicAvid Registriert seit: 17.03.04 Likes: 2	Mal eine blöde Frage, warum benutzt dann nicht einfach text-align wie in deinem Beispiel? Bei einer normalen Table würde man es auch so machen. Fallst Du aber das ganze Element aus welchem Grund auch immer an der rechten Seite haben möchtest, müsstest Du den linken Zellen Inhalt left-Floaten und den rechten right-Floaten. Da haste aber dann wieder das Problem, wenn das Element größer wird, der Inhalt trotzdem noch links ausgerichtet wird, was bedeutet, dass wenn Dein Element so groß wie die Zelle wird, der Inhalt wieder Links ausgerichtet wird. Was natürlich wiederum dazu führt, dass Du das selbe Problem wieder hast. __________________ Mfg Basic Avid - Use it or be used! -

05.10.10, 09:04	#14 (permalink)
BasicAvid Registriert seit: 17.03.04 Likes: 2	Ok, mach mal folgendes, gib der column_plain und der cell_plain ein float: left;, der cell_plain noch z.B. eine width:200px; und Deiner letzten stretchingmenue das style="float: right" und schau was passiert. Dann kommste bestimmt auch drauf, warum der einzelne Layer sich mit dem float:right so verhält wie er sich verhält. Die zugrunde liegenden Elemente sind immer noch Div-Elemente (Block-Elemente). Sobald Du die Elemente floatest, funktionieren auch css-table-styles, wie z.B. border-spacing. __________________ Mfg Basic Avid - Use it or be used! -

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

24.09.10, 16:55	#2 (permalink)
beavisbee Member of Honour Registriert seit: 22.02.07 Likes: 77	erstmal 'ne Gegenfrage: wenn du tatsächlich eine Tabelle darstellen willst, wieso nutzt du dann nicht 'nen <table>? Für Designs soll man auf tables verzichten und mit divs arbeiten, das ist ja alles richtig. Aber für eine tatsächliche tabellarische Auflistung von irgendwas, ist es nicht verboten, weiterhin auch eine Tabelle für einzusetzen...

24.09.10, 17:11	#3 (permalink)
sw33tlull4by Guest Likes:	1.Pure Faulheit. Ich muss weniger HTML-Code schreiben, und kann CSS-Attribute in die Klassen schreiben welche die einzelnen Tabellenteile repräsentieren, und da ich die CSS-Klassen der Tabelle auch anderweitig verwende ist das für mich recht praktisch. 2.Konsistenz Ich verwende für mein komplettes Design Css-Elemente und dann <table> an dieser Stelle zu verwenden ist iw inkonsisten. So erstelle ich auch diverse Menues auf diese Weise.

24.09.10, 17:32	#4 (permalink)
beavisbee Member of Honour Registriert seit: 22.02.07 Likes: 77	hast du schon mal versucht, jedem einzelnen DIV eine andere border und background-color zu geben, um dann genau zu sehen, welches DIV in welcher float-Variante wo hin gezogen wird?

26.09.10, 22:45	#8 (permalink)
sw33tlull4by Guest Likes:	Nein, sowas meine ich leider auch nicht. Werd mein Design dann wohl komplett auf tables umstellen müssen. Aber wiso dieser komische Seiteneffekt zustande kommt interessiert mich schon noch. mfg sw33t

27.09.10, 23:24	#10 (permalink)
overflow Registriert seit: 17.01.04 Likes: 17	Eine Zeichnung wäre hilfreich

04.10.10, 16:59	#13 (permalink)
sw33tlull4by Guest Likes:	Es geht mir nicht (mehr) um float:right per se sondern um diesen komischen seiteneffekt. Weil ich es interessant finde das da etwas passiert ist was eigentlich nicht definiert ist, und wiso das so ist. mfg sw33t

07.10.10, 00:15	#15 (permalink)
sw33tlull4by Guest Likes:	vielen dank für die Erklärung.

[HaBo]

float macht nicht das was ich will