zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Sidebar Höheneinstellung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.05.2015, 19:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.05.2015
Beiträge: 2
css-neuling befindet sich auf einem aufstrebenden Ast
Standard 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>
CSS:
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;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.05.2015, 20:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.05.2015, 23:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.05.2015
Beiträge: 2
css-neuling befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 17.05.2015, 00:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

Zitat:
Sorry, dass ich so doof frage, ich bin auf dem Gebiet ziemlich neu.
Es bringt erfahrungsgemäß wenig dir eine Lösung hinzubasteln, die du nicht versteht. Zumal deine Seite noch keinen Inhalt hat.

Zitat:
Ich muss gestehen, das bringt mich jetzt nicht so richtig weiter.
Ich sehe meine Aufgabe nicht darin dir hier zeitintensiv float und clear zu erklären, zumal es zu dem Thema alleine im deutschsprachigen Bereich hunderte Anleitung im Internet gibt. Um's lernen kommst du nicht herum wenn du Webseiten erstellen willst. Du solltest schon wissen was du tust.

Eine Anleitung findest du zum Beispiel unter

Little Boxes - IV CSS-Positionierung

in den Kapiteln 12 bis 17.

Zitat:
Wie könnte ich das ganze denn geschickter (mit HTML5 und CSS3) lösen?
Auch hier bringt es wenig dir eine Lösung, zumal für eine Seite ohne Inhalt, zu erstellen, die du dann nicht verstehst. Du musst dich schon entscheiden HTML5 und CSS3 zu lernen und das dann auch umsetzen.

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:56 Uhr.