CSS float macht nicht das was ich will

  • Themenstarter Themenstarter sw33tlull4by
  • Beginndatum Beginndatum
S

sw33tlull4by

Guest
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
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">
            <div class="stretchingmenue">
                content
            </div>
        </div>
        <div class="cell_plain">
            <div class="stretchingmenue">
                content
            </div>
        </div>
    </div>
</div>
Code: 
.cell_plain{
  display:table-cell;
}

.column_plain
{
    display:table-row;
}


.table
{
    display:table;
    width:40%;
}
.stretchingmenue{
    margin-top:0.25em;
    margin-bottom:0.25em;
}
 
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...
 
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.
 
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?
 
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 ...
 
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
 
<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>
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 :D
 
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
 
sw33tlull4by hat gesagt.:
Werd mein Design dann wohl komplett auf tables umstellen müssen.
Zum Vergrößern anklicken....

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???


sw33tlull4by hat gesagt.:
Aber wiso dieser komische Seiteneffekt zustande kommt interessiert mich schon noch.
Zum Vergrößern anklicken....
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 ;)
 
Hi sorry das es solange gedauert hat.
Test1 ist wie es aussehen sollte.
test2 ist wie es aussieht.

mfg

sw33t
 
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.
 
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
 
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.
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben