Brauche Hilfe mit Layout

blizzart · 8 Februar 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.

prm · 8 Februar 2011

Wozu verwendest du "position: relative"? Falls du das nicht weißt, dann lösche es.
Bei #content kannst du die float-Angabe weglassen. Gib ihm dafür einen margin-left-Wert von mind. 200px entsprechend der navibreite.

Wenn der Text über den Rand hinaus geht, dann liegt es vermutlich daran, dass du ihm keine Möglichkeit zum Umbruch gibst.
Füge also Leerzeichen ein, so wir bei ganz normalen Sätzen auch.

Sollten dann noch Probleme auftreten: bitte mal einen Link zur Seite, damit man alles im Zusammenhang sieht.

Brauche Hilfe mit Layout

blizzart

Mitglied

prm

Aktives Mitglied

Neueste Beiträge