Benötige Hilfe beim Layout

blizzart88 · 08.02.2011

Hallo Leute,

ich brauche mal eure Hilfe. Ich möchte das Layout einer Website komplett in CSS schreiben. Soweit sogut. Ich habe einen Bereich (alos div) für den Header, ein div für die Navigationsleiste unter dem Header und einen Container für den Inhalt und eine vertikale Navigation darunter.

Den Inhalt möchte ich mit float nebeneinander setzen. Leider scheint das nicht zu funktionieren, denn die divs für die vertikale Navi und den Inhalt werden nicht angezeigt. Außerdem kann ich, wenn ich einfach in den divbereich reinschreibe (z.B. den div für die Navi) einfach über den Rand hinaus weiterschreiben.

Ich habe hier mal den CSS-Code und den Seitenquelltext eingefügt:

Code:

body{background-color:#004f2f}

/* Seitenlogo */

#top{position:relative;
     width:960px; height:200px;
     margin: 0px auto;
     bottom-margin: 0px;
     border: none;
     background-color:#545454;
     background-image:url(grafik/borderbackgr.jpg);
     background-repeat:no-repeat;
     background-position: top left;
     background-attachment:fixed;
}

/* Navigation unterhalb des Logos */

#topnavi{position:relative;
         width:960px; height:50px;
     margin: 0px auto;
     border: none;
         background-color:black;
         background-image:url(grafik/back001.jpg);
     background-position: top left;
         background-repeat:repeat-x;
         background-attachment:fixed;
         overflow:hidden;
}

/* Container für Seiteninhalt */

#inhalt-container{position:relative;
               width:960px; height:900px;
              margin: 0px auto;
               border: none;
               background-color:#545454;
               background-image:url('grafik/borderbackgr.jpg');
               background-repeat:no-repeat;
               background-position: top left;
               background-attachment:fixed;
}



#vertnavicontainer {float: left;
            width: 200px;
            heigth: 900px;
            margin: 0px auto;
            border: none;
                 background-color:red;
}



#content {float: right;
          width: 760px;
          heigth: 900px;
          margin: 0px auto;
          border: none;
           background-color:black;
}


#clearboth {clear: both}

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>XXXXXX</title>

<link href="css/css.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/navi.css" rel="stylesheet" type="text/css" media="screen" />

</head>


<body>

<div id="top"></div>

<div id="topnavi"></div>

<div id="inhalt-container">

    <div id="vertnavicontainer"></div>

    <div id="content"></div>

    <div id="clearboth"></div>

</div>


</body>

</html>

Ich hoffe ich habe mich einigermaßen verständlich ausgedrückt und danke euch schonmal im Voraus.

aliasltb · 08.02.2011

AW: Benötige Hilfe beim Layout

Ich habe es jetzt noch nicht ausprobiert, aber intuitiv fällt mir auf, dass ich den float vom Content nicht auf float:right, sondern auch auf float:left setzen würde.

Wenn die beiden Container auch nicht angezeigt werden, dann schreib mal etwas zwischen die beiden Div-Tags etwas rein. Dann siehst du ja beim anzeigen wo sich die Divs auf der Seite befinden. So prüfe ich es zumindest immer, wenn ein Div nicht (so) dargestellt wird, wie ich möchte.

Außerdem verstehe ich nicht wieso du jedem Bereich margin: 0 auto gibst.
Umschließe doch top, topnavi, vertnavi und content mit einem Wrapper und gib dem dann die Werte position relative und margin: 0 auto. Dann wird alles zentriert dargestellt, es ist weniger Code und ist sauberer bzw. führt nicht zu Fehlern.

Evilmachine · 08.02.2011

AW: Benötige Hilfe beim Layout

Ein   im div wirkt oft wunder.

Hatte das auch schon das eine division erst mit Inhalt angezeigt wurde.

Oder halt alternativ Blindtext. Da sieht man dann auch gleich wie es hinterher wirkt.

DieWaldfeee · 08.02.2011

AW: Benötige Hilfe beim Layout

Hi!
#content, #vertnavicontainer {margin:0 px,)
#clearboth ? eher .clearfix ! und nicht mal dass ist hier von nöten.
nebenbei sollstest du deine "namensgebungen" überdenken um nicht paar klassen später in einem labyrinth zu enden.

sokie · 08.02.2011

AW: Benötige Hilfe beim Layout

ich finde auch, dass du dir das Leben leichter machen würdest, wenn du in den content auch etwas hineinschreibst (und wenns nur das wort "content" ist. ich mache es persönlich so, dass ich auch die navigationslisten schon mit in das Grundgerüst schreibe.
Entgegen meiner Vorrednerin ist das Einschieben des "clear-Elements" bei deinem Konztept zwingend wichtig, was du ja auch berücksichtigt hast.

blizzart88 · 09.02.2011

AW: Benötige Hilfe beim Layout

Danke erstmal für eure Hilfe!

Was ich nicht ganz verstehe, obwohl ich hier

Code:

#inhalt-container{position:relative;
               width:960px; height:900px;
              margin: 0px auto;
               border: none;
               background-color:#545454;
               background-image:url('grafik/borderbackgr.jpg');
               background-repeat:no-repeat;
               background-position: top left;
               background-attachment:fixed;
}



#vertnavicontainer {float: left;
            width: 200px;
            heigth: 900px;
            margin: 0px auto;
            border: none;
                 background-color:red;
}



#content {float: right;
          width: 760px;
          heigth: 900px;
          margin: 0px auto;
          border: none;
           background-color:black;

den divs eine Höhe vorgebe, werden sie im Browser (zumindest nicht im FF) nicht angezeigt. Woran liegt das? Mit dem Header funktioniert das ja auch.

blizzart88 · 09.02.2011

AW: Benötige Hilfe beim Layout

Hat sich erledigt, hab´s mit min-height gelöst.