Absolute Position in Responsive Webdesign

[seomania]

Hallo Gemeinde,

ich möchte für ein Restaurant eine responsive Webseite erstellen. Mein Problem dabei ist, dass der Kunde im Headerbereich eine Slideshow die in 2 darauf liegenden Wellen eingebettet werden soll, haben möchte (siehe Anhang). Mit meinem aktuellen Code klappt das allerdings nicht so. Momentan wird zwar das Bild slider_inside.jpg angezeigt jedoch die Wellle nicht.
Der slider_bottom.png im #slider_wrapper ist die Welle die auf dem Bild liegt.


<div id="slider">
<div id="slider_wrapper">
<div id="slider_inside"><img src="images/slider_inside.jpg"></div>
</div>
</div>

#slider {
clear: both;
margin-left: 0;
width: 100%;
display: block;
float: left;
height: 100%;
}
#slider_wrapper {
clear: both;
float: left;
width: 100%;
display: block;
height: 100%;
margin: 0;
padding: 0px;
position: relative;
background-image: url(../images/slider_bottom.png);
background-repeat: no-repeat;
background-position: left center;
z-index: 500;
}
#slider_inside {
width: 100%;
display: block;
position: relative;
z-index: 0;
height: 100%;
margin: 0px;
padding: 0px;
clear: both;
float: left;
}


Kann mir jemand helfen? Vielen Dank schon mal.

 

[Myhar]

Was ist bei deinem Code denn ? Bzw. auf deinem Bild?

 

[seomania]

die Welle ist das geschwungene oben = gold und unten = rot.
Das ist eine png Datei die auf dem eigentlichen Bild liegen soll.

 

[MyBad]

Gibt mehrere Wege das zu realisieren. Dies wäre eine Möglichkeit:

MARKUP:

<div class="slider">
     <div class="slider-wrapper">...</div>
     <div class="mask"><img src=".../wellenbild.png" alt="..."></div>
</div>

CSS:

.slider{
position: relative;
}
.mask{
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 2;
}

Es geht auch noch mit weniger Markup und wenn man das Wellenbild als Background zuweist. Aber mein Beispiel sollte auch in älteren Browsern tadellos laufen.

 

[seomania]

hallo,


erst mal vielen Dank. Ich glaube ich habe es falsch beschrieben. Die ganze Sache besteht aus 2 Grafiken. Einmal das Eigentliche Bild welches Als Slideshow fungieren soll (zu sehen ganz oben mit der Kerze etc.) und auf diesem Bild soll dann die Grafik mit den 2 geschwungenen Linien liegen die im mittleren Bereich transparent sind. Dies soll alles responsive tauglich sein.

 

[MyBad]

hallo,


erst mal vielen Dank. Ich glaube ich habe es falsch beschrieben. Die ganze Sache besteht aus 2 Grafiken. Einmal das Eigentliche Bild welches Als Slideshow fungieren soll (zu sehen ganz oben mit der Kerze etc.) und auf diesem Bild soll dann die Grafik mit den 2 geschwungenen Linien liegen die im mittleren Bereich transparent sind. Dies soll alles responsive tauglich sein.

Ja, so habe ich das auch verstanden und meine Lösung sollte daher auch zielführend sein.

In div.slider-wrapper kommt dein Bild mit dem Tisch und in div.mask das Bild mit der Wellen-Grafik. Dieses wird per CSS dann eine Ebene über dem Bild mit dem Tisch positioniert. Das Ganze ist dann auch responsive.

Wo hakt es denn aktuell?

 

[seomania]

Wenn ich deinen Code verwende kommt das weiter unten bei raus.

HTML:
<div class="slider">
<div class="slider-wrapper"><img src="images/slider_inside.jpg"></div>
<div class="mask"><img src="images/slider_bottom.png"></div>
</div>

CSS:

.slider{
position: relative;
}
.mask{
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 2;
}

 

[MyBad]

Es wäre super, wenn du deine Seite mal online stellen könntest. Man müsste mehr von deinem Markup und CSS sehen.

Es sieht so aus, als würde sich noch mehr als nur das Bild des Tisches in deinem div.slider befinden.

 

[seomania]

http://fiwatest.de/schreiber/

 

[MyBad]

Du hast ganz viele überflüssige floats gesetzt. Verpasse der Klasse .slider{} einfach mal ein clear:both;