nicht angemeldet
div bottem bündig jedoch n Max von oben
Hallo zusammen
Ich krieg mein Problem echt nicht in den Griff.
Weiss jemand ob man bei der Positionierung den Bottom UND den margin-top eingeben kann?
Bei mir funktioniert es nicht.
Ich hab auf einer Seite einen Footer, welcher unten bündig sein soll. Doch wenn das Browserfenster zugezogen wird, soll sich der Footer mit schieben bis zu einem bestimmten Abstand von Oben.
Kann mir jemand helfen?
Danke
-
Hi,
Ich hab auf einer Seite einen Footer, welcher unten bündig sein soll. Doch wenn das Browserfenster zugezogen wird, soll sich der Footer mit schieben bis zu einem bestimmten Abstand von Oben.
Wie meinst'n das genau? Per Angabe eines definierten Wertes und u.U. über den darüber befindlichen Content? Oder nur soweit sich darüber Freiraum befindet?
Falls letzteres:
- body und html auf 100% Höhe
- dann dein Content div (position relative, min-height 100% und NUR FÜR IE height auf 100%)
- dann dein footer (position relative, left und bottom 0 und einen NEGATIVEN margin nach oben der gleich seiner eigenen Höhe ist.
Gruß
Antipitch-
Also ich hab da mal n kleinen Test gemacht. Das funktioniert super, ausser eben, dass der Footer beim zuschieben über den Content Layer kommt.
<html>
<head>
<title>Dokumenttitel</title>
<style type="text/css">
#content {
position: relative;
left: 150px;
width: 200px;
float: left;
border: 1px solid #000;
}#footer {
position: absolute;
margin-top: 20px;
bottom: 30px;
width: 100%;
left: 0px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="content">Content<br>
Dfhh dfhfgh asdasd Dfhh dfhfgh asdasd Dfhh dfhfgh asdasd Dfhh dfhfgh asdasd Dfhh dfhfgh asdasd
asdasd
</div>
<div id="footer">Footer</div>
</body>
</html>-
Moin mee,
Also ich hab da mal n kleinen Test gemacht. Das funktioniert super, ausser eben, dass der Footer beim zuschieben über den Content Layer kommt.
So (footer hier 25px hoch):
html,
body {
height: 100%;
}#content {
width: 100%;
position: relative;
min-height: 100%;
}* html #content { /* IE Hack for 100% height */
height: 100%;
}#footer {
position: relative;
bottom: 0;
left: 0;
margin: -25px auto 0 auto;
width: 100%;
height: 25px;
}XHTML code war richtig so. Vertikalen Abstand zwischen content u. footer z.B. über simplen footerspacer oder margin-bottom von #content. Horizontale Ausrichtungen über content u. footer oder über die Elemente, die du da reinwirfst. Alles klar?
Gruß
Antipitch-
Moin Antipitch
Das wars :-)
Nun muss ich noch n bischen anpassen und fummeln und dann kommt das suuuper.Warum gibts eigentlich bei einer width immer links einen kleinen Abstand? Muss ich den auch mit einem Hack beheben?
Tausne Dank nochmals.
Gruss
mee-
Hi mee,
Warum gibts eigentlich bei einer width immer links einen kleinen Abstand? Muss ich den auch mit einem Hack beheben?
Meinst du zwischen deinen content oder footer Elementen und dem Seitenrand? Oder zwischen dem Rand der Elemente zu ihrem Inhalt?
Anyway: margin, padding und border auf null setzen ist meistens die Lösung. Ich persönlich mach das immer am Anfang einer neuen CSS Datei erstmal für alle Elemente.
* {
margin: 0;
padding: 0;
border: 0
}Gewünschte andere Werte für einzelne Elemente definiert man dann explizit für diese. Wenn das nicht hilft, müsstest du nochmal genauer beschreiben bzw. code posten...
Gruß
Antipitch-
Hi Antipitch
Genial.
Tausend Dank für die super Tipps.Gruss
mee
-
-
-
Hi Antipitch
Ich hab nun doch noch n Knoten im Kopf und verstehe was nicht ganz. Hab Denen Link auf die Webseite moblily.de/css gesehen und gelesen. Doch mit dem negative Wert kann ich irgendwie nicht umgehen.
Mein Footer hat zwar nun den gewollten und schönen Abstand. Doch leider wird er immer ausserhalb des Browsers dargestellt. Aber er sollte doch einfach "nur" unten bündig sein und nicht schon von Anfang an aus dem Browaserfenster raus und wenn ich mit der Margin und padding Top spiele, dann hab ich keinen Abstand mehr ...
Also im Moment hab ich es so:
Kannst Du mir nochmals helfen?
Tausend Dank.Gruss
mee<html>
<head>
<title>Dokumenttitel</title><style type="text/css">
html,body {
height: 100%;
padding: 0;
margin: 0;
border: 0;
bottom: 0;
left: 0;
}#contentspace {
width: 700px;
position: relative;
min-height: 100%;
left: 117px;
}* html #contentspace { /* IE Hack for 100% height */
height: 100%;
}#content {
position: relative;
height: 200px;
margin-top: 220px;
border:#000000 1px solid;
}#footerspace {
position: relative;
height: 24px;
width: 100%;
border:#000000 1px solid;
}#footercontent {
height: 80px;
margin: 24px auto 0 auto;
border:#000000 1px solid;
}</style>
</head><body>
<div id="contentspace">
<div id="content">Content<br>Dfhh dfhfgh asdasd Dfhh <br>dfhfgh asdasd Dfhh dfhfgh asdasd <br><br>Dfhh dfhfgh asdasd Dfhh <br>dfhfgh asdasd Dfhh dfhfgh asdasd <br>Dfhh dfhfgh asdasd Dfhh <br>dfhfgh asdasd Dfhh dfhfgh asdasd <br><br>Dfhh dfhfgh asdasd Dfhh dfhfgh asdasd asdasd</div>
</div><div id="footerspace">
<div id="footercontent">Footer</div>
</div></body>
</html>-
Habs raus gekriegt. Das Problem war, dass ich die Höhe nicht fixiert hatte.
Danke
-
-
-