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

simlancer · 17.12.2008

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 funzt 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.

Herr_D · 17.12.2008

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

?=¿

Zeichnung?

Zu was sollen die Dinger denn relativ positioniert werden?

Top_Gun · 17.12.2008

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

Öh? Ins unendliche würde aber heißen, dass es einen Scrollbalken gibt, nämlich einen unendlichen... und entweder du zentrierst das oder du lässt es bis zum Rand laufen... Ich verstehe nicht im geringsten was du nun haben willst und was nicht...

Sniperfan · 17.12.2008

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

Grafiken vielleicht mal so einbinden ^^

PHP:

background: url('wasauchimmer.jpg/.png/...') repeat-y;

Aber was du jetzt mit Scrollbalken und Unendlichkeit meinst ist mir ein Rätsel.
Hoffe aber ich konnte dennoch helfen.

MfG

simlancer · 17.12.2008

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

Also hier ein Bild zur verdeutlichung:

Sniperfan · 17.12.2008

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

Sollte dann so aussehen:

PHP:

#red {
    position: relative; 
    background: url('./bilder/red_line.jpg') repeat-x;
    width: 100%;
}
     
#bg {
    position: relative; 
    background: url('./bilder/background2.jpg') repeat-y;
    height: 100%;
}


// Edit
#flash {
    display: block;
    float: inherit;
    margin-top: -25px;  //Variiert je nach Höhe der Datei 'red_line.jpg'
    margin-left: auto;
    margin-right: auto;
// End Edit

Ich übernehme keine Garantie das es auch fehlerfrei funktioniert, da ich grad zu faul bin um es auszuprobieren ^^

MfG

simlancer · 17.12.2008

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

hm, funktioniert nicht. Das Background Bild (im container bg) wird nicht bis zum browser ende in der
y-achse angezeigt. sonst geht alles.

Hier mal mein ganzer code:

PHP:

Herr_D · 17.12.2008

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

was soll die Position relative?

wie sehen die Hintergründe aus? Farben bilder? was?

im Prinzip:

dem Body einen bg zuordnen mittig oben zentriert wiederholung nach unten

dann ein div breite 100% mit hintergrundbild oben angeordnet wiederholung nach rechts

in dem div per margin (text-align: center für alte Browser) den flashfilm anordnen

stb_87 · 17.12.2008

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

Gib dem body mal height: 100%

simlancer · 17.12.2008

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

Die Hintergründe sind jeweils Bilder.

Body 100% hab ich doch?! Oder?
Siehe: ganzer Script

stb_87 · 17.12.2008

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

Sorry, beim Überfliegen eben total übersehen, ignoriere das einfach...

simlancer · 17.12.2008

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

Ja, aber mit den 100% war gar nicht schlecht:

html,body { height:100%; }

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

}So gehts!

Herr_D · 17.12.2008

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

HTML:

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>100</title>
<meta name="author" content="R.D">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

<style type="text/css">
<!--
* {margin:0; padding:0; }
html, body {width:100%; height:100%;}

body {
background-image:url(xpu/001.jpg);
background-position:top center;
background-repeat:repeat-y;
}

#obenlatte {
width:100%;
background-image:url(xpu/bgcontent.gif);
background-repeat:repeat-x;
background-position:top left;
text-align:center;
}

#flasho {
margin:auto;
width:500px;
height:400px;
background-color:#dedede;
text-align:left;
}

-->
</style>
</head>
<body >
<div id="obenlatte">
<div id="flasho"></div></div>
</body>
</html>

statt dem flash hab ich nen div eingebaut, in den schreibst du deinen flashcode... Werte, Namen und id-Bezeichnungen anpassen

Top_Gun · 17.12.2008

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

Probier es mal so:

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=utf-8" /> 
<title>Unbenanntes Dokument</title> 
<style type="text/css"> 
<!-- 
* {  
    margin:0; 
    padding:0;   
} 
body {
    background-color: #000000; 
    height:100%;  
    width:100%;
}    
#bg {  
    background-image: url(bilder/background2.jpg); 
    background-repeat: repeat-y; 
    background-position:center top; 
    width:100%;
    height:100%;    
}       
#red { 
    background-image: url(bilder/red_line.jpg); 
    background-repeat: repeat-x; 
    background-position:top; 
    width:100%;
    height:100%; 
}   
#bild { 
    background-image: url(bilder/background.jpg); 
    background-repeat: repeat-y; 
    background-position:center top; 
    width:100%;
    height:500px;   
} 
         
--> 
</style> 
</head> 
<body> 
<div id="bg">
<div id="red">
<div id="bild"> 
  
        Flash
</div>
</div>
</div> 
</body> 
</html>

Vorraussetzung ist, dass die Hintergrundgrafiken die entsprechenden Größen haben:
Die rote Linie die richtige Höhe, die anderen Grafiken die richtige Breite...

EDIT:
@Herr_D fehlt bei dir nicht noch der eine Kasten? Er will neben der Leiste doch zwei Kästen mit jeweils nem Hintergrund haben, dachte ich...

Herr_D · 17.12.2008

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

Top_Gun schrieb:
EDIT:
@Herr_D fehlt bei dir nicht noch der eine Kasten? Er will neben der Leiste doch zwei Kästen mit jeweils nem Hintergrund haben, dachte ich...

Wer weiß

...die Zeichnung ist ja wech...

...aber warum wird der Body nicht genutzt? das spart ein div...

Top_Gun · 17.12.2008

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

Herr_D schrieb:
...aber warum wird der Body nicht genutzt? das spart ein div...

Der Body soll doch schwarz sein?!
Darauf mittig ein Kasten bis Unten, darüber die oben am Rand von Links nach Rechts die Leiste, darüber mittig der kleine Kasten...
so hatte ich es verstanden

Aber scheinbar hat er jetzt etwas gefunden das erstmal in wenigstens einem Browser funktioniert. Wir wollen mal sehen wann er wieder kommt

simlancer · 17.12.2008

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

hehe

zur Aufklärung:
JA, der body soll schwarz sein, mittig & immer zentriert ein bild als Hintergrund bis unten.
Darauf das SWF immer zentriert & mittig. Und ganz oben entlang ein bild bis bis zum rand auf der x_Achse.

So hat es geklappt:

<style type="text/css">

</style>

Funktioniert im aktuellen Internet Explorer & Firefox.
Andere Browser hab ich nicht.
Zudem ist der quelltext im Validator valide.

Ich glaub das paßt dann.
Oder was meint ihr?

die besten Grüße & Danke an alle die sich die Mühe gemacht haben mir zu helfen

Herr_D · 17.12.2008

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

Na ja hab ichs richtig verstanden... dein css ist... *hust*

was ist

#bild {
}

was sollen die leeren }}?

also ich will ja nicht pingelicher sein als der Pabst, aber mir fällt grad noch ne Lösung ein, die nur ein div erfordert

moment....

edit: Soll die Flash mittig (oben und Seite) vom Browserfenster sein?

simlancer · 17.12.2008

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

ja soll sie

und oben bis zum browserrand ohne abstand. also quasi über dem einen hintergrund bild

Herr_D · 17.12.2008

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

Code:

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>100</title>
<meta name="author" content="R.D">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

<style type="text/css">
<!--
* {margin:0; padding:0; }
html, body {width:100%; height:100%;}

body {
background-color:#000;
background-image:url(grafixx/bgoben.gif);
background-position:top left;
background-repeat:repeat-x;
text-align:center;

}

#mittendrin {
width:500px;
height:100%;
background-image:url(grafixx/bgflash.gif);
background-repeat:repeat-y;
background-position:top center;
text-align:center;
margin:auto;
}


-->
</style>
</head>
<body >
<div id="mittendrin">
<object type="application/x-shockwave-flash" width="320" height="250"
wmode="transparent" data="flv/mediaplayer.swf?file=portishead_rip.flv">
 <param name="movie" value="flv/mediaplayer.swf?file=portishead_rip.flv" />
 <param name="wmode" value="transparent" />
</object>
</div>
</body>
</html>

100

mitte etwas breiter gemacht als den Flashfilm... (der läd auch noch hoch dsl378 sucks

)