nicht angemeldet
Absolut Positioniertes Element & scrollen
Hallo Leute,
ich habe ein absolut positioniertes Element mit der Größe von 500px; welches per bottom:0px; immer unten am Browserfenster klebt.
Das Problem ist nun das wenn das Browserfenster auf < als 500px resized wird, dann sieht man nur den unteren Teil der Box, und man kann auch nicht scrollen, sodass man den oberen Text sehen könnte.
Habt Ihr da eine Idee?
Danke,
Sigurd
-
"overflow" ist Dein Stichwort.
Beste Grüße,
gelu-
Hi!
Danke für Deine Antwort. Habe ich probiert, aber es scheint nicht zu klappen. Auf welches Element sollte ich es denn Anwenden, auf die Box oder Body?
Danke!
Gruß, Sigurd.
"overflow" ist Dein Stichwort.
Beste Grüße,
gelu-
Hallo Sigurd,
guckst du http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=hier
Beste Grüße,
gelu-
Hi,
das klappt leider nicht. Nur wenn der Inhalt des DIV Elementes größer ist als das DIV Element. Das ist bei mir aber nie der Fall. Ich habe das Problem wenn das Browserfenster kleiner als das DIV Element ist, das dann keine Scrollbalken angezeigt werden. Normalerweise schon. Allerdings ist es bei mir so das dieses DIV Element absolut positioniert ist und mit bottom:0px; unten am Browserfenster klebt. Und das ist der Grund wieso die nicht erscheinen. Aber wieso ist es so? Das verstehe ich irgendwie nicht?
Vielen Dank!
Sigurd.
Hallo Sigurd,
guckst du http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=hier
Beste Grüße,
gelu-
Hallo Sigurd,
wenn du den Scrollbalken _am Browserrand_ haben willst, dann verzichte auf die
absolute Positionierung und verwende relative.Beste Grüße,
gelu-
Hallo Gelu,
erst einmal Danke für die Antworten. Wenn ich die relative Positionierung verwende, dann klappt es, aber irgendwie ignoriert der Browser dann die bottom:0px; Angabe, sodass das Element ganz oben anfängt und nicht wie zuvor am Boden pappt.
Meine Angaben zu dem Element sind wie folgt:
width:1020px;
height:697px;
position:relative;
left:50%;
margin-left:-510px;
bottom:0px;Geht das denn nicht mit den Scrollbalken am Browserrand und einer Positionierung am Browserboden?
Danke!
Gruß, Sigurd
Hallo Sigurd,
wenn du den Scrollbalken _am Browserrand_ haben willst, dann verzichte auf die
absolute Positionierung und verwende relative.Beste Grüße,
gelu-
Hallo Sigurd,
schön, dass du jetzt _endlich_ einen Schnipsel deines css preisgibst. Wie sieht der Rest aus? Was ist das html-Gerüst darunter?
Beste Grüße,
gelu-
Hallo Gelu,
das CSS:
=================================================
body {
background-color:#fff5e5;
margin:0px;font-family: Georgia, sans-serif;
font-size:12px;}
#mainpage {
width:1020px;
height:697px;position:absolute;
left:50%;
margin-left:-510px;
bottom:0px;
}=================================================
das HTML:
=================================================
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<!--[if IE]>
<style type="text/css">@import url(ie6styles.css);</style>
<![endif]-->
</head>
<body>
<div id="mainpage">
Test
</div>
</body>
</html>=================================================
Danke und Gruß,
SigurdHallo Sigurd,
schön, dass du jetzt _endlich_ einen Schnipsel deines css preisgibst. Wie sieht der Rest aus? Was ist das html-Gerüst darunter?
Beste Grüße,
gelu-
Hallo Sigurd,
#mainpage {
position:relative; margin-left:auto; margin-right:auto;
width:1020px;
height:697px;
bottom:0px;
}zeigt bei mir im IE8 und FF 3.5.4 das gewünschte Ergebnis.
Mit den Angaben "left:50%; margin-left:-510px;" (damit willst du vermutlich eine horizontale Zentrierung erreichen) handelst du dir ein unnötiges Problem ein: wenn der Viewport kleiner ist als 1020, wird der Inhalt rechts abgeschnitten; "auto" für margin-left und margin-right tut's auch.
Gib deinem div testweise mal einen Rahmen (border:1px solid red;), dann kannst du verfolgen, wie sich veränderte Angaben auswirken.Beste Grüße,
gelu-
Hallo Gelu,
Vielen Dank für die Antwort. Bei mir ist es aber so das das Mainpage DIV nun wieder oben klebt und nicht unten am Browserrand. Hast Du sonst noch was geändert, weshalb es bei Dir funktioniert?
Danke,
SigurdHallo Sigurd,
#mainpage {
position:relative; margin-left:auto; margin-right:auto;
width:1020px;
height:697px;
bottom:0px;
}zeigt bei mir im IE8 und FF 3.5.4 das gewünschte Ergebnis.
Mit den Angaben "left:50%; margin-left:-510px;" (damit willst du vermutlich eine horizontale Zentrierung erreichen) handelst du dir ein unnötiges Problem ein: wenn der Viewport kleiner ist als 1020, wird der Inhalt rechts abgeschnitten; "auto" für margin-left und margin-right tut's auch.
Gib deinem div testweise mal einen Rahmen (border:1px solid red;), dann kannst du verfolgen, wie sich veränderte Angaben auswirken.Beste Grüße,
gelu
-
-
-
-
-
-
-
-
-