Fullscreen Container mit internen divs

purewhite · #1 (**permalink**) 31.10.2009, 10:20

Hallo zusammen,
ich versuche einen Fullscreen Div-Container (mit Fullscreen Hintergrund zentriert) mit 3 weiteren Divs zu füllen. Diese 3 weiteren Divs sollen an einer festen Position (auch zentriert) sich mit der Fullscreen-Container-Größe ausrichten.
Ich habe das Problem, dass die weiteren Divs statisch auf der Seite kleben und bei einem Resize des Fensters, diese Divs sich nicht mitbewegen bzw. neu ausrichten.
Könnte mir hier jemand helfen?
Danke und Viele Grüße
PW

Folgend Code für Fullscreen und Divs:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test mit Divs</title>

<style type="text/css">

  body{ height:100% }
  div.container{
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
	height:100%;
	
	background:#eee;
	background-image: url(backgroundimage.jpg);
	background-repeat:no-repeat;
	background-position:center;

	text-align:center;
  }
  #imageone {
	width:355px;
	height:54px;
	position:absolute;
	left: 650px;
	top: 640px;
}
  #imagetwo {
	width:355px;
	height:54px;
	position:absolute;
	left: 440px;
	top: 564px;
}
  #imagethree {
	width:355px;
	height:54px;
	position:absolute;
	left: 850px;
	top: 568px;
}
</style>

</head>
<body>


<div class="container">
  <div id="imageone">Div für erstes Bild"</div>
    <div id="imagetwo">Div für zweites Bild"</div>
      <div id="imagethree">Div für drittes Bild"</div>
</div>


</body>
</html>

andir · #2 (**permalink**) 02.11.2009, 15:24

Hallo,

das ist ja auch kein Wunder, du vergibst fixe Werte für deine Bildcontainer, während body unterschiedlich groß sein kann - je nach Browserfenster und Bildschirmauflösung.

Möglich wäre das mit prozentualen Werten für die Positionierung, die Technik für sowas (horizontales Ausrichten) geht z.B. etwa so:

Code:

 #bildcontainer {

position:absolute;
left: 30%;  /* bezieht sich auf Elterncontainer */
margin-left: -150px; 

}

Der negative margin-left ist hier halb so breit wie die Breite des Containers.

Ich fürchte jedoch, dass bei der fixen Breite deiner Container jegliche wohl gewünschte "flexible" Lösung ein wenig überfordert ist. Die Dinger haben zusammen über 1050 px Breite, wie klein soll es denn werden? Auch die Container müssten in der Größe schrumpfen

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
divs mit position:absolute zentrieren	Karas	CSS	3	12.09.2009 20:05
Floatende DIVs fallen aus Container raus	mimii	CSS	3	13.01.2009 11:48
Container geht nicht über alle anderen divs	Hurrican	CSS	1	10.08.2008 10:12
Positionierung von Container horizontal	mayhemtl	CSS	9	11.08.2007 15:25
Zwei DIV's mit float in anderem DIV Container	mnitsch	CSS	2	09.05.2007 16:33