Positionierungsfrage

    Hallo zusammen,

    folgende Problemstellung:

    Ein Layer soll innerhalb seines Eltern-Layers stets in der unteren linken Ecke angezeigt werden. Hierbei soll die Unterkante dieses Layers stets mit der Unterkante des Eltern-Layers bündig sein.

    bottom: 0px; führt zu einer Positionierung, bei der die Oberkante des Layers an der Unterkante des Eltern-Layers anschließt. Eine Positionierung über top: Xpx; oder bottom: -Xpx; scheidet aus, da sich die Höhe der Inhalte des Layers (Navigation in Listenform) - z. B. bei einer Erhöhung der Schriftgröße über das Browser-Menü - ändern kann.

    Ist wahrscheinlich ganz einfach aber irgendwie stehe ich bei diesem Punkt auf dem Schlauch.

    Gruß und Danke

    Olaf

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    könntest du uns nicht einen link zu der betroffenen seite geben?
    wäre ein vielfaches einfacher für leute die helfen wollen :mrgreen:

    Zitat von Koerb

    .... Eine Positionierung über top: Xpx; oder bottom: -Xpx; scheidet aus, da sich die Höhe der Inhalte des Layers (Navigation in Listenform) - z. B. bei einer Erhöhung der Schriftgröße über das Browser-Menü - ändern kann....


    wieso?

    erlaubt sind numerische Angaben

    px em % und % ;)

    lg

    Na dann ein bißchen konkreter...

    Na dann wollen wir das geschilderte Problem mal konkretisieren:

    Siehe zunächst: http://www.stephani-druecker.de/stephani_neu

    Ist der aktuelle Arbeitsstand zum Weblog für meine Freundin.

    Oben ein Logo-Container, darunter ein Container mit einem größeren Bild und darunter die Seiten-Navigation in Listen-Form in einem separaten Container, der als Hintergrundbild einen ergänzenden Abschnitt des größeren Bildes enthält.

    Nun möchte ich das große Header-Bild bei jedem Aufruf des Logs nach dem Zufallsprinzip austauschen. Dies ist allerdings in der o. g. aktuellen Konstellation schwierig, da immer auch das gerade passende Hintergrundbild im Navigations-Container eingesteuert werden müßte.

    Vor diesem Hintergrund meine zuvor gestellte Frage.

    Gruß

    Olaf

    Hi Olaf,
    ich versuch mal ob ich den ersten Post richtig verstanden habe ;)
    Folgende Konstellation, HTML:

    HTML
    <div class="eltern">
TEXT usw.................
<div class="kind">
<img src.... />
</div>
</div>


    dann in die CSS:

    HTML
    .eltern{
position:relative;
}
.kind{
position:absolute;
bottom:0;
left:0;
}


    Ich würds aber mit einem Hintergrundbild machen.

    Wie Olaf schon schrieb, positioniere das Elternelement relativ. Dann kannst du Kindelemente daran absolut positionieren.

    Wenn du zur Positionierung "bottom: " nimmst, wird die unter linke ecke des zu positionierenden Elements als Ankerpunkt genommen.

    Was mir außerdem aufgefallen ist:
    du steckst die Navigation in ein weiteres DIV. Das ist unnötig, da du das Listenelement ebenso formatieren kannst.
    des weiteren arbeitetest du bei einem img-element mit den attributen "width" und "height". Diese dürfen keine Maßangabe enthalten, es sei denn es sind "%". hier würde ich auch mit css arbeiten.

    Grüße
    Mo

    Deutliche Fortschritte - aber der MS IE 6...

    Hallo zusammen,

    habe jetzt den Eltern-Layer:

    #thepicture {
    width: auto;
    height: auto;
    background-color: transparent;
    margin: 0;
    border-top: 6px solid #7F8266;
    border-right: 1px solid #7F8266;
    border-left: 1px solid #7F8266;
    border-bottom: 1px solid #7F8266;
    padding: 0;
    position: relative;
    }

    und darin die Listen-Navigation:

    #thepicture ul {
    padding: 0;
    margin: 0;
    background-color: transparent;
    width: auto;
    border: 0;
    bottom: 0px;
    left: 0px;
    position: absolute;
    }

    #thepicture ul li {
    display: inline;
    padding: 0;
    margin: 0;
    }

    #thepicture ul li a {
    padding: 0.2em 1em;
    background-color: #8BA6D5;
    color: #FFFFFF;
    float: left;
    text-decoration: none;
    border-right: 1px solid #5B7397;
    font-family: verdana,lucida,sans-serif;
    font-size: 10px;
    }

    #thepicture ul li a:hover {
    background-color: #7F8266;
    color: white;
    }

    Funktioniert nun in Opera und Mozilla wunderbar, nur im MS IE 6 wird die Navigation nicht unten im Eltern-Layer, sondern am unteren Bildschirmrand angezeigt.

    Woran könnte das liegen?

    Gruß

    Olaf

    Ich versteh nicht wo du hinwillst :(
    #thepicture enthält nur ein Bild welches nicht vorhanden ist! Deine ganzen CSS treffen ins Leere denn #thepicture ul existiert nicht.
    Wenn du diese UL treffen willst dann über #navcontainer. Die Eltern-Kind-Beziehung musst du dir vorstellen als wenn die Mutter noch das Kind im Bauch hat :p und nicht beide nebeneinader stehen.

    Na das ist so...

    Hallo Namensvetter,

    läuft bei mir lokal auf dem Rechner, d. h. im online einsehbaren eigentlichen Blog-Entwurf habe ich es noch nicht nachgezogen.

    Auf den Layer "navcontainer" habe ich mittlerweile gemäß Vorschlag von Morris verzichtet und (siehe in meinem vorherigen Eintrag ausgewiesene css) die Liste nun absolut im Layer "thepicture" platziert. Hierbei tritt das beschriebene Problem auf.

    Gruß

    Olaf

    Jo, das ist unbegreiflich!!! Kann dies Problem nicht auf die Schnelle lösen. Als Alternative schlag ich dir folgendes vor. Entferne das Bild aus DIV #thepicture, dann dies in deine CSS:


    Du ist sehr viel width/height:auto; drinn, das kann alles wech. Das machen die sowieso, brauchst du nicht sagen. Dann wird die CSS 2x eingebunden, einmal reicht ;)

    Es geht voran - aber...

    Hallo,

    habe das Problem nun mit einem Hack schon fast gelöst:

    *html #thepicture ul {
    position: relative;
    bottom: 18px;
    }

    Ist o.k., da die Schriftgrößenskalierung im MS IE eh nicht funzt.

    Nun taucht allerdings unter dem Bild im Header noch ein unerklärlicher 3-Pixel-Rand auf. Habe dem Layer "thepicture" mal die Hintergrundfarbe grün gegeben, um das zu verdeutlichen. Ein Hack mit padding-bottom: -3px etc. hat nicht geholfen.

    Ein Einsteuern des Bilds als Hintergrundbild kommt eigentlich nicht in Frage, da ich dann den Zufalls-Bild-Wechsel via php nur sehr aufwendig realisieren könnte.

    Gruß und Danke

    Olaf

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden