Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Absolute Position in Responsive Webdesign“

S

seomania

Guest

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.
 

S

seomania

Guest

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

MyBad

localhorst

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

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

CSS:
HTML:
.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.
 
S

seomania

Guest

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

localhorst

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

seomania

Guest

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

localhorst

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

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.224
Neuestes Mitglied
Aliyah79
Oben