Ingo Siemon: Problem mit position:absolut

Beitrag lesen

SELF-Forum

Problem mit position:absolut

Ingo Siemon Homepage des Autors
– Informationen zu den Bewertungsregeln

Guten Tag

Ich versuche mich nun das erste mal in Positionierung von Elementen
mittels CSS. Aber leider habe ich gleich schon mein erstes Problem.

Wie in SelfHTML ja zu lesen, bezieht sich doch die Position
eines zu positionierenden Elements mit "position:absolut"
an den Rändern des Elternelements.
Das müsste ich doch richtig verstanden haben ... oder nicht?

Ich frage dass, weil ich hier gerade versuche, ein Bild
mit "position:absolute; top:0px; left:0px" testweise zu positionieren.
Aber das Bild klebt dann immer in der linken oberen Browserecke.
Obwohl es von einer div-Box umschlossen wird.

Online kann man sich das hier mal ansehen:
http://spaceart.de/_Test/listen/___test.htm
(Unten habe ich dann auch nochmal den Code gepostet)
Es geht dabei um das Bild "riddler.gif".

Eigentlich müsste sich doch das Bild an der umschliessenden
"inhalt"-Box orientieren und dann eben über dem grauen SPACEart-Logo erscheinen.

Wo ist denn da mein Denkfehler?
Über Hilfe freue ich mich natürlich wieder riesig :)

Gruß
Ingo

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
  
<head>  
  
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />  
  
<link rel="alternate" type="application/rss+xml" title="SPACEart RSS-Newsfeed" href="http://spaceart.de/SPACEart.xml" />  
  
<link rel="stylesheet" type="text/css" media="screen" href="../css-standard.css" />  
  
<title>SPACEart - SciFi + Fantasy Modelle - A</title>  
  
</head>  
<body>  
  
<div id="seite">  
  
 <div id="navi">  
  <a id="logo" href="../index.htm"><img src="../bilder/logo-1.gif" alt="zur Startseite" title="zur Startseite" /></a>  
  <dl>  
   <dt>Shop</dt>  
   <dd><a href="neuheiten.htm">Neuheiten</a></dd>  
  </dl>  
 </div>  
  
 <div id="inhalt">  
  
  <h1>SciFi + Fantasy Modelle</h1>  
  
  <p>Modell-Bausatz = Bauen und Bemalen erforderlich.<br />Fertig-Modelle = Komplett fertiges Modell.</p>  
  
        <img style="position:absolute; top:0px; left:0px" src="../bilder/riddler.gif" />  
  
        <h2>Muster-Filmtitel</h2>  
        <ul class="artikelbox">  
         <li>  
             <a href="../produkte/_muster-a.htm"><strong>Muster-Modell</strong><br />Modell-Bausatz, Resin (Hartplastik), 1/1 (Originalgröße)</a>  
            </li>  
        </ul>  
  
 </div>  
  
    <div id="ende">  
  BlaBlaBla  
 </div>  
  
</div>
Beitrag melden
–
Informationen zu den Bewertungsregeln