kostenloser Webspace werbefrei: lima-city


CSS: Probleme bei der Positionierung von Elementen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    n0x3l

    Kostenloser Webspace von n0x3l

    n0x3l hat kostenlosen Webspace.

    Hallo, ich habe mal wieder was mit CSS.

    Hier erstmal mein Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    
    div.eins { position:absolute; top:220px; left:200px; width:250px; height:250px;
          z-index:2; background-color:#ffa; 
    border:solid black 5px;
    }
    
    div.zwei { position:absolute; top:20px; left:20px; width:70px; height:70px;
          z-index:1; background-color:#ff5; 
    border:solid red 5px;
    }
    
    
    </style>
    
    <body>
    
    <div class="eins">
    DIV 1
    </div>
    
    
    <div class="zwei">
    DIV 2
    </div>
    
    
    
    
    
    </body>
    </html>


    Das ist das Ergebnis: http://n0x3l.lima-city.de/positionieren.jpg

    Mein Ziel war es eigentlich, dass das "DIV 2" Element auf dem "DIV 1" Element liegt, aber weiß nicht wo mein Fehler ist.

    div.zwei { position:absolute; top:20px; left:20px; width:70px; height:70px;
          z-index:1; background-color:#ff5; 
    border:solid red 5px;
    }


    Das ist ja absolut und DIV 2 müsste 20px von oben und 20px nach links von DIV 1 entfernt sein. Weil DIV 1 ja das Elternelement ist.
    Ich weiß nicht wo mein Fehler ist. Kann mit jemand weiterhelfen?
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Deine DOM ist falsch... div.eins ist gerade nicht das Elternelement.

    Damit es das Elternelement ist musst du solgendes machen:
    <div class="eins">
    DIV 1
       <div class="zwei">
       DIV 2
       </div>
    </div>
  4. Autor dieses Themas

    n0x3l

    Kostenloser Webspace von n0x3l

    n0x3l hat kostenlosen Webspace.

    Danke, ich weiß gar nicht warum ich so einen Fehler gemacht habe. Und so nah dran!:megarofl:

    Danke dir nikic!
  5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!