XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Fullscreen Container mit internen divs (http://xhtmlforum.de/showthread.php?t=59030)

purewhite 31.10.2009 11:20

Fullscreen Container mit internen divs
 
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 02.11.2009 16: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 ;)


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:38 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023