Problem mit mittiger Ausrichtung...

[Philip]

Hallo,

So, bin grad beim "Umbau" Seite auf XHTML und hab nun ein kleines CSS-Positionierungs-Problem. Nur mal vorweg: Ich kenn die ganzen Artikel zum Thema CSS-Positionierung in SelfHTML. Dennoch komm ich nicht weiter...

Und zwar: Ich hab ein div, in diesem sind drei weitere divs. Diese drei divs sollen nun vertikal mittig und horizontal nebeneinander im übergeordneten div positioniert sein:

______________________________________________________________
| _________       _____________              ___________       |
||_________|     |_____________|            |___________|      |
|______________________________________________________________|

bisheriger HTML-Code:

<div style="width: 100%; height: 25px; vertikal-align: middle;">
    <div style="float: left; padding-left: 20px;"><a href="#">Link1</a></div>
    <div style="float: left; padding-left: 200px;"><a href="#">Link2</a></div>
    <div style="text-align: right; padding-right: 50px;"><a href="#">Link3</a></div>
</div>

Ich bin inzwischen schon soweit, dass die drei divs auf der gleichen Höhe positioniert sind. Jedoch "kleben" sie trotz des vertical-align: middle am oberen Rand des übergeordneten divs. Wie bekomme ich das jetzt hin??

mfg,
  Philip

[Henning]

Hallo,

Gib den inneren divs mal height:100%, damit sie das äußere div auch komplett ausfüllen.

Gruß,
Henning

[Philip]

Hi, Henning

Hallo,

Gib den inneren divs mal height:100%, damit sie das äußere div auch komplett ausfüllen.

