Bild via z-index über den Body legen

[DaniEla13]

Hallo,

ich google mich nun schon seit Tagen dumm und und dämlich und finde keine Antwort auf folgende Frage:
Ich möchte ein Bild über den Body rausragen lassen. Das habe ich auch über den z-index und die entsprechenden Abstände hinbekommen:

Wenn ich jetzt allerdings das Browserfenster verkleinere, dann bleibt der Efeu stur auf seiner Position und sitzt dann mitten auf der Website und verdeckt anderes.
Mir wurde gesagt ich solle die Position auf von absolute auf relative stellen, damit der Efeu sich mit dem Browserfenster bewegt. Wenn ich das jedoch im CSS eingebe, dann rutscht mir meine komplette Seite UNTER diesen Efeu, also irgendwie scheint das den z-index zu beeinflussen...

Nochmal kurz gefasst, dieser Efeu soll auch bei dem Verkleinern des Browserfensters weiterhin zur Hälfte über den Body hinausragen!
Ich hoffe mir kann jemand helfen, die Seite ist fertig, es hakt nur noch an dieser Sache! :-(

 

[Tronjer]

Wieso über den Boy ragen lassen?

Von deinem Screenshot ausgehend, sollte der Body 100% groß sein und dieses hellgraue background-image erhalten. Da hinein legst du ein Div und positionierst das mit margin-auto, damit es zentriert wird. In dieses Div kommen zwei Elemente: Der Efeu und deine eigentliche Content-Box. Beide erhalten position:relative, float-left und der Efeu einen höheren z-index. Zum Schluss verschiebst du die Content-Box mit einem negativen Wert für left unter den Efeu.

 

[DaniEla13]

Okay, nur um mal zu sehen, ob ich das wirklich verstanden hab: Der Efeu und mein kompletter Content kommen in eine Div-Box, welche zentriert ist. Durch den z-index liegen diese beiden Elemente übereinander und durch den negativen Wert für left rutscht der Content UNTER den Efeu?
Entschuldige, wenn ich etwas schwer von Begriff bin, ich bin noch Anfängerin.

 

[Tronjer]

Ja, so hatte ich das gemeint.

 

[DaniEla13]

Hmm...das funktioniert irgendwie nicht. So verhauts mir die komplette Seite, vorallem, wenn ich meinem content float-left und position-relative gebe. Ich bin echt langsam am verzweifeln...! Der Efeu MUSS da hin und er soll da auch bleiben, wenn man das Fenster verkleinert! -.- Kann ich den nicht festtackern?!

 

[DaniEla13]

Ich habe es jetzt doch noch hinbekommen. Habe den Efeu in die falsche Div-Box gepackt. Jetzt ist er im Content-Div, Position-relative, float-left, rixgtig positioniert und verrutscht nicht mehr, wenn ich das Browserfenster verkleinere! SUPER!! Allerdings hängt er jetzt auf jeder Seite am unteren Rand und da jede Seite unterschiedlich lang ist, kann ich seine vertikale Position nicht bestimmen - wenn er auf der Startseite korrekt sitzt, dann leider auf den anderen Seiten nicht!

Muss ich jetzt jeden Efeu für jede Seite im CSS positionieren? Wäre ja prinzipiell kein Problem, so viele Seiten habe ich nicht aber ich möchte schon, dass er exakt positioniert ist und nicht bei jedem Seitenwechsel um ein paar Pixel "springt"!

Ich bitte um Antwort, die letzte hat mir schon sehr geholfen!! :)

 

[Tronjer]

Ich kenne deine Seite nicht, aber von der HTML-Struktur her hatte ich das so gedacht:

<div id="box">
     <div id="efeu"></div>
    <div id="content"></div>
</div>

Sofern du auf den Unterseiten nur den Inhalt von #content austauschst, sollte der #efeu immer an der selben Stelle bleiben.

 

[DaniEla13]

Ich habe das jetzt so gemacht:

    <div id="content">        
          <h2>Willkommen bei den Buchberg-Trollen</h2>            
                 <div id="gruppe">                
                         <img src="gruppenfoto.jpg" width="400"/></p>            
                 </div>                
                        <p>Wir w&uuml;nschen dir viel Spa&szlig; auf unserer Seite.</p>
        
                 <div id="efeu1">           
                        <img src="efeu_1.png" width="200"/></p>        
                  </div>                

                 <div id="efeu2">            
                        <img src="efeu_2.png" width="200"/></p>        
                </div>       
    </div>

entspr. CSS:

#content {
    min-height:700px;
    background-color: #666666;
    padding: 0;
    margin: 0 15em;
    z-index: 1;
}

#efeu1 {
    position: relative;
    z-index: 2;
    float: left;
    left: -310px;
    }
    
#efeu2 {
    position: relative;
    z-index: 3;
    float: right;
    right: -310px;
    }

und so sieht es jetzt aus:

 

[threadi]

Nur mal noch so als Hinweis: Dein Quellcode enthält mehrere unnötige </p> wodurch dein Quellcode nicht valide ist. Solltest Du noch beheben ;)

 

[DaniEla13]

Tatsache! Das ist bestimmt ein copy-paste Fehler! Danke für den Hinweis!! :)