zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden footer stick alt tut nicht wirklich, was es soll

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.12.2005, 21:37
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 27.01.2005
Beiträge: 1.325
E|H befindet sich auf einem aufstrebenden Ast
Standard footer stick alt tut nicht wirklich, was es soll

Servus,

ich hock hier gerade an meiner Seite und versuche, das Menü links oben zu platzieren. Gleichzeitig soll es aber im HTML-Code vor dem footer stehen, als an vorletzter Stelle.

Nun könnte ich mit relativer Positionierung des „wrappers“ und absoluter Positionierung des Menüs und des footers erreichen, daß das Menü da oben links sitzt und der footer immer ganz unten klebt.

Dann ragt aber das Menü bei kurzen Seiten (wenig Inhalt) und bei kleinen Auflösungen (800×600 Pixel) nach unten über den footer.

Ich dachte, daß der blaue Mann das Problem gelöst hätte, aber abgesehen davon, daß der noch nie was von Semantik gehört hat, besteht da das gleiche Problem, wenn man das Menü mal ordentlich verlängert. Dann ragt die Liste auch nach unten raus.

Kennt jemand eine Lösung, möglichst nur mit float, den Seitentitel, Klickpfad und Inhalt nach rechts und das Menü nach links zu setzen, so daß der footer immer unten sitzt, und sowohl vom Inhalt als auch vom Menü nach unten geschoben wird, wenn gescrollt werden muß?

Das Menü sollte eine fixe Breite haben. Dann muß allerdings der Inhalt gut gefüllt sein, sonst wird er zu schmal.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.12.2005, 17:05
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 27.01.2005
Beiträge: 1.325
E|H befindet sich auf einem aufstrebenden Ast
Standard

Niemand ne Idee?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.12.2005, 17:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Wo ist dein Code?

Bei der footerStickAlt-Methode gibt es die von dir geschilderten Probleme nicht, wenn du nicht mit absoluter Positionierung arbeitest.
Mit Zitat antworten
  #4 (permalink)  
Alt 31.12.2005, 17:49
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 27.01.2005
Beiträge: 1.325
E|H befindet sich auf einem aufstrebenden Ast
Standard

Mein Code ist ja erstmal egal.

Mir geht es darum, daß ich bei footerstickalt einfach die Liste auf der rechten Seite, also das Menü, verlängert hab’. Die Liste ragte dann unten raus.

Und wenn ich den footer nicht absolut positioniere, hat sich das erledigt, oder wie? Dann klebt er doch aber nicht immer ganz unten, oder?

EDIT: Ich seh’ grad, der footer ist bei footerstickalt relativ positioniert.

Code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Home</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="The Man in Blue" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<style type="text/css" media="all">
	@import "css/main.css";
	@import "css/product_features.css";
	/* The CSS that's required to position the footer */

	html
	{
		height: 100%;
	}

	body
	{
		height: 100%;
	}

	#nonFooter
	{
		position: relative;
		min-height: 100%;
	}

	* html #nonFooter
	{
		height: 100%;
	}

	#footer
	{
		position: relative;
		margin: -7.5em auto 0 auto;
	}

	/* A CSS hack that only applies to IE -- specifies a different height for the footer */

	* html #footer
	{
		margin-top: -7.4em;
	}
</style>
</head>
<body>
	<p class="hidden">Skip to content</p>

	<div id="page">
		<div id="nonFooter">
			<div id="header">
				<p id="logo">

					<a href="#">
						<span class="linkText">XXXX</span>
					</a>
				</p>

				

			</div> 

			<div id="content">
				<div id="contentMain">
					<h1>Product X</h1>
					


						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros. Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar purus, vel hendrerit ipsum tellus at ante.
					</p>
				</div> 

				<div id="contentSub">
					<ul id="quickLinks">
						<li class="first on">
							<span>Feature</span> tour
						
						[*]
							<span>Try</span> a demo

						
						[*]
							<span>Buy</span> online
						
						[*]
							<span>Buy</span> online
						
						[*]
							<span>Buy</span> online
						
						[*]
							<span>Buy</span> online
						
						[*]
							<span>Buy</span> online
						
						[*]
							<span>Buy</span> online
						
						[*]
							<span>Buy</span> online
						
						[*]
							<span>Buy</span> online
						
						[*]
							<span>Buy</span> online
						
						[*]
							<span>Buy</span> online
						
						[*]
							<span>Buy</span> online
						
						[*]
							<span>Buy</span> online
						
						[*]
							<span>Buy</span> online
						
						[*]
							<span>Buy</span> online
						
						[*]
							<span>Buy</span> online
						
						[*]
							<span>Buy</span> online
						
						[*]
							<span>Buy</span> online
						
						[*]
							<span>Buy</span> online
						
					[/list]				</div>

				<div class="clearer"></div>
			</div> 
		</div> 
	</div> 

	<div id="footer">
		<ul id="bottomLinks">
			<li class="first">

				Support
			
			[*]
				Employment
			
			[*]
				Contact Us

			
		[/list]
		

&copy; 2005 XXXX. All rights reserved.</p>

	</div> 

</body>
</html>
Das ist meine Vereinfachung von footerstickalt, aber immer noch ordentliche div-Suppe.
Mit Zitat antworten
  #5 (permalink)  
Alt 31.12.2005, 17:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von E|H
Mein Code ist ja erstmal egal.
Nein.

Zitat:
Mir geht es darum, daß ich bei footerstickalt einfach die Liste auf der rechten Seite, also das Menü, verlängert hab’. Die Liste ragte dann unten raus.
Dann hast du vermutlich etwas falsch gemacht.

