div unten ausrichten

[Joda1994]

moinsen... ich will ein div am unterem rand ausrichten. hab schon alles von margin-bottom:0px über position:absolute und vertical-align:bottom probiert, doch nichts hat geklappt. also meine frage: wie kann man das problem lösen?

 

[_Thor_]

Indem du dem div, das unten sein soll

position: absolute;
bottom: 0;

gibst und dem umgebenden Element

position: relative;

 

[Joda1994]

ist ja echt verrückt... da sucht man 3 tage lang ergebnislos bei google, dann einmal im forum fragen und erste antwort gleich ein treffer.
thx

 

[Joda1994]

komisch... auf der einen seite gehts, auf der nächsten wieder nich. link müsstest du ja noch kennen, aber hier trotzdem nochma: peachskateboards.funpic.de; peachskateboards.funpic.de/layout.css

 

[threadi]

Einfach per position:absolute ein Element "nach unten" setzen reicht nicht. Man muss auch der Umgebung sagen wie groß sie ist. In deinem Fall müsstest du sowohl beim html als auch beim body height auf 100% setzen.

html, body { height: 100%; }

 

[koslowski]

Hi,

Foot Sticker Alt ist sicher die beste Methode, um deinen footer immer unten zu haben.

koslowski

 

[Joda1994]

klappt beides nich. könnt ihr euch mal angucken, ob ich da alles richtig gemacht hatte. besonders im bezug auf foot sticker alt

 

[threadi]

Du hast der Klasse bottom die Eigenschaft "position: relative;" gegeben, es müsste aber "position: absolute;" sein wenn du das ganz unten haben willst.

 

[koslowski]

Moin,

guck dir das Beispiel nochmal genau an.

#container braucht position:relative und min-height:100%;.

Da der IE6 min-height nicht kennt, height aber wie min-height behandelt, braucht er per Sternchen-Hack height:100%;

Damit würde der footer unterhalb des Viewports liegen, weil #container ja 100% Höhe hat.
Deshalb muss der footer per negativem margin wieder hochgezogen werden.
Das negat. margin muss der Höhe des footers entsprechen, deshalb solltest du dem footer eine Höhe geben.

Für den IE6 muss das negative margin etwas modifiziert werden, einfach ausprobieren.

Falls du längere Inhalte hast, mußt du noch für diese Seiten ein entsprechendes unteres padding vergeben, damit der hochgezogene footer diese nicht verdeckt.

koslowski

 

[Joda1994]

@threadi: dann klappts auch nich. als ich die datei endlich über ein paar umwege aufn server hatte(dabei noch ausversehen das layout.css von meiner eigenen hp gelöscht....) stand bei opera zwar imma noch position:relative; aber bei mozilla position:absolute; weiß jez nich wem ich glauben soll :-D

@koslowski: klingt gut, ma ausprobieren. ich meld mich dann wieder

Edit: ok, hab ich probiert. nich ganz verstanden was du mit sternchenhack meinst, aba so wie ich es probiert hatte ging es jedenfalls nich.

 

[koslowski]

Hi,

Edit: ok, hab ich probiert. nich ganz verstanden was du mit sternchenhack meinst, aba so wie ich es probiert hatte ging es jedenfalls nich.

dein nonfooter bekommt nur min-height:100%;

Definiere mal einen CSS-Prolog.
Setze in die erste Zeile deiner CSS:

*  {
   padding:0;
   margin:0;
}

Der Sternchen-Hack spricht nur den IE6 an, nach * html hören alle Browser außer dem IE6 auf weiterzulesen.

Außerdem was heißt hier klappt nicht, ergänze den CSS-Prolog, schmeiss height für nonfooter raus, dann stimmts doch.

koslowski

 

[Joda1994]

lol. hab die site letztens ma auf bplaced gebracht, weil es da probleme mit funpic gab. da hab ich ein code, auf dem es mit funpic nich ging. iwie komisch.... ich kopier nochma von bplaced auf funpic. ma schaun was rauskommt ;)