[HTML/CSS] Divs buendig ausrichten?

[alcaeus]

Hallo ihr,

ich schraube wieder mal an meiner Website, und stelle dabei einzelne Dinge auf divs um; einfach um die Codemenge etwas (= viel) zu reduzieren.

Dabei habe ich folgenden Code:

Code:

<div class="maintitle">[url="{U_VIEW_CAT}"]{CAT_TITLE}[/url]

</div>
<div class="nav" style="float:left;clear:right;border:1px solid red;">[url="{U_ALBUM}"]{L_ALBUM_INDEX}[/url]{S_CAT_HIST}</div>

<div style="float:right;border:1px solid green;">[url="{U_UPLOAD_PIC}"][img]{IMG_upload_pic}[/img][/url]</div>
<br style="clear:both;">

<table ...>
.....

Ich haette nun gerne, dass die beiden divs welche floaten (diese mit dem roten bzw. gruenen Rahmen) unten buendig an der Tabelle ausgerichtet werden; allerdings ist dies nicht der Fall; die sind gar nicht miteinander ausgerichtet.

Kann mir jemand weiterhelfen? :)

Greetz
alcaeus

[Matze]

Hi Andy,

ich weiß nicht genau, wie die Ausgabe aussehen soll, doch im IE und im FF sieht es so aus, wie ich denke, dass du es haben möchtest (s. Anhang).
Könnte es sein, dass dir die Klassen "maintitle" und "nav" einen Streich spielen? Denn ich habe das nun ohne diese Klassen getestet.

[alcaeus]

Hallo Matze,

.maintitle beeinflusst nur das Textaussehen, .nav hat zwar ein padding-bottom von 2px, aber der Abstand ist mehr als nur 2px (siehe Anhang).
Wenn das rechte div mitm Img nicht da ist, dann ist die rote Box auch unten ausgerichtet :gruebel:

Greetz
alcaeus

PS: Es sieht uebrigens im Firefox und IE gleich aus...wenigstens sind sie sich einig :roll:

[alcaeus]

So, ich habs vorerst mal mit Tabellen gemacht; Tipps sind jedoch immer willkommen. Der Code-Overhead ist ja geradezu gigantisch :roll:

Greetz
alcaeus

[DGL-luke]

Die sind irgendwie nach oben bündig ausgerichtet. Ka ob/wie man das ändern kann. Müsst ich jetzt mein Hirn einschalten. ;)

Ansonsten halt mit top: ... rumpfuschen.

[alcaeus]

Zitat:

Zitat von DGL-luke

Die sind irgendwie nach oben bündig ausgerichtet. Ka ob/wie man das ändern kann. Müsst ich jetzt mein Hirn einschalten. ;)

Keine Sorge, das hab ich schon gemacht:

Code:

<div class="maintitle">[url="{U_VIEW_CAT}"]{CAT_TITLE}[/url]

</div>
<div style="border:1px solid blue;vertical-align:bottom;">
   <div class="nav" style="float:left;clear:right;border:1px solid red;">[url="{U_ALBUM}"]{L_ALBUM_INDEX}[/url]{S_CAT_HIST}</div>
   
   <div style="float:right;border:1px solid green;">[url="{U_UPLOAD_PIC}"][img]{IMG_upload_pic}[/img][/url]</div>
   <br style="clear:both;">
</div>

<table ...>
.....

Und was ist passiert? Nichts. IE und Firefox haben beie so getan als wuerde sie das vertical-align:bottom nicht interessieren :shock:

Greetz
alcaeus

[S2B]

unten bündig geht nicht... leider. :wink: Es gibt imho nur 2 Befehle, die das (teilweise) können:

Code:

#div1 {
  position: absolute;
  bottom: 0px
}

#div2 {
  float: right
}

Beim zweiten gilt das "teilweise" von oben... :wink:

[DGL-luke]

Zitat:

Applies to: inline elements

sagt: http://www.w3.org/TR/REC-CSS1#vertical-align

;)

das is schon so richtig, wie die Browser das machen, was dir bei deinem Problem natürlich überhaupt nix hilft ;)

[Aenogym]

dann würde ich es einfach mal mit <span> innerhalb des <divs> probieren :)

[freak4fun]

Kannst du da keine Tabelle nehmen?

Code:

<table>
  <tr>
    <td>
      Text
    </td>
    <td>
    </td>
    <td> 
      Button
    </td>
  </tr>
</table>

Oder so. :mrgreen:

MfG
freak

[S2B]

Zitat:

Zitat von freak4fun

Kannst du da keine Tabelle nehmen?

Das widerspricht dem Konzept von einem Design ohne Tabellen. :wink:

@alci: Irgendwo hab ich auch mal was von height: 100% für html und body gelesen (dann dürfen die natürlich auch kein margin haben, sonst gibt's Dauerscrollleisten. :wink: ).

[Matze]

Zitat:

Zitat von freak4fun

Kannst du da keine Tabelle nehmen?

Natürlich ginge das, doch er möchte aus guten Gründen von den Tabellen wegkommen. ;)