Zitat:
Und wenn ich den footer nicht absolut positioniere, hat sich das erledigt, oder wie? Dann klebt er doch aber nicht immer ganz unten, oder?
Der footer wird bei der Methode footerStickAlt nicht absolut positioniert.


edit: Aha, doch mit Code.
Zitat:
Das ist meine Vereinfachung von footerstickalt, aber immer noch ordentliche div-Suppe.
Was hindert dich, die div-Suppe zu vereinfachen. Ist alles hausgemacht. Du brauchst keinen "#nonfooter" wenn du ein #page hast.

Ich glaube, du hast das Prinzip noch nicht verstanden.
Die ganze Kunst liegt darin, den footer um seine eigene Höhe mit negativem margin nach oben zu verschieben.
Zusätzliche Elemente brauchst du nicht.
Mit Zitat antworten
  #6 (permalink)  
Alt 31.12.2005, 18:41
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 27.01.2005
Beiträge: 1.325
E|H befindet sich auf einem aufstrebenden Ast
Standard

Code:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Startseite</title>
</head>

<body id="blog-front">

<div id="hauptkasten">
<div id="floater">

<h1 id="seitentitel">Startseite</h1>

<div id="wobinich">
     <span>zum Men&uuml; | </span>
     Startseite
</div>

<div id="inhalt">
     <h2 class="center">Keine Einträge vorhanden</h2>
     <p class="center">
          Es gibt derzeit keine Einträge, die hier angezeigt werden könnten.

          Entweder gibt es momentan gar keine Einträge,
          oder alle Einträge sind älter, als die normalerweise hier angezeigten.
     </p>
</div>
</div>

<div id="menuekasten">
     <h2 class="menueweg">Menü</h2>
     zum Inhalt

     <ul class="navlist">[*]Startseite
[*]Audio|HiFi
[*]Webkrauts 
[*]Das Ü[*]Links[*]Sitemap[/list]
</div>


<div id="fuszzeile">
	nach oben

	E|H::Homepage, Generation 4.2, erstellt mit WordPress

</div>
</div>
</body>
</html>
Im Moment floate ich den #floater nach rechts, den #menuekasten gar nicht, footer hat clear:both;.

Ich könnte jetzt #floater rausschmeißen (ein div weniger), #hauptkasten relativ positionieren, min-height:100%; #footer absolut mit bottom:0;.

Wenn das Menü zu lang wird, steht es unten raus.

Das Konzept von footerstickalt hab’ ich anscheinend absolut nicht geblickt …

EDIT: Ich habe oben bei meiner Vereinfachung keinen Code hinzugefügt, #nonfooter und #page waren beide schon drin.

Ich mach das Menü dort nochmal so kurz wie es ursprünglich war, da funktionierte es nämlich noch.
Mit Zitat antworten
  #7 (permalink)  
Alt 31.12.2005, 18:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Aha, wieder ein völlig anderer Quelltext - ohne CSS. Was willst du damit jetzt sagen?

Zitat:
Zitat von E|H
Das Konzept von footerstickalt hab’ ich anscheinend absolut nicht geblickt …
Und warum schaust du dir das Original dann nicht nochmal ganz genau an und liest die zugehörige Erklärung?
Der footer muss außerhalb des "Hauptcontainers" liegen (wie auch immer der heißt), das clear aber innerhalb des Elements, in dem gefloatet wird!
Mit Zitat antworten
  #8 (permalink)  
Alt 31.12.2005, 18:54
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 27.01.2005
Beiträge: 1.325
E|H befindet sich auf einem aufstrebenden Ast
Standard

Dieser neue Code ist der von meiner Seite.

Der, den ich davor gepostet hab’, ist footerstickalt, bzw. was ich daraus gemacht hab’ (zum Experimentieren).

Ich hab’ da nur etliche "replacement"-spans rausgeworfen.

Es hat mir schon nicht sonderlich getaugt, bei mir ein #floater einzufügen, aber ein clear-div ist mir der absolute Graus.

Ich hab’ mir footerstickalt schon angeschaut. Aber wenn ich da das Menü wachsen lasse, dann steht es unten raus.

Wenn ich das richtig kapier’, dann setzt footerstickalt alles bis auf den footer auf 100% und zieht dann den footer, der außen/unten dranhängt, genau um seine Höhe hoch.

Was aber, wenn das Menü mehr als 100% hoch ist?
Mit Zitat antworten
  #9 (permalink)  
Alt 31.12.2005, 18:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von E|H
Was aber, wenn das Menü mehr als 100% hoch ist?
Dann wandert der footer nach unten - schließlich wird min-height verwendet.
Vorausgesetzt, das Menü ist nicht absolut positioniert.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 31.12.2005, 19:15
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 27.01.2005
Beiträge: 1.325
E|H befindet sich auf einem aufstrebenden Ast
Standard

So sieht’s bei mir aus (footerstickalt).
Das Menü ist nicht absolut positioniert, sondern floatet nach rechts.


[/b]
Mit Zitat antworten
Sponsored Links
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
Mein Footer verschwindet in der Tablet und Mobile-Ansicht leverkusenerjung CSS 3 16.05.2016 11:11
Problem mit Footer am unteren Seitenrand scar CSS 3 21.04.2013 21:34
Footer Stick Alt - funktioniert nicht wirklich HaraldMenza CSS 1 03.12.2007 23:47
footer stick alt -> unerwünschter Spalt in FF fidel CSS 34 16.08.2006 14:35
Footer - aber auch wirklich immer am Fuß der Seite burzum CSS 2 28.06.2006 19:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:51 Uhr.