nicht angemeldet
Footer & HG verschiebt sich bei Verkleinerung des Browserfenster
Hallo,
habe folgendes Problem: Den Footer und den Hintergrund meines Contents habe ich mit 100%width und position:absolute angelegt. Der content und der Header ist nach der Fricca Methode mittig positionert. Sobald ich das Fenster verkleinere und horizontal scrollen muss, verschiebt sich der Footer und der Hintergrund vom Content nach links. Wäre dankbar, wenn mir jemand helfen könnte. Hier der Code:
HTML:
<body>
<div id="distance">distance</div>
<div id="img_header">header</div>
<div id="content_bg"></div>
<div id="wrapper">
<div id="content">container</div>
</div>
<div id="footer_bg"></div>
<div id="footer">
<div class="abstand_links"> footer</div>
</div>
</body>
CSS:
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
width: 100%;
}
#distance {
width: 10px;
height: 50%;
margin-bottom: -363px;
float: left;
}
#wrapper {
margin: 0 auto;
height: 500px;
width: 1000px;
clear: left;
position: relative;
}
#img_header{
clear:left;
background-color:#F66;
margin:0 auto;
width:1000px;
height:113px;
position: relative;
}
#content_bg{
background-color:#FFFF66;
width:100%;
height:500px;
position:absolute;
clear:left;
}
#content{
height:500px;
width:800px;
margin:0 auto;
background-color:#339;
position:relative;
}
#footer_bg{
height:30px;
width:100%;
position:absolute;
background-color: #F60;
}
#footer{
height:20px;
width:1000px;
margin:0 auto;
position:relative;
}
.abstand_links{
margin-left:100px;
}
-
Om nah hoo pez nyeetz, orange!
Es nicht klug, Elemente aus Gestaltungsgründen zu verwenden.
<div id="content_bg"></div>
bg soll doch bestimmt background heißen, also verwende ein Hintergrundbild.
<div id="footer_bg"></div>
dito
<div id="distance">distance</div> <div class="abstand_links"> footer</div>
Verwende margin oder padding, um Abstände zu erzeugen.
Von deinem Code sollte übrig bleiben
<body> header footer </body>
Der eigentliche Inhalt kann in den body geschrieben werden.
Informiere dich im Selfhtml-Wiki über margin und Hintergründe.
Matthias
--
1/z ist kein Blatt Papier.
-
"bg soll doch bestimmt background heißen, also verwende ein Hintergrundbild."
"Verwende margin oder padding, um Abstände zu erzeugen."
Hallo Matthias,
du hast in diesen Punkten bestimmt Recht, aber meine Frage ist trotzdem nicht beantwortet worden.Gibt es eine Möglichkeit, dass der footer bei 100%width nicht abgeschnitten wird, wenn das Browserfenster verkleinert wird?
hier der code vereinfacht:
<body>
<div id="content">content</div>
<div id="footer">footer</div>
</body>#content{
width:960px;
height:500px;
background-color:#399;
margin:0 auto;
}
#footer{
width:100%;
height:100px;
background-color:#333;
}vg orange
-
Om nah hoo pez nyeetz, orange!
du hast in diesen Punkten bestimmt Recht, aber meine Frage ist trotzdem nicht beantwortet worden.Gibt es eine Möglichkeit, dass der footer bei 100%width nicht abgeschnitten wird, wenn das Browserfenster verkleinert wird?
Zuerst musst du dir die Frage stellen, wie die 100% ermittelt werden, insbesondere 100% wovon.
Wenn irgendwo eine absolute Breitenangabe zugrunde liegt und das Browserfenster kleiner als dieser Wert wird, wird selbstverständlich abgeschnitten.
Um das zu vermeiden, musst du also auf alle absoluten Breiten des Footers und seiner Elternelemente verzichten, mit dem Ergebnis, dass der Footer 100% des Viewports einnimmt.
Matthias
--
1/z ist kein Blatt Papier.
-
die Breite bezieht sich auf den Viewport. Der footer soll immer so breit wie
der Viewport bleiben- mehr nicht. Bei meinem Bsp. gibt es keine absoluten Breitenangaben beim footer und auch nicht bei seinen Elternelementen. Aber es gibt andere Elemente, wie z.B der header der eine feste Breite hat. Ist der footer auch davon abhängig? der header ist ja nicht als Elternelement angelegt worden. Wäre für eine kurze Rückmeldung nochmal dankbar, perfekt wäre, wenn Du mir den Code umschreibst.
vg,orange-
Om nah hoo pez nyeetz, orange!
Wäre für eine kurze Rückmeldung nochmal dankbar, perfekt wäre, wenn Du mir den Code umschreibst.
Mach erst mal vernünftigen Code draus, ohne Elemente, die für die Darstellung missbraucht werden. Orientiere dich an [ref:self812;css/layouts/index.htm@title=diesen Beispielen].
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
-