Besser 2 divs oder Ausrichtung der Absätze

[Noreen]

Hallo,

ich hab mal wieder eine kleine Frage...

Ich habe Verschiedene Container ineinander verschachtelt und suche jetzt eine elegante Lösung...

Die ganze Sache sieht so aus:

Code: Alles auswählen

+------+-------------+
| Menu |+-----------+|
|      ||   Bild    ||
|      |+-----------+|
|      ||TLU        ||
|      ||TLU     TRU||
|      |+-----------+|
+------+-------------+


TLU steht für 'Text links unten' und TRU für 'Text rechts unten'.
Ist es 'sinnvoll' die Texte wieder jeweils in ein div zu packen oder kann man (Frau auch... ) die Absätze sinnvoll und elegant so ausrichten, dass man die divs gar nicht braucht?

Vielen Dank für Tipps und Überlegungen,
Noreen

[sejuma]

Viele Wege führen nach Rom!
Wenn es sich bei TRU nur um einen Absatz handelt, würde ich diesem eine entsprechende Klasse zuweisen.
Zwei Divs für TLU und TRU sind aber sicher auch nicht verkehrt.
Nimm das, was dir am zweckmäßigsten und einfachsten erscheint.

[Noreen]

Hallo Sejuma,

ich habe den umschließenden Container auf eine feste Breite gesetzt und den beiden Absätzen folgende Eigenschaften zugewiesen:

Code: Alles auswählen

.tlu {
   float: left;
   bottom: 1px;
}

.tru {
   float: right;
   bottom: 1px;
}


Die horizontale Ausrichtung klappt natürlich. Nur beißt sich offensichtlich float und die bottom - Zuweisung...

Wie könnte man das lösen?

Danke,
Noreen

[sejuma]

Bitte mal einen Link zur Seite.
bottom: 1px nützt ohne relative oder absolute Positionierung nichts.

[Noreen]

Hallo Sejuma,

http://www.nmorgenstern.de/neu/artlab_01.htm

Danke schon mal!!

LG,
Noreen

[sejuma]

Ich würde an deiner Stelle nochmal ganz neu anfangen.
Die vielen absoluten und relativen Positionierungen taugen nichts und sind auch nicht erforderlich.

Nimm einen #wrapper und zentriere ihn wie hier beschrieben:
http://www.ohne-css.gehts-gar.net/0001.php
http://www.ohne-css.gehts-gar.net/0002.php

Darein setze zwei links gefloatete Divs mit entsprechenden Breiten und in diese Divs deren Inhalt.
Abstände erreichst du am besten mit margin-Angaben und nicht mit absoluten Positionierungen.

[Noreen]

Hallo Sejuma,

erst mal ganz vielen herzlichen Dank!

Ich hab nochmal neu angefangen, dabei treten aber genau die Probleme auf, vor denen ich mich eigentlich immer drücken wollte...

http://www.nmorgenstern.de/neu/artlab_02.htm

Ich hab erst mal zwei Fragen:
Ich möchte die Position der Liste über den Abstand von unten definieren. Und wie 'krieg' ich den Content - Block hoch...?

Vielen Dank!
LG, Noreen

[Noreen]

P.S. Kann man die beiden divs überhaupt alle beiden links floaten, oder muss nicht der rechte rechts gefloatet werden?

[sejuma]

Geht beides.
Als weitere Variante kannst du nur den ersten floaten und dem zweiten einen margin-eft-Wert entsprechend der Gesamtbreite des ersten geben.

[Noreen]

Das zweite hab ich gerade 'herausgefunden' sprich probiert...

Danke.

[Noreen]

Bleibt noch die Frage: Wie kann ich die Liste 'von unten' ausrichten - also die Position über den Abstand von unten festlegen?

Noreen

[sejuma]

Da kommen die positions wieder ins Spiel, diesmal aber zweckentsprechend:
Gib dem linken Div ein

Code: Alles auswählen

position: relative;

Und der Liste ein

Code: Alles auswählen

position: absolute; bottom: 0px;

bzw. einen Pixelwert deiner Wahl.
Siehe http://www.ohne-css.gehts-gar.net/0046.php

[Noreen]

hmm, ich hab's geändert und es richtet sich leider nicht unten aus...

Woran liegt das?

Noreen

[sejuma]

Versuch's mal so:

Code: Alles auswählen

#menu {
   position: absolute;
        bottom: 20px;
   float:left;
   width: 270px;
   text-align: right;
}

[Noreen]

hmm, das hilft nicht wirklich, da er das ganze div nach oben schiebt...

Ähm, jetzt wird mir auch klar, was ich falsch gemacht habe...
Ich hab die Höhe vergessen...
Hab das mal geändert... Aber leider bindet er es immer noch nicht unten an... ??

Noreen

[Noreen]

soo... Ich hab jetzt mal noch ein wenig probiert.

Im rechten div geht die absolute Positionierung. Nur die Liste im linken div will einfach nicht nach unten....

http://www.nmorgenstern.de/neu/artlab_02.htm

Für Tipps wäre ich wieder dankbar...
Noreen

[sejuma]

Code: Alles auswählen

#menu ul { position: absolute; bottom: 0; font-size: 13px; margin: 0 0 0 95px;}

[Noreen]

Hallo Sejuma,

das klappt (natürlich... ).

Eine -erst mal- letzte Frage:
Warum funktioniert das, wenn ich das auf die Liste anwende und warum nicht, wenn ich es auf die Klasse anwende?
'Überschreiben' die Eigenschaften der Liste die Klasseneigenschaften...?

Danke für deine Hilfe!!!
Noreen

[sejuma]

ID's haben eine höhere Spezifität als Klassen.
http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet