XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   wie je ein Span oben und unten in einem div variabler Höhe ausrichten? (http://xhtmlforum.de/showthread.php?t=69736)

ZENeca 18.07.2013 13:24

wie je ein Span oben und unten in einem div variabler Höhe ausrichten?
 
Hallo Leute,

also, ich habe vor in einem div-container ohne bestimmte höhe oben und unten links
ein Objekt zu plazieren und mir will es irgend wie nicht gelingen :(

Ich habe jetzt einiges ausprobiert, DIVs verschieden verschachtelt, andere Elemente nutzen,
andere CSS-eigenschaften und nach meinem Verständnis dürfte der folgende Ansatz nicht ganz falsch sein

jsFiddle

Im Prinzip ist mir die Lösung fast egal, nur der rechte Block sollte eine Tabelle bleiben
und ich weiß auch, daß das äußerste div eigentlich nicht nötig ist,
verstehe aber dennoch nicht warum es sich nicht um das untergeordnete div legt.

als reine Tabellenlösung habe ich es hinbekommen,
bin mir aber noch nicht so sicher, ob mir das wirklich weiter hilft,
da ich die „rechte Seite“ (ursprüngliche Tabelle) ein und ausblenden können will
Und besonders elegant ist es auch nicht, da die linke Seite mit den SPANs
eigentlich mit der Rechtenseite (Tabelle) logisch nicht viel zu tun hat,
außer daß sie nebeneinander angeordnet sind

jsFiddle

Danke und einen lieben Gruß
Zen

Manfred62 18.07.2013 13:59

Code ergänzen
Code:

        #left  {
                display: table-cell;
                float: left;
                border: 2px solid green;
                position: relative;
        }
        #hallo  {
                border: 1px solid red;
                position: absolute;
                top: 0;
        }
        #nase  {
                border: 1px solid pink;
                position: absolute;
                bottom: 0;
        }

Zitat:

verstehe aber dennoch nicht warum es sich nicht um das untergeordnete div legt.
weil die innenliegenden floats nicht gecleart werden (also entweder #cover floaten, oder innen clearen).

ZENeca 19.07.2013 03:59

Hi Manfred,

vorab erst mal heißen Dank ob deiner Antwort,
aber eigentlich sollten die beiden spans außerhalb der Tabelle stehen
habe es gerade mal mit einem recht uneleganten zusatz im

#right {
.......
padding-left:40px;
}

gelöst, das geht sicher besser :|

ich hatte es zwischenzeitlich auch mal mit absolute bottom 0
probiert, mir war aber nicht klar, daß man dazu das übergeordnete Element
mit position:relative belegen muß, dachte bei verwendung von "absolute"
wird immer das übergeordnete Element herangezogen.
warum sollte man sonst etwas verschachteln, wenn man es
am Schluß eh absolut positioniert?
besten Dank für den kleinen Aha-Effekt :)

Dank & Gruß
Zen


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:25 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023