Thorsten S.: Problem mit position bzw. Verschachtelung von divs

Beitrag lesen

SELF-Forum

Problem mit position bzw. Verschachtelung von divs

Thorsten S.
– Informationen zu den Bewertungsregeln

Danke schonmal an Martin und Gunnar! Vor allem habe ich mir jetzt mal das floaten näher angesehen und festgestellt, dass das gar nicht so schwirig zu verstehen ist und man so auf viele absolute Positionierungen verzichten kann.

Andererseits ist mein Problem aber noch nicht ganz gelöst, ich verstehe einfach nicht, wann ein Element als Kindelement betrachtet wird - das Elternelement also erst unter dem Kindelement endet - und wann nicht. Wieso ist bei folgendem Quelltext die ul#navigation unterhalb des #container1? Im HTML-Teil wird #navigation von #container1 umschlossen ...

<head>

<style type="text/css">

body {
            background-color: #333333;
}

#container1 {
            width: 750px;
            margin: 5px auto 0px auto;
            border: 2px solid green;
}

ul#navigation {
            text-align: center;
            font-variant: small-caps;
            margin: 0px 15px 0px 250px;
            padding: 0px;
            background-color: black;
}

ul#navigation li {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            float: left;
}

ul#navigation a:link, ul#navigation a:visited, ul#navigation a:active {
            text-decoration: none;
            padding: 0px 10px 0px 10px;
            background-color: black;
            color:white;
}

ul#navigation a:hover {
            text-decoration: none;
            padding: 0px 10px 0px 10px;
            background-color: white;
            color: black;
}

</style>

</head>

<body>

<div id="container1">

<ul id="navigation">
     <li><a href="nochnichts.html">aktuell</a></li>
     <li><a href="nochnichts.html">eulenbiss</a></li>
     <li><a href="nochnichts.html">hörproben</a></li>
     <li><a href="nochnichts.html">bilder</a></li>
     <li><a href="nochnichts.html">kontakt</a></li>
     <li><a href="nochnichts.html">links</a></li>
</ul>

</div>

</body>

Beitrag melden
–
Informationen zu den Bewertungsregeln