|
|||
Sidebar Höheneinstellung
Hallo!
leider habe ich ein Problem, bei dem ich als CSS-Anfänger an meine Grenzen stoße. Ich hoffe ihr könnt mir helfen. Mein Problem: Ich möchte eine Webseite erstellen mit Header, Sidebar, Hauptinhalt ( bei mir mainframe) und einem Footer. Die Anordnung der einzelnen Elemente passt auch schon so, wie ich das haben will, jedoch wird meine Sidebar/Mainframe zu lang, sodass die beiden viel zu lang werden und der Footer außerhalb des Fensters landet. Ich habe schon den ganzen Tag im Internet gesucht, doch irgendwie führte nichts zum gewünschten Ergebnis. Das Problem habe ich schon erkannt (bei position: relative; height: 100% ist das gewünschte div genau so hoch wie das übergeordnete div. So ist es gerade: So soll es werden: Logischerweise sollen die div's über den unteren Browserrand hinausgehen, sofern der Inhalt es verlangt. Hier mein html- und CSS-Code: HTML: HTML-Code:
<html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> <title>Startseite</title> </head> <body> <div id="content"> <div id="header"> <h1>Startseite</h1> <p>Hallo Gast!<p> </div> <div id="holder"> <div id="sidebar"> <p>Hier ist die Sidebar. </div> <div id="mainframe"> <p>irgendwas</p> </div> </div> <div id="footer"> <p>footer </div> </div> </body> </html> Code:
body , html{ font-family: Arial; text-align: center; height: 100%; } #content { text-align: left; display: inline-block; height: 100%; } #sidebar { width: 250px; border: dotted; float: left; height: 100%; } #mainframe { border: dotted; margin-left: 265px; width: 900px; height: 100%; } #holder { margin: auto; margin-top: 10px; margin-bottom: 10px; } #header { height: 150px; border: dotted; width: 1165px; } #footer { border: dotted; margin-top: 5px; margin-bottom: 0px; } |
Sponsored Links |
|
|||
Hallo,
alter Merksatz: Wer floatet muss auch clearen. Such mal bei Google nach "css float clear" und lies dich ein. Danach nach "css float clear clearfix". Insgesamt wäre es natürlich sinnvoller du würdest aktuelles HTML5 und CSS3 und deren neue Elemente nutzen. Gruss MrMurphy |
Sponsored Links |
|
|||
Ich muss gestehen, das bringt mich jetzt nicht so richtig weiter. Wo muss ich jetzt clearen?
Sorry, dass ich so doof frage, ich bin auf dem Gebiet ziemlich neu. Wie könnte ich das ganze denn geschickter (mit HTML5 und CSS3) lösen? |
|
|||
Hallo,
Zitat:
Zitat:
Eine Anleitung findest du zum Beispiel unter Little Boxes - IV CSS-Positionierung in den Kapiteln 12 bis 17. Zitat:
Vorteile sind zum Beispiel eine bessere Übersicht im Quelltext, ein paar Pluspunkte bei Google und die Möglichkeit Webseiten besser an Smartphones und Tablets anpassen zu können. Stichwort: Media Queries. Insgesamt sind Seiten mit HTML5 und CSS3 zukunftssicherer. Du hast offensichtlich zum Lernen zu veralteten Anleitungen oder Vorlagen gegriffen. Darauf wollte ich dich eigentlich nur aufmerksam machen, da eine spätere Umstellung in der Regel sehr zeitaufwändig ist. Gruss MrMurphy |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Sidebar Textabstand | erdbeermitsahne | CSS | 3 | 19.05.2012 18:10 |
Content und Sidebar immer gleich lang | 545 | CSS | 18 | 01.04.2010 00:40 |
active link soll hover-effekt erhalten | zeitgeisth | CSS | 1 | 30.11.2008 15:47 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |
ganz einfach CSS-Design: content + sidebar | -Oliver- | CSS | 8 | 02.05.2006 21:30 |