[CSS] Bild rechts oben in einer div Box plazieren

[antman]

Guten Morgen,

ich schaffe es einfach nicht ein simples Logo rechts oben in einer Box zu plazieren.

<div class="box">
<img src="../images/logo.png" alt="logo" style="position: relative; top:2px; right:2px;" />
</div>

Was ist daran falsch ?

Danke

[Abraxax]

<div class="box">
    <img src="../images/logo.png" alt="logo" style="float:right;" />
</div>

[antman]

Danke.

Das gibt es nicht. Ich probiere stundenlang sämtliche Kombinationen aus. Und es ist so einfach.

In dieser Box soll ein Menü:

Menüpunkt 1| Menüpunkt 2 | Meüpunkt 3

Am unteren Ran laufen, von links nach rechts. Also die gleiche Art von Problem. Das haut mit dem float dieses mal nicht hin. Das geht ja nur mit links und rechts.

<span id="productmenu"><a href="shop.php">Menüpunkt 1| Menüpunkt 2 | Meüpunkt 3</a></span>

#productmenu
{
bottom: 0px;
}

Das haut nicht hin. Boah, dieses CSS Plazierungsproblem macht mich wahnsinnig. Gibt es hierfür auch wieder so eine einfache Lösung ?

[wahsaga]

Original geschrieben von antman
#productmenu
{
bottom: 0px;
}

wenn du überhaupt keine angabe zu position machst, ist eine angabe zu bottom natürlich witzlos.

[antman]

Hatte das auch schon ausprobiert.
Wenn ich es so mache:

#productmenu
{
position: relative;
bottom: 0px;
}

passiert nix.

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

Setzt mir das Menü ganz unten an den Bildschirmrand.
Es soll aber unten an der Box erscheinen.

text-align geht auch nicht. Weiß echt keine Alternative.

[wahsaga]

position: relative;
bottom: 0px;

ist unfug, da position:relative sich auf die normale position des elementes im dokumentfluss bezieht.

du hast es jetzt also zu seiner normalen unterkante um genau 0 pixel verschoben, hurra :-)

position: absolute;
bottom: 0px;
Setzt mir das Menü ganz unten an den Bildschirmrand.
Es soll aber unten an der Box erscheinen.

Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ, wie die inneren div-Elemente im obigen Beispiel zeigen: relativ nämlich zum Rand des Elternelements.

also, beispiel ansehen, analysieren, verstehen - problem gelöst.

[Abraxax]

ich will mal nicht so sein. aber dann solltest du es mal selber packen @antman

<style type="text/css">
    #box {
        /* border: 1px solid #000; */
        height: 100px;
    }
    
    #box #logo {
        float:right;
        height: 100px;
        width: 200px;
    }
    
    #box #productmenu {
        /* border: 1px solid #000; */
        margin-top: 100px;
    }
    #box #productmenu a
    {
        border: 1px solid #669;
        font: 11px verdana,sans-serif;
        font-weight: bold;
        margin: 2px 2px 0 0;
        padding: 0 2px;
        text-decoration: none;
        color: #666;
    }
    
    #box #productmenu a:hover {
        border: 1px solid #900;
        color: #900;
    }

</style>
<div id="box">
    <img id="logo" src="../images/logo.png" alt="logo" />
    <div id="productmenu">
        <a href="shop.php">Menüpunkt 1</a>
        <a href="shop.php">Menüpunkt 2</a>
        <a href="shop.php">Menüpunkt 3</a>
    </div>
</div>

[antman]

Super!!!

Herrlich. Danke

[Meillo]

Da hast du aber mal Glück gehabt.
Wenn Abraxax mal selbst in die Tasten haut, dann hast du wirklich einen guten Tag erwischt