Problem mit den Bereichen einer Homepage

Status
Nicht offen für weitere Antworten.
Pudig

Pudig

Mitglied
Hi Leute

(Als allererstes: Hab die Such-Funktion benutzt, obwohl ich nicht wirklich wusste, nach wa sich suchen sollte. Bin mir auch nicht sicher, ob ich das hier an richtiger Stelle gepostet habe.)

Nun zu meinem Problem. Ich möchte eine Homepage mit 4 Bereichen erstellen. Oben einen Banner und unter diesem Banner 3 Bereiche.

1. Bereich: Menü mit Links
2. Bereich: anzuzeigende Seiten
3. Bereich: News u.a.

Den Banner, den 1. und den 2. Bereich hab ich hinbekommen, nur beim 3. Bereich haperts. Dieser passt sich immer der Länge des 2. Bereiches an. Ich möchte ihn aber rechts unter dem Banner fixieren. Wie stell ich das an? Hab ich einen Fehler im Quelltext?

Code: 
<?php
     error_reporting(E_ALL);
     echo "<html>\n";
     echo "      <head>\n";
     echo "            <title>Meine Homepage</title>\n";
     echo "             <link rel=\"stylesheet\" type=\"text/css\" href=\"page.css\" />\n";
     echo "      </head>\n";
     echo "        <body>\n";
     echo "         <div id=\"root\">\n"; // ganz oberer Div-Holder
     echo "          <div id=\"banner\">\n"; // banner
     include "banner.html";
     echo "         </div>\n";
     echo "         <div id=\"links\">\n"; // linkes Menu
     include "menu.html";
     echo "         </div>\n";
     echo "			</div>\n";
     echo "         <div id=\"mitte\">\n"; // mitte-inhalt
     include "inhalt.php";
     echo "           <br style=\"clear:both;\" />\n";
     echo "         </div>\n";
     echo "         <div id=\"rechts\">\n"; // rechts-news
     include "stuff.html";
     echo "         </div>\n";
     echo "        </body>\n";
     echo "</html>\n";
?>

Könnt ihr mir vielleicht weiterhelfen? Das wäre echt nett. Ich bin am Ende meiner Ideen :( .

Pudig
 
Scherzkeks. Du stellst in einem CSS-Forum eine Frage und bietest nicht einmal deine CSS-Datei an. Wie sollen wir dir da helfen?
 
Tut mir leid, hatte ich vergessen.

Code der page.css:
Code: 
#banner {
         height: 80px;
}
#links {
        width: 5%;
		float: left;
}
#mitte {
        width: 80%;
		float: none;        
}
#rechts {
         width: 5%; 
		 float: right;        
}
 
Versuch mal das:
[color="2c2c8c"]
&nbsp;&nbsp;#banner {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 0px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100%;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #fc8;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-bottom: 12px;
&nbsp;&nbsp;}
&nbsp;&nbsp;#links {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 10px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 128px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #f88;
&nbsp;&nbsp;}
&nbsp;&nbsp;#mitte {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-left: 160px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-right: 160px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #8f8;
&nbsp;&nbsp;}
&nbsp;&nbsp;#rechts {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;right: 10px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 128px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #88f;
&nbsp;&nbsp;}
[/color]
 
Hat leider nicht geklappt.

Jetzt hängt das linke Menü im Banner drin und das rechte passt sich immer noch dem mittleren Bereich an.

EDIT: Aber dank deiner Hilfe, weiß ich jetzt wie ich die Position verändern kann und muss jetzt nur noch die richtige Zahl herausbekommen. Hmm nur muss ich das Problem noch mit der rechten Spalte lösen

EDIT: So nach 3mal editieren, hab ich das Problem gelöst.

THX für deine Hilfe :-)
 
Zuletzt bearbeitet:
Ok, dann kann ich dir nur dies anbieten:
[color="2c2c8c"]
&nbsp;&nbsp;body {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0px;
&nbsp;&nbsp;}
&nbsp;&nbsp;#banner {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 64px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #fc8;
&nbsp;&nbsp;}
&nbsp;&nbsp;#links {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 64px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 12px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 128px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #f88;
&nbsp;&nbsp;}
&nbsp;&nbsp;#mitte {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-left: 160px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-right: 160px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #8f8;
&nbsp;&nbsp;}
&nbsp;&nbsp;#rechts {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 64px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;right: 12px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 128px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #88f;
&nbsp;&nbsp;}
[/color]
Hierbei musst du aber die Positionierung [color="2c2c8c"]top[/color] jeweils deiner Bannerhöhe anpassen. Wenn dir das zu viele Umstände sind solltest du auf Tabellen zurückgreifen.
 
Naja, wenn der Text in der Mitte länger als die Menüs links und rechts ist, dann sollen die Menüs verlängert werden.

Mit height: 100%; hab ichs schon versucht, aber hat nicht geklappt.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück