Antworten auf deine Fragen:
Neues Thema erstellen

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

S

simlancer

Noch nicht viel geschrieben

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.
 

H

Herr_D

offline

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

?=¿


Zeichnung?



Zu was sollen die Dinger denn relativ positioniert werden?
 
T

Top_Gun

Aktives Mitglied

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

Sniperfan

Guest

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
 
S

simlancer

Noch nicht viel geschrieben

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

Also hier ein Bild zur verdeutlichung:
 
Zuletzt bearbeitet:
S

Sniperfan

Guest

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
 
Zuletzt bearbeitet von einem Moderator:
S

simlancer

Noch nicht viel geschrieben

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:
 
Zuletzt bearbeitet:
H

Herr_D

offline

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

stb_87

Web-Sheriff - ohne Bild

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

Gib dem body mal height: 100%
 
S

simlancer

Noch nicht viel geschrieben

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

stb_87

Web-Sheriff - ohne Bild

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

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

simlancer

Noch nicht viel geschrieben

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!
 
H

Herr_D

offline

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
 
Zuletzt bearbeitet:
T

Top_Gun

Aktives Mitglied

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

Herr_D

offline

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...
Zum Vergrößern anklicken....



Wer weiß ;) ...die Zeichnung ist ja wech...


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

Top_Gun

Aktives Mitglied

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...
Zum Vergrößern anklicken....
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 ;)
 
S

simlancer

Noch nicht viel geschrieben

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">
<!--
html,body { height:100%; }
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;
background-position:center top;
height:100%;

}

}

}

-->
</style>
Zum Vergrößern anklicken....

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
 
H

Herr_D

offline

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?
 
Zuletzt bearbeitet:
S

simlancer

Noch nicht viel geschrieben

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
 
H

Herr_D

offline

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 ;))
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 152 (Mitglieder: 6, Gäste: 146)
Robots: 361

Statistik des Forums

Themen
118.636
Beiträge
1.538.484
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben