zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Content mit Navigation automatisch vergrößern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.06.2013, 14:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2013
Beiträge: 8
tsaenger befindet sich auf einem aufstrebenden Ast
Standard Content mit Navigation automatisch vergrößern

Hallo zusammen,

Ich versuche gerade ein CSS Layout für meine Webseite zu erstellen.
Sie soll zentriert mit

Header
Navigation
Content
Footer

ausgestattet sein.
Dazu habe ich folgende Objekte erstellt:

Code:
#container {
	position: relative;
	width: 765px;
	border: 0px;	
	text-align: left;
	margin: 0 auto 0 auto;
	padding: 1px 1px 60px 1px;
	min-height: 400px;
	border-style: none;
	background-color:#FFFFFF;
	#background-image: url(../images/back.jpg);    
       background-repeat: repeat-y;
       background-position: 0px 0px;
}
#head { 
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: #B9B9B9;
	height: 0px;
} 
#leftmenu ul {
	position: relative;
	top: 154px;
	left: 2px;
	margin: 0px;
	padding: 0px;
	list-style: none;
	width: 138px;
	background-color: #FFFFFF;
	padding-left: 0px;
}
#content {
	position: relative;
	right:-1px;
	margin: 153px 60px 0px 180px;
	padding: 0px 0px 0px 5px;
	line-height: 1.8em;
	#background-color: #EDF4FA;
	font-style: normal;
    	font-weight: normal;
    	font-size: 12px;
    	line-height: 18px;
    	font-family: arial, sans-serif;
}
#footer {
   	position: absolute;
  	clear: both;
	bottom: 0px;
	left: -1px;
	width: 771px;
	height: 9px;
	background-image: url(../images/rand_unten.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	border-bottom: 0px;
	border-right: 0px;
	border-left: 0px;
	border-top: 0px;
	border-style: none;
	clear:both;
}
Mein Problem ist nun, dass sich die Seitenhöhe nur dem Content anpasst.
Wenn ich viele Navigationspunkte habe, wird der Content-Bereich nicht vergrößert, sondern die Navigationspunkte überschreiben den Footer.
Was mache ich da falsch?
Kann mir jemand bitte helfen?

Vielen Dank

Tobias
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.06.2013, 15:04
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von tsaenger Beitrag anzeigen
Was mache ich da falsch?
Das wurde Dir schon gesagt:
TYPO3.net - container höhe autmatisch

Ändere dementsprechend Deine CSS-Formatierung. Falls dann noch Probleme vorhanden sind, beschreibe sie und poste einen Link zu Deiner Site.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.06.2013, 16:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2013
Beiträge: 8
tsaenger befindet sich auf einem aufstrebenden Ast
Standard

Hallo zusammen,

Ich habe nun weiter versucht, und auch die relative Höhe hinbekommen.
Nun habe ich das Problem, da ich die "absolute"-Angaben entfernt habe, der Hintergrund von dem Container-Objekt am oberen Rand noch zu sehen ist.
Ich bekomme also das Head-Objekt nicht dekungsgleich darüber gelegt.

Code:
#container {
	#position: relative;
	postition:absolute;
	width: 765px;
	border: 0px;	
	text-align: left;
	margin: 0 auto 0 auto;
	padding: 1px 1px 0px 1px;
	border-style: none;
	background-image: url(../images/back.jpg);    
       background-repeat: repeat-y;
       background-position: 0px 0px;
}

#head { 
	#position: absolute;
	left: 0px;
	top: -10px;
	#background-color: #B9B9B9;
	#height: 0px;
	
}

#head span {
	display: none;
}

#head h1, #head h2 {

	margin: 0px;
}
#head h1 {
	#position: absolute;
	top: 0px;
	left: 0px;
	height: 154px;
	width: 768px;
	background-image: url(../images/header768.jpg);	
	background-repeat: no-repeat;
	background-position: 0px 0px;
         clear:both;
         float:left;

}

#leftmenu ul {
	margin: 0px 0px 0px 1px;
	padding: 0px;
	list-style: none;
	width: 149px;
	background-color: #FFFFFF;
	padding-left: 0px;
	float:left;
}

#content {
	#position: relative;
	right:-1px;
	margin: 153px 60px 0px 180px;
	padding: 0px 0px 0px 5px;
	line-height: 1.8em;
	background-color: #edf4fa;
	font-style: normal;
    	font-weight: normal;
    	font-size: 12px;
    	line-height: 18px;
    	font-family: arial, sans-serif;
}

#footer {
   	#position: relative;
  	clear: both;
	bottom: 0px;
	left: -1px;
	width: 771px;
	height: 9px;
	background-image: url(../images/rand_unten.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	border-bottom: 0px;
	border-right: 0px;
	border-left: 0px;
	border-top: 0px;
	border-style: none;
	clear:both;
}
Wer kann mir dabei behilflich sein?

Der Link zur Dev: http://web58.sit-mainz.info/index.php?id=22

Vielen Dank.
Mit Zitat antworten
  #4 (permalink)  
Alt 17.06.2013, 16:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2013
Beiträge: 8
tsaenger befindet sich auf einem aufstrebenden Ast
Standard

Hallo zusammen,

ich denke ich habe es mit margin lösen können.
Weiß zwar nicht ob das so korrekt ist, aber es scheint zu funktionieren.

Gruß

Tobias
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
Tabellen als Div Container SpecialFighter (X)HTML 7 12.10.2010 18:40
Ungewöhnlicher abstand beim clearen von floats adrianno CSS 14 16.09.2009 15:20
Dynamische Höhe im Content und DIV immer unten keaton CSS 8 13.12.2006 19:19
DIV Länge automatisch anpassen judicious CSS 10 08.05.2006 17:30
Seitenaufbau mit DIVs und 100% Höhe vespasquire CSS 6 12.09.2004 16:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:17 Uhr.