Funktioniert leider auch nicht. :(
Die inneren divs füllen das äußere zwar jetzt voll aus, aber der Text bzw. die Links hängen jetzt am oberen Rand des jeweiligen inneren divs.

Auch height: 100%; vertikal-align: middle; funktioniert nicht

mfg,
  Philip

[Henning]

Hallo,

Auch height: 100%; vertikal-align: middle; funktioniert nicht

---------------------------^
Da soll doch ein c hin, oder?

Gruß,
Henning

[Philip]

Hallo,

Auch height: 100%; vertikal-align: middle; funktioniert nicht
---------------------------^
Da soll doch ein c hin, oder?

Ist nur ein Tippfehler. Getestet hab ichs mit vertical-align: middle;

mfg,
  Philip

[Tim Tepaße]

Hallo Philip,

<div style="width: 100%; height: 25px; vertikal-align: middle;">

Zu vertical-align habe ich vor ein paar Tagen schon was geschrieben.

http://forum.de.selfhtml.org/archiv/2003/6/49499/#m270522

Eine Möglichkeit wäre es also, Deinem div die display-Eigenschaft einer
Tabellenzelle zuzuweisen. Allerdings ist diese Methode etwas kritisch in
Browser, die nicht so ganz standfest auf dem Bein CSS sind.

Die andere Möglichkeit ist es, sich von einer fixen Größe des umrandenden
divs zu verabschieden, zugunsten eines divs, das sich der Größe der
inneren Elemente anpaßt und einen Abstand zu diesen durch den Außen-
bzw Innenabstandes zu regeln. Erfahrungsgemäß ist diese etwas flüssige
Layout ein Denkparadigma, das am Anfang einige Schwierigkeiten macht,
man aber dann nicht mehr missen möchte.

Und nein, Tabellen empfehle ich nicht. Du bist schon auf dem richtigen (1)
Weg, nur leider einem weitverbreiteten Mißverständnis aufgesessen.

(1) Soll heißen: Für mich als richtig erscheinenden.

• Tim

[Philip]

Hallo, Tim

erstmal danke für deine Antwort...

Die andere Möglichkeit ist es, sich von einer fixen Größe des umrandenden
divs zu verabschieden, zugunsten eines divs, das sich der Größe der
inneren Elemente anpaßt und einen Abstand zu diesen durch den Außen-
bzw Innenabstandes zu regeln. Erfahrungsgemäß ist diese etwas flüssige
Layout ein Denkparadigma, das am Anfang einige Schwierigkeiten macht,
man aber dann nicht mehr missen möchte.

hmmm, ehrlich gesagt tut sich nichts, wenn ich margin:auto einsetze. Mit einer padding-Angabe im äußeren div bekomm ichs jetzt zentriert hin, aber was soll das margin: auto; bewirken? Habs mit IE 6.0 und Opera 7.11 getestet...

Ausserdem ist mir noch was komisches aufgefallen: wenn ich dem inneren div (habs zur vereinfachung mal nur mit einem inneren div getestet) eine margin Angabe gebe, z.B. margin: 10px 10px 10px 10px; nimmt er dein Abstand von 10px nur links und rechts, nicht aber oben und unten vom umgebenden div an.

Quellcode:

<div style="background-color: #ffffff;">
  <div style="background-color: #000000; color: #ffffff; text-align:center; margin: 10px 10px 10px 10px;">TEXT</div>
</div>

sieht so aus:
 ____________________________
|   |                    |   |
|___|____________________|___|

sollte aber doch so aussehen:
 ____________________________
|    ____________________    |
|   |                    |   |
|   |____________________|   |
|____________________________|

• Tim

mfg,
  Philip

[Tim Tepaße]

Hallo Philip,

hmmm, ehrlich gesagt tut sich nichts, wenn ich margin:auto einsetze.

Natürlich nicht. Vertikal zählt margin:auto nur dann, wenn es auch etwas
gibt, woran der Browser die Höhe berechnen kann. Also bräuchte bei der
Benutzung von 'auto' das äußere div eine festgelegte Höhe.

Ich meinte aber eher konkrete Maßangaben, nicht den Wert auto.

Mit einer padding-Angabe im äußeren div bekomm ichs jetzt zentriert hin,

Auch vertikal? Na dann ist gut.

Ausserdem ist mir noch was komisches aufgefallen: wenn ich dem inneren div
(..) eine margin Angabe gebe, (..) nimmt er dein Abstand von 10px nur
links und rechts, nicht aber oben und unten vom umgebenden div an.

Kann ich nichtg nachvollziehen, bei mir klappt es problemlos, siehe

http://www.tepasse.org/selfraum/css-aussenabstand-in-verschachtelten-divs.html

Ich vermute daher, daß es eher an einem Quellcodeproblem liegt. Leider
hast Du nicht den ganzen Quellcode veröffentlicht.

• Tim

[Philip]

Hi, Tim

Natürlich nicht. Vertikal zählt margin:auto nur dann, wenn es auch etwas
gibt, woran der Browser die Höhe berechnen kann. Also bräuchte bei der
Benutzung von 'auto' das äußere div eine festgelegte Höhe.

Hab ich probiert - geht nicht. Wahrscheinlich mach ich irgendwas ganz dämliches falsch:

<div style="width: 300px; height: 100px; background-color: red;">
  <div style="margin: auto; background-color: green;">TEXT</div>
</div>

Ich meinte aber eher konkrete Maßangaben, nicht den Wert auto.

Wie gesagt, mit padding im aüßeren div hab ichs ja inzwischen hinbekommen.

Auch vertikal? Na dann ist gut.

Auch vertikal

Ausserdem ist mir noch was komisches aufgefallen: wenn ich dem inneren div
(..) eine margin Angabe gebe, (..) nimmt er dein Abstand von 10px nur
links und rechts, nicht aber oben und unten vom umgebenden div an.

Kann ich nichtg nachvollziehen, bei mir klappt es problemlos,

hmmm, ich hab mir dein Beispiel mal angeschaut. Es lag an der (bei mir) fehlenden width- bzw. height-angabe des äußeren divs. Ich hab angenommen, dass man diese Angabe in dem Zusammenhang nicht braucht, dass sich das äußere div automatisch anpassen würde - anscheinend nicht. Werd wohl noch ein bisschen rumprobieren müssen.

• Tim

mfg,
  Philip

[Ingo]

hi,
wie schon gesagt wurde: mach' das einfach flexibler, z.B. <div style="width: 100%; padding:10px;">
frei nach dem Motto: weniger ist mehr...
Gruß
Ingo