Footer mit DIV positionieren

[sean]

Ich mach gerade mein erstes TableFree Projekt, also alles mit Styles und Divs und ohne Tabellen. Mal davon abgesehen dass absolut der selbe Ärger wie mit allen anderen HTML Dingen (Tabellen, usw) vorhanden ist fällt mir langsam nichts mehr ein wie ich den Footer platziert bekomme.

Der soll ganz unten ans Ende der Seite, als absolut letztes. Er soll nicht gefixt sein sondern einfach nur unten über die ganze Breite vorhanden. Praktisch wie ein Tabellenfeld oder eine Tabelle am Ende einer Seite, wo geschrieben steht "Copyright by HansWurstSalami". In der Seite sind 4 weitere Div Container, ein Head, ein Navi Links, ein Content und ein Navirechts. Darunter soll der Footer. Kann man irgendwie abfragen "top:Content.height" oder so?

kann doch nicht so schwer sein das Ding zu platzieren. Bottom:0px klappt irgendwie, aber nicht so richtig.

Bitte bitte, wer das schon mal durchlittenm hat bitte melden.

Gruß

sean

[robo]

Hmmm ... hast du schon mal probiert, Navi Links, Content und Navi rechts nochmal zusammen in einen Container zu stecken? So würde ich's versuchen, Patentrezept habe ich leider keines und auch schon jede Menge Blut und Wasser geschwitzt bei dem Thema ...

Code: Alles auswählen

<div id="head">
</div>
<div id="mitte">
 <div id="navilinks">
 </div>
 <div id="navirechts">
 </div>
 <div id="content">
 </div>
</div>
<div id="footer">
</div>

cu, Robo

[sean]

Danke, bringt aber auch nichts. Nicht im Ansatz Ohne top und left scheint bei CSS nichts zu gehen. Ich muß wissen, wie ich die Höhe eines DIV Container erfahren kann, wenn er mit Texten gefüllt wurde. Sonst kann ich dem Footer keine top: Angabe geben. Das mit Bottom:0 war wohl nur Zufall. Wozu brauch man diese Angabe?

Ich glaub dir dass dein Quelltext so richtig ist, frage mich aber wozu ich Positionierungen machen soll, wenn ich wieder über HTML anfange zu verschachteln (was bei mir nicht geht, bzw. nichts bringt). Da kann ich doch auch bei Tabellen bleiben, oder versteh ich das mit CSS komplett falsch?? Für Formatierungen schön und gut, aber zum layouten?

Gruß

sean

[raxon]

meine footer css auf www.poster-gratis.de schaut so aus:
-------------------------
#footer {
color: rgb(51,51,102);
background-color: rgb(239,239,239);
font-size: 80%;
text-align: center;
line-height: 1.25em;
margin: 2em 0 0 0;
padding: 1ex 10px;
clear: left;
}
---------------------

[Dieter Moskanne]

schon mal so probiert?

#footer {
position:relative;
bottom: 0px;
}

dann hängt der footer eig. immer unter dem letzten element der seite


#footer {
position:absolute;
bottom: 0px;
}

so hängt er am unteren seitenrand, bleibt aber beim scrollen stehen :/


Grooce
DM

[psiu]

Kommt darauf an wie dein footer aussieht.

Nehmen wir an die Navi ist links und rechts mit 250px.

.footer
{
margin: 50% 250px 0px 250px

}

Hast du zu wenig content geht der footer wenigstens nicht über die navi.

Ne richtige Lösung für Footer habe ich auch nicht, wenns dir egal ist wie weit unten der footer ist dann. 200%

oder du wechselst id content mit id menu und bringst du footer links in der navi unter.

[km911]

wozu brauchst du denn die Angabe der Höhe für den Footer ?

Wenn ich es recht verstanden habe, soll der doch zentriert unter dem gesamten anderen Inhalt in der gesamten Breite vorhanden sein...oder?

Dazu müssen nur alle anderen div-container wieder geschlossen sein....und dann ein separater container über die gesamte Breite und zentriert....

Allerdings ist es so, dass der IE und der Firefox unterschiedlich auf bestimmte Anweisungen reagiert....

[psiu]

wozu brauchst du denn die Angabe der Höhe für den Footer

brauchst du nicht!

kann man auch

.content
{
margin-bottom: 20px machen
}

[sean]

danke euch. Hat leider nichts geholfen.

@raxon
liegt oben, verschiebt das Logo

@Dieter Moskanne
hab ich beides schon probiert, bei absolute und bottom:0px ist er unten, aber nicht gut, bei relative ist er ganz oben

@psiu
ganz oben

Der klatscht den Footer immer oben hin. Das Geheimnis wird in den Divs liegen, die vor dem Footer geladen werden. Hab da schon alles mögliche probiert, aber keine Ahnung mehr. Die hab ich alle mit absoloute positioniert. Mit float left hab ich auch getestet, bringt nichts.

