Homepage mit CSS

Flusenkopf

Hi,
ich bastel grad an einer Homepage und die soll von der Aufteilung so aussehen:
oben Header
dann Content, in dem Content ein Menü und unten kommt der Footer
Das Menü soll aber bis unten zum Footer gehen, im Moment ist das noch vom Text eingeschlossen;
[Blockierte Grafik: http://img186.imagevenue.com/loc423/th_42482_Untitled-2_122_423lo.jpg]

Aber der Text soll wie gesagt nur linear nach unten fließen...weiß jemand, wie ich das hinbekommen kann?

Die css-Datei sieht im Moment so aus:

Code

/*-- Bodylayout--*/






#body {


	font-family: Verdana;


	margin-bottom:0px;


	margin-top:0px;


	margin-left:0px;


	margin-right:0px;






}






/*-- Header--*/






#header {


	width:750px;


	height:80px;


	line-height:80px;


	margin:auto;


	background-color:#003333;


}






/*-- Menu--*/






#menu {


	width:190px;


	float:left;


	margin:auto;


}






#menu ul li{


	list-style-type:none;






}






#menu ul li:hover {


	text-decoration:overline;






}








/*-- Content--*/






#content {


	width:750px;


	margin:auto;


}






/*-- Footer--*/






#footer {


	width:750px;


	margin:auto;


	background-color:#000000;




}






/*-- Submenu--*/






#submenu {


	padding:0px;


	margin:0px;


	


}






#submenu ul li{


	list-style-type:none;


	list-style-position:inside;


	float:left;




}








a.submenu {

	padding-left: 10px;	


	color:#000099;






}






a.submenu:hover {


	color:#FF00FF;


}






#placeholder
{


	width:190px;


	float:left;


	margin:auto;


}

Alles anzeigen

Freue mich auf hilfreiche Antworten...
MfG Fluse

K.Y.L.T.

Zeig mal wie du die Container benutzt bitte, also deinen hp Code

Flusenkopf

Das sieht so aus, hab die unwichtigen Sachen rausgenommen;

HTML

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>


<body id="body">
<div id="header"></div>
<div id="content">
<div id="menu" height="100%">
<ul>
        [*][url='#']Menüpunkt 1[/url]
        [*][url='#']Menüpunkt 2[/url]
        [*][url='#']Menüpunkt 3[/url]
        [*][url='#']Menüpunkt 4[/url]
        [*][url='#']Menüpunkt 5[/url]
[/list]
</div>
</div>
<div id="content">
TEXT
<div id="footer">
<div id="submenu">
<ul>
        [*][url='#']Impressum[/url]
        [*][url='#']AGB[/url]
        [*][url='#']Design by[/url]
[/list]
</div>
</div>


</body>


</html>

Alles anzeigen

K.Y.L.T.

Hier das wäre eine Lösungsidee, ist noch nicht ganz ausgereift, kannst du ja mal testen.

Die CSS

Code

*-- Bodylayout--*/






#body {


   font-family: Verdana;


   margin-bottom:0px;


   margin-top:0px;


   margin-left:0px;


   margin-right:0px;






}






/*-- Header--*/






#header {


   width:750px;


   height:80px;


   line-height:80px;


   margin:auto;


   background-color:#003333;


   position:absolute;
   left:25%;
   top:0;
}






/*-- Menu--*/






#menu {


   width:190px;


   float:left;


   margin:auto;


}






#menu ul li{


   list-style-type:none;






}






#menu ul li:hover {


   text-decoration:overline;






}








/*-- Content--*/






#content {


   width:750px;
   height:100%;

   margin:auto;
   position:absolute;
   left:25%;
   top:81px;
}


#content_menu {


   width:190px;


   margin:0;


   position:absolute;
   left:0px;
   top: 15px;
}
#content_text {


   width:560px;
   max-width:560px;
   margin:0;


   position:absolute;
   left:190px;
   right: 2px;
   top: 15px;
}






/*-- Footer--*/






#footer {


   width:750px;


   margin:auto;


   background-color:#000000;


   position:absolute;


   right: 0px;
   bottom: 0px;


}






/*-- Submenu--*/






#submenu {


   padding:0px;


   margin:0px;






}






#submenu ul li{


   list-style-type:none;


   list-style-position:inside;


   float:left;




}








a.submenu {


   padding-left: 10px;


   color:#000099;






}






a.submenu:hover {


   color:#FF00FF;


}






#placeholder
{


   width:190px;


   float:left;


   margin:auto;


}

Alles anzeigen

Die HP

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/EN">
<html>
  <head>
    <title>Untitled</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<link href="style.css" rel="stylesheet" type="text/css" /> 
  </head>
  <body id="body">
<div id="header"></div>
    <div id="content">
        <div id="content_menu">
        <div id="menu" height="100%">
<ul>
        [*][url='#']Menüpunkt 1[/url]
        [*][url='#']Menüpunkt 2[/url]
        [*][url='#']Menüpunkt 3[/url]
        [*][url='#']Menüpunkt 4[/url]
        [*][url='#']Menüpunkt 5[/url]
[/list]
</div> </div>


<div id="content_text">
TEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT


<div id="footer">
<div id="submenu">
<ul>
        [*][url='#']Impressum[/url]
        [*][url='#']AGB[/url]
        [*][url='#']Design by[/url]
[/list]
</div>
</div>
</div>


</div>
</body>


</html>

Alles anzeigen

Das Problem: Es ist im Moment noch an die Menge des Textes gebunden. Ich bin davon ausgegangen, dass du immer soviel Text hast, dass es mehr Zeilen als die Navi hat. Alternativ kann ich mir nur eine Lösung mit nem komplett neuem Modell oder ner gefixten Pixelanzahl vorstellen- bin aber auch noch nicht so der Fachmann.

Vie Spaß damit, getestet auf FF 2 , IE 7 und Opera

sejuma

div's sollten nur einmal auf der Seite vorkommen. Dein content erscheint jedoch zweimal. Das solltest du ändern.
Setz mal in der Reihenfolge das menue nach dem header und danach den content. Diesen versehe mal noch mit einem float:left;.
Beim footer gib noch clear:both; ein.
Wenn's dann noch nicht hinhaut poste nochmal den CSS und HTML Code.

Tags