[alcaeus]

@freak4fun: ja, so habe ich es derzeit, aber bei der Anzahl an HTML-Zeilen die ich habe, will man natuerlich davon wegkommen ;)

Bis jetzt haben alle Tipps leider nicht funktioniert :(
position:absolute;bottom:0px; hat nur dafuer gesorgt, dass die nav-Leiste ganz unten im Browser-Fenster klebte :wall:

Mit dem <span> im <div> hats auch nicht funktioniert, und ich verstehe nicht was height:100% bei html und body bewirken sollen :gruebel:

Greetz
alcaeus

[himitsu]

Zitat:

Zitat von S2B

@alci: Irgendwo hab ich auch mal was von height: 100% für html und body gelesen (dann dürfen die natürlich auch kein margin haben, sonst gibt's Dauerscrollleisten. :wink: ).

Das kommt aber darauf an, in welchem DOCTYPE man das verwendet ('s wird überall etwas anders interpretiert, laut W3C) und was wichtiger ist, welches DOCTYPE der Browser denkt zu erkennen und wie der das interpretiert und darstellt -.-''

height:100% soll angeblich den BODY auf 100% des Bildschirm (was has halt der Desktop für 'ne Höhe hat), oder 100% des anzeigbaren Bereichs im Browser bringen, oder was weiß ich noch, es wird nicht immer das gemacht, was man denk.

[Matze]

@Andy: Also vertical-align wirkt nur bei Inline-Elementen, ist auf <div>, wieso auch immer, folglich nicht anwendbar. Wenn du line-height verstellt, hast du den Text leider auch nur vertikal zentriert. Also eine reine css-Lösung gibt es für dieses Problem imho nicht.

[S2B]

height: 100% bringt nur was, wenn man z.B. etwas ganz unten ans Fenster kleben will (wie auch die position: absolute-Lösung). Die einzige Chance sehe ich bei deinem Fall beim float: right und einem damit verbundenen vertical-align: bottom. Ob das allerdings klappt, kann ich nicht sagen, bei einem meiner Foren (auch mit div-Layout) tritt der gleiche Fehler auf und ich habe ihn bis jetzt noch nicht behoben... :cyclops:

Teste mal sowas:

Code:

div.left {
  width: 50%
}

div.left span {
  vertical-align: bottom
}

div.right {
  width: 50%;
  float: right
}

und das HTML dazu:

Code:

<div>
  <div class="left">
    <span>dein Text</span>
  </div>
  <div class="right">dein Text</div>
  <div style="clear: right"></div>
</div>

Oder vielleicht funktioniert das:

Code:

div.right, div.left {
  width: 50%;
  float: right
}

div.left span {
  vertical-align: bottom
}

(mit dem gleichen HTML-Code)

@himitsu: Richtig, muss man dann halt testen. *grml* :mrgreen:

[Aenogym]

@s2b: das mit dem verschachtelten span dachte ich mir auch so. allerdings bringt's einfach nichts, da er das div nicht hoch genug macht. sprich: span und div sind so hoch, wie die schrift. dann ist das span vertikal am boden ausgerichtet, was optisch genau das gleiche in grün ist.... :(

[S2B]

Zitat:

Zitat von Aenogym

sprich: span und div sind so hoch, wie die schrift.

Naja, aber genau das sollte doch clear: right ändern...

[Aenogym]

okay, obs mit dem clear:right auch so ist, weiß ich jetzt nicht.

[alcaeus]

Moin,

das Problem ist, dass Elemente mit float den Container anscheinend nicht vergroessern :shock:

Soll heissen, wenn ich ein 30px hohes Bild mit float:right; in einem div drin habe, und einen Text mit 10px Hoehe (ohne float), dann wird das div nur so hoch sein, wie es sein muss um den 10px hohen Text unterzubringen :wall:

Naja, nachdem auch mir irgendwan das rumprobieren zum Hals raushaengt, habe ich sowas verwendet:

Code:

<div class="maintitle">[url="{U_VIEW_CAT}"]{CAT_TITLE}[/url]

</div>

<div style="width:100%;text-align:right;">[url="{U_UPLOAD_PIC}"][img]{IMG_upload_pic}[/img][/url]</div>

<div class="nav">[url="{U_ALBUM}"]{L_ALBUM_INDEX}[/url]{S_CAT_HIST}</div>

Und da soll mir nochmal jemand sagen, dass man "mit CSS alles machen kann", oder dass "CSS perfekt ist", wie so manche Fanatiker es gerne tun. Wenigstens hier besteht Aufholbedarf, und diesmal ist es tatsaechlich kein Browserproblem (dass es sowas auch gibt :roll:)

Greetz
alcaeus