CSS: Positionierungsprobleme

Hexa

Hallo zusammen,

hab nen richtiges gutes Problem bzgl. Positionierung.

Ich habe ein Backgroundimage, das 1px breit und 400 px hoch ist, per

html {
	height: 100%;
	margin: 0;
	padding: 0;
        }

  body {
    background-image:url(verlaufv2.gif);
    background-position: bottom;
    background-repeat:repeat-x;
  }

eingefügt.

Soweit so gut.

Jetzt habe ich ein Bild, das ich am unteren Rand des Browserfensters (bottom: 0px) zentrieren möchte.

Desweiteren soll ein Bild am oberen Rand (top: 0px) zentriert werden.

Ich egal was ich probiere, es kommt nur Mist raus!

Hatte mir auch mal überlegt das Bild, dass ganz unten ist, als zweiten Hintergrund zu definieren, aber das ging komplett daneben.

Hat wer Vorschläge?

Vielen Dank,

Hexa

mach doch zwei absolut positionierte Container (einer für oben und einer für den Fuß). Da kannst du dann die anderen Hintergrundbilder genauso definieren.

Du kannst einen Container afaik kaum (funktionierend) am unteren Seitenende positionieren. Selbst bei übergeordnetem HTML-Tag mit height: 100%; interpretieren alle mir bekannten Browser ein position: bottom; relativ zur Fenstergröße. Das heißt, wenn du vertikal scrollst, hängt das <div> frei im Raum.

Du kannst natürlich ein <div> mit height: 80%; machen und darunter ein <div> mit height: 20%; klatschen, und dann ein Scrollen innerhalb des 80er realisieren. Aber mit Hintergrundbildern ist das dann immer noch so eine Sache ...

.unten, .oben 
  {
    position:absolute;
    height:15px;
    width: 80px;
    margin:0 50%;
    background-image:url(2.gif);  
    background-repeat:no-repeat; 
  }
  .unten
  {
    bottom:0px;
  }
  .oben
  {
    top:0px;
  }

árn[y]ék schrieb:

Das heißt, wenn du vertikal scrollst, hängt das <div> frei im Raum.

Dann muss mann das halt etwas "verpacken".

html 
{  
  margin: 0; 
  padding: 0; 
} 
.content
{
  position:absolute;
  background-image:url(1.gif); 
  background-position: bottom; 
  background-repeat:repeat-y; 
  left:0px;
  height:100%;
  width:100%;
  top:0px;
}
.unten, .oben 
{
  position:absolute;
  height:15px;
  width: 80px;
  margin:0 45%;
  left:0px;
  background-image:url(2.gif);  
  background-repeat:no-repeat; 
}
.unten
{
  bottom:0px;
}
.oben
{
  top:0px; 
}

<body>
<div class="content">
<div class="oben"></div>
Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>
<div class="unten"></div>
</div>
</body>

html 
{  
  margin: 0; 
  padding: 0; 
} 
.content
{
  position:absolute;
  background-image:url(1.gif); 
  background-position: bottom; 
  background-repeat:repeat-y; 
  top:0px;
  left:0px;
  width:100%;  
  min-height:100%;
  height:auto%;
}

.unten, .oben 
{
  position:absolute;
  height:15px;
  width: 80px;
  margin:0 45%;
  left:0px;
  background-image:url(2.gif);  
  background-repeat:no-repeat; 
}
.unten
{
  bottom:0px;
}
.oben
{
  top:0px; 
}

<html><head><link rel="stylesheet" type="text/css" href="./css/style.css" />
<!--[if IE]>
<style type="text/css">
.content{height:100%;}
</style>
<![endif]-->
</head>
<body>
<div class="content">
<div class="oben"></div>
Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>
<div class="unten"></div>
</div>
</body>
</html>