✔ 3 DIV Container. Wie 2 davon vertikal bzw. horizontal unendlich einstellen

simlancer

simlancer

Grünschnabel
Hallo.
Ich möchte gerne mit 3 div containern arbeiten.

Der erste stellt ein hintergrundbild dar, welches auf der y-Achse ins unendliche laufen soll ohne scrollbalken. Zudem soll er immer genau in der Mitte des Browserfenster sich einpassen und das obere Ende des Bildes mit dem Browserrand abschliessen.

Der zweite Container, stellt quasi das 2te hintergrund bild dar welches auf der x-Achse ins unendliche laufen soll ohne scrollbalken.
Zudem soll das obere Ende des Bildes mit dem Browserrand abschliessen.

Der dritte Container beinhaltet ein SWF File, welcher sich immer im Browser auf der x-Achse zentriert.
Zudem soll das obere Ende des Bildes mit dem Browserrand abschliessen (also auch über den 2 anderen containern liegen).

----

Ich hoffe ihr könnt mir helfen.
Hab ansätze hinbekommen, es t aber nicht alles.

PHP: 
body {
    background-color: #000000;
    margin:0;
    padding:0;
   

}
    #bild {
     }
     
    #red {
    position:relative;
    background-image: url(bilder/red_line.jpg);
    background-repeat: repeat-x;
     }
     
         #bg {
    position:relative;
    background-image: url(bilder/background2.jpg);
    background-repeat: repeat-y;
   
     }
   
-->
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>



<body>

<div id="bg" align="center">

  <div id="red">

    <div id="bild" align="center">
        // hier liegt mein SWF drinn
    </div>

  </div>

</div>


-----

Bei diesem Script, funktioniert das positionieren des SWF films und die Grafik im Container "red" wird auch ganz oben entlang in der x-Achse unendlich.
Jedoch passt das Hintergrundbild sich nicht immer Mittig an und wird auch nicht in der y-Achse unendlich.
 
Hi,

ein Hintergrundbild lässt sich auch entsprechend positionieren:

Code: 
#bg {
    position:relative;
    background-image: url(bilder/background2.jpg);
    background-repeat: repeat-y;
    background-position:center top;
   
     }


Und was verstehst du unter einer unendlichen Länge?

Falls das Hintergrundbild die volle Fensterhöhe ausfüllen soll, muß das Stylesheet entsprechend erweitert werden:

Code: 
html,body { height:100%; }

#bg {
    position:relative;
    background-image: url(bilder/background2.jpg);
    background-repeat: repeat-y;
    background-position:center top;
    height:100%;
   
     }


Sollte ich mit meiner Annahme jetzt falsch liegen, ist die Seite online erreichbar, um dort mal einen Blick drauf werfen zu können?

mfg Maik
 
Dann hab ich dir ja das richtige CSS-Rezept empfohlen.

//edit: Wenn #bg hier nur zur Aufnahme des Hintergrundbildes dient, kann darauf auch gänzlich verzichtet werden, und das Hintergrundbild stattdessen direkt für den Dokumentkörper definiert werden.

mfg Maik
 
hm, seltsam, bei mir funktioniert das nicht!

Hier mal meinen kompletten code:


PHP: 
<!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=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
background-color: #000000;
margin:0;
padding:0;
height:100%;

}
#bild {
}

#red {
position:relative;
background-image: url(bilder/red_line.jpg);
background-repeat: repeat-x;
}

#bg {
position:relative;
background-image: url(bilder/background2.jpg);
background-repeat: repeat-y;
background-position:center top;
height:100%;

}

}

}

-->
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>



<body>

<div id="bg" align="center">

<div id="red">
<div id="bild" align="center">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="770" height="671">
<param name="movie" value="flash/site3.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<!-- Dieses param-Tag fordert Benutzer von Flash Player 6.0 r65 und höher auf, die aktuelle Version von Flash Player herunterzuladen. Wenn Sie nicht wünschen, dass die Benutzer diese Aufforderung sehen, löschen Sie dieses Tag. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Das nächste Objekt-Tag ist für Nicht-IE-Browser vorgesehen. Blenden Sie es daher mit IECC in IE aus. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flash/site3.swf" width="770" height="671">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Im Browser wird für Benutzer von Flash Player 6.0 und älteren Versionen der folgende alternative Inhalt angezeigt. -->
<div>
<h4>Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player herunterladen" width="112" height="33" /></a></p>
</div>


<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</div>
</div>
</div>
  	
- 	</body>
</html>
 
Zuletzt bearbeitet:
Das ist nicht seltsam, sondern logisch, da du meine Empfehlung nicht vollständig übernommen hast.

mfg Maik
 
ok dann peile ichs nicht ;)


könntest du vielleicht den code dementsprechend korrigieren und den ganzen nochmal posten oder per pn?
 
Zwei intakte Augen zum Lesen hast du doch, oder?

Maik hat gesagt.:
Falls das Hintergrundbild die volle Fensterhöhe ausfüllen soll, muß das Stylesheet entsprechend erweitert werden:

Code: 
html,body { height:100%; }

#bg {
    position:relative;
    background-image: url(bilder/background2.jpg);
    background-repeat: repeat-y;
    background-position:center top;
    height:100%;
   
     }
Zum Vergrößern anklicken....

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück