XHTMLforum - Layout | Position

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Layout | Position | Wrapper (http://xhtmlforum.de/showthread.php?t=58797)

Layout | Position | Wrapper

Liebe XHTML Gemeinde,

es ist nun schon etwa 8 Jahre her, als ich meine letzte Homepage gebastelt habe und seitdem hat sich wirklich viel getan :)
Ich arbeite gerade an einer neuen Portfolio Website und diesmal zum erstenmal mit CSS. Ich bin begeistert soweit, habe jedoch ein Problem mit dem Positionieren meiner divs.

Folgendes Problem:
Ich habe einen #wrapper div der die ganzen anderen divs umschliessen soll, sodass ich am ende einen footer einbauen kann. Leider umschliesst mein wrapper garnichts, da ich mit absoluten Positionen gearbeitet habe. Nun folgende Frage: Was wäre der eleganteste Weg mein Layout zu gestallten (ohne absolute Positionen), sodass der wrapper meine anderen divs umschliesst? Wenn ich mit floats arbeite dann schliesst der wrapper auch nicht.

Und unabhängig davon würde ich gerne wissen ob mein code soweit logisch ist oder ob ich etwas ändern sollte.

Vielen Dank schonmal!

Hier mein Quelltext:

HTML-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>

        <title>dannylee :: film</title>

        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

        <style type="text/css">



body {

        background-color: #FFFFFF;

        color: #666666;

        font-family: "Times New Roman", Times, Serif;

        font-size: 12px;

        height: 100%;

        width: 100%;

        margin:0;

        padding:0;

}



a:link, a:visited {

        color: #000000;

        text-decoration:none;

}



a:hover, a:active {

        color: #C4151B;

        text-decoration:underline;

}



#wrapper {

        position: relative;

        width: 960px;

        margin: 0 auto;

}



#header {

        position: absolute;

        top: 25px;

        width: 960px;

        height: 32px;

}



#navigation {

        position: absolute;

        top: 81px;

        width: 960px;

        height: 15px;

        border-bottom: 1px solid #BFBFBF;

}

#navigation a { 

        margin: 0 30px 1px 0;  

          text-decoration: none;  

          font-family: helvetica;

          color: #000000;

} 

 

#navigation a:hover, a:active {  

        color: #0066FF;

} 



#content_container {

        position: absolute;

        top: 118px;

        width: 960px;

        height: 430px;

}



#footer {

        clear: both;

        width: 960px;

        height: 15px;

}



</style>

</head>



<body>

<div id="wrapper">

<!-- ================================ BEGIN HEADER -->

        <div id="header">

                <a href="index.html"><img width="159" height="32" border="none" alt="home" src="logo.jpg"></a>        

        </div>

<!-- ================================ END HEADER -->



<!-- ================================ BEGIN NAVIGATION -->

        <div id="navigation"> 

                   <a href="#">FILMS</a>

                   <a href="#">PROJECTS</a> 

                   <a href="#">ABOUT</a>

                   <a href="#">CONTACT</a>  

        </div>

<!-- ================================ END NAVIGATION -->



<!-- ================================ BEGIN CONTENT CONTAINER -->

        <div id="content_container">

                <img src="slide1.jpg" />

        </div>

<!-- ================================ END CONTENT CONTAINER -->

                        

</div>

</body>

</html>

Zitat:

Zitat von danzo (Beitrag 447696)

Wenn ich mit floats arbeite dann schliesst der wrapper auch nicht.

Unter FAQ Punkt 2 kannst du nachlesen, wie Floats eingeschlossen werden können.
Solange du absolut positionierst wirst du dein Ziel nicht erreichen.
Wobei ich bei deinem Code bisher weder für Positionierung noch für Float eine Notwendigkeit erkennen kann.

Lies doch mal was zu semantischem Markup. Eine Navigation gehört in eine Liste.

hey fricca,

danke für die Links. Die Navigation habe ich jetzt als Liste umgeschrieben.
Hat gut geklappt.

Was würdest Du denn anstelle von Positionierungen und Floats empfehlen?

Danke und Gruß
Danzo

Zitat:

Zitat von danzo (Beitrag 447706)

Was würdest Du denn anstelle von Positionierungen und Floats empfehlen?

Gar nichts.
Blockelemente ordnen sich ganz von selbst untereinander an.
Für Abstände gibt es Margin und Padding.

Float brauchst du, wenn du Bereiche nebeneinander stellen willst. Davon kann ich bei dir nichts sehen.

Ich empfehle dir das Buch "Little Boxes" als Einstiegslektüre.

Zitat:

Zitat von danzo (Beitrag 447706)

Was würdest Du denn anstelle von Positionierungen und Floats empfehlen?

Man kann Positionierungen und Floats ruhig verwenden, man sollte es nur vorher verstehen. Wenn dir Friccas Verweis auf die FAQ nicht ausreicht, hier ein paar Direktlinks zu den entsprechenden Kapiteln in der Online-Version von Little Boxes 1:

Danach geht es weiter mit Kapitel 14. Dort werden vier Methoden zum Umschließen von gefloateten Elementen erklärt.