Bei selfhtml.org hab ich durch die Blume gelesen, das CSS für Layout nicht so geeignet sein soll. So langsam ertappe ich mich dabei das glauben zu wollen 6 Stunden gebastel für ein Layout mit einem Header, drei Spalten und einem Footer. So was ist zum heulen....das einzige was ich wirklich gelernt habe ist, dass IE und andere Browser teilweise andere Anweisungen brauchen. Willkommen in der Realität

Gruß

sean

[csx]

Hi!

Wenn du sowohl ein float:left als auch ein float:right hast (um das rechte und linke Menue jeweils neben dem Content schweben zu lassen), dann sollte der footer ein clear:both; (nicht nur clear:left) bekommen. Dann sollte er unter allen divs stehen.

Gruß
csx

[Dieter Moskanne]

ALSO :

CSS ist zum Layouten aber SOWAS von geeignet!

Tabellen sind NICHT zum Layouten da, es haben bloß alle in der Vergangenheit gemacht, da die Browser so schlecht waren.
Heutzutage ist es aber bis auf ein paar bugs(boxmodell, float) kein Problem, browserkompatibles css zu schreiben.

Poste doch mal deinen ganzen quellcode, dann finden wir die Lösung schon.

Grooce
DM

[AnjaK]

Warum denn so kompliziert denken?

Ich hab auch die Inhalte zumeist in DIV-Containern, aber außen rum eine Tabelle als Gerüst. Den Footer DIV platziere ich unter der Tabelle und hab nen Footer. Da brauch ich doch keine blöde CSS-Positionierung (die ich völlig inkompatibel ist).
Seiten NUR mit DIVs zu bauen um sagen zu können "ich bin modern" ist übers Ziel hinausgeschossen. Ziel einer guten Website ist, dass DIVs da verwendet werden, wo sie den Quellcode sauber halten und gut zu designen sind. Sie jedoch mit Gewalt einzusetzen ist Dummfug, Tabellen sind nach wie vor sehr gute Hilfsmittel wenn es darum geht Schwächen von CSS zu kompensieren.
Man muss nicht mit jeder Welle schwimmen, nur weil viele andere das tun

[Moddy]

Code: Alles auswählen

#footer{
clear: both;
margin-top: -40px;
width: 100%;
background: #000000;
color: white;
z-index: 100;
min-height: 40px; /* IE  */
position: relative; /* required */
} 

?

[sean]

@csx

leider nein

Hier der Quellcode, unten ein Link zur Demo Seite.

Code: Alles auswählen

<html>

<head>
<STYLE TYPE="text/css">


	#header &#123;
		position&#58;absolute;
		height&#58;65px;
		left&#58;0px;
		top&#58;0px;
		width&#58;100%;
	&#125;
	
	#mainleft &#123;
		position&#58;absolute;
		left&#58;0px;
		top&#58;65px;
		width&#58;262px;
		float&#58;left;
	&#125;

	#mainmiddle &#123;
		position&#58;absolute;
		left&#58;264px;
		top&#58;65px;
		width&#58;538px;
		float&#58;left;
	&#125;
	
	#mainright &#123;
		position&#58;absolute;
		left&#58;803px;
		top&#58;65px;
		width&#58;200px;
		float&#58;left;

	&#125;
	
	#footer &#123;
		 clear&#58;both;
	&#125;
	
</STYLE>
</head>

<body>
<!-- Kopfzeile -->
<div id="header">
	Header
</div>
<!-- Ende Kopfzeile -->

<!-- Haupt Content -->
	<div id="mainmiddle">
		Hauptinhalt
	</div>
<!-- Ende Haupt Content -->
	
	
<!-- Rechte Navi -->
	<div id="mainright">
		Inhalt Rechts
	</div>
<!-- Ende Rechte Navi -->
	
<!-- Linke Navi -->
	<div id="mainleft">
		Links
	</div>
<!-- Ende Linke Navi -->

<!-- Footer -->
	<div id="footer">
		FOOOOOOOOOTEEEEEEEEER
	</div>
<!-- Ende Footer -->

</body>

</html>

Link: https://www.domain-pop.com/d3AkU89/

Der Footer soll einfach ganz unten am Ende der Seite über die ganze Zeile gehen (im Moment oben links zu finden). Und die Linien bis ganz unten, dafür hab ich height:100% bei den DIVs eingesetzt gehabt. Aber im IE reagiert das unterscheidlich.

Bin für jeden Hinweis dankbar!

Gruß

sean

[unique]

Da brauch ich doch keine blöde CSS-Positionierung (die ich völlig inkompatibel ist).

Falsch angewendete CSS-Positionierung ist inkompatibel und die kleinen Inkompatibilitäten einiger Browser kann man sehr einfach umgehen.

@sean
Nicht so leicht aufgeben
Hier eine sehr gute Vorlage für ein dreispaltiges Layout mit Header und Footer und sogar variabler Spaltenbreite in der Mitte: https://www.pixy.cz/blogg/clanky/css-3col-layout/

Und hier einige andere Ansätze: https://css-discuss.incutio.com/?page=T ... umnLayouts