Luke: DIV soll über der Seite schweben

...nein nein, ich will keine nervige werbung einblenden, gott bewahre ;)!

Ich will dass ein icon rechts oben in meinem zentrierten layout angezeigt wird. Da es sich aber vertikal über mehrere divs spannt, und auch noch rechts über die eigentliche (zentrierte) seite hinausragt, dachte ich, die einfachste lösung wäre das teil in ein div zu packen, und diesen an der gewünschten stelle über den anderen divs zu positionieren. Mein versuch war

HTML

<div id="wrapper">
 <div id="header">
  <div id="blogtitlecontainer"><h1 class="blogtitle">Insanely Cool Blog</h1></div>
  <div id="blogicon"></div>
  <div id="blogsubtitle">The content of this blog is insanely cool</div>
 </div>

 weiterer code
</div>

CSS

#header #blogicon {
 background-image: url('images/headericon_male.gif');
 width: 101px;
 height: 98px;
 position: relative;
 top: 6px;
 left: 744px;
 z-index: 10;
}

Nur jetzt ordnet der das icon noch "inline" in die Seite ein, das icon sprengt also das layout anstatt über ihm zu schweben. Das problem ist, benutze ich "position: absolute;" funktioniert es zwar (das schweben), aber das icon soll ja relativ zu seinem elternelement positioniert werden, da das layout ja zentriert ist. Weiß jemand rat?

  1. Hi,

    Nur jetzt ordnet der das icon noch "inline" in die Seite ein,

    block-level. Inline ist etwas anderes.

    Das problem ist, benutze ich "position: absolute;" funktioniert es zwar (das schweben), aber das icon soll ja relativ zu seinem elternelement positioniert werden, da das layout ja zentriert ist. Weiß jemand rat?

    <Gebetsmuehle>
    Die absolute Positionierung richtet sich nach dem innersten Vorfahrenelement, welches eine von "static" unterschiedliche position-Angabe besitzt, bei Nichtvorhandensein eines solchen nach dem Viewport.
    </Gebetsmuehle>

    Wenn Du etwas rechts ausrichten möchtest, bietet es sich übrigens nicht an, die left-Eigenschaft zu verwenden.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. <Gebetsmuehle> Die absolute Positionierung richtet sich nach dem innersten Vorfahrenelement, welches eine von "static" unterschiedliche position-Angabe besitzt, bei Nichtvorhandensein eines solchen nach dem Viewport. </Gebetsmuehle>

      Gut ok. Wusste nicht dass man dem Elternelement noch explitiz ne position-eigenschaft geben muss. Danke.

      1. Hi,

        Gut ok. Wusste nicht dass man dem Elternelement noch explitiz ne position-eigenschaft geben muss. Danke.

        musst Du ja auch nicht. Sondern dem Vorfahrenelement, nach welchem sich die absolute Positionierung ausrichten soll. Ob das nun Vater, Großvater, Uropa oder Adam persönlich ist, das entscheidest Du.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes