Grafik richtig ausrichten

Hallo,

ich habe ein kleines Problem mit meiner Website. http://schoengeist-design.de/contao/

Die Orchidee, die sich jetzt links über dem Footer befindet, soll auf der rechten Seite angezeigt werden und zwar so, dasss sie halb in der Werbemittel Box hängt.

Irgendwie stehe ich grad auf dem Schlauch. Wenn ich die Position fixe, kann ich zwar bestimmen, dass das Bild vertikal immer an der selben Stelle sitzt, aber horizontal ist es immer abhängig von der Auflösung.

Ich hoffe ich konnte mein Problem verständlich erklären.

Schöne Grüße

right:0 anstelle left:0 ?

hi fiedsch,

right funktioniert so nicht, da die Grafik, ja abhängig vom Bildschirm immer am Rand steht und nicht abhängig vom wrapper

Probier mal

left:50%;
margin-left:312px;

Bei großen Bildschirmbreiten stimmt es dann wohl. Kann ich leider nicht richtig ausprobieren im Moment, da mein großer Monitor abgeraucht ist, mehr als 1024 ist momentan nicht drin. Wird das Fenster schmäler, dann sieht allerdings sowieso alles wieder völlig anders aus. (Edit: nur wegen media query, nicht wegen des vorgeschlagenen CSS ;) )

Edit2: Die 312 px kommen übrigens so zustande: 0.5 * (Breite Wrapper) - 0.5 * (Breite Bild)

Ich habe mit Firebug etwas rumgebastelt und den div "blume" verschoben.

Er ist jetzt dort:

HTML-Code:

---

<div id="startseite" class="mod_article first last block">
  <div class="inside">
    <div id="blume"></div>
    <section id="slideshow_startseite" class="ce_flexSlider first block">
    <script> ...
    <div class="mod_newslist block">
    <section class="ce_colsetStart subcolumns colcount_3 yaml3 col-33x33x33"> ...
  </div>
</div>

---

und ich habe right:0 verwendet.

Mit etwas Finetuning sollte es so gehen. Wie Du den div im Contao Backend dann an diese Stelle bekommst kann ich Dir jetzt leider nicht sagen ohne das zu sehen.

Du arbeitest ja noch mit fester Breite des Layouts, zumindestens für viewports größer 1024px.
Ich würde wohl den wrapper (ggf. auch container und main) verbreitern und dort das Bild als Hintergrund mit background-attachment: fixed an die richtige Stelle bringen. In welchem div das am besten funktioniert hab ich jetzt nicht getestet.

Zitat:

---

Zitat von herbert

Hallo,

ich habe ein kleines Problem mit meiner Website. http://schoengeist-design.de/contao/

Die Orchidee, die sich jetzt links über dem Footer befindet, soll auf der rechten Seite angezeigt werden und zwar so, dasss sie halb in der Werbemittel Box hängt.

Irgendwie stehe ich grad auf dem Schlauch. Wenn ich die Position fixe, kann ich zwar bestimmen, dass das Bild vertikal immer an der selben Stelle sitzt, aber horizontal ist es immer abhängig von der Auflösung.

Ich hoffe ich konnte mein Problem verständlich erklären.

Schöne Grüße

---

PHP-Code:

---

#footer {
    position:relative;
}

#blume {
    position: absolute;
    right: -300px; /* adjust as desired */
    bottom: 0;
    left: auto;
} 


---

Alles andere ist doch unnötig kompliziert?

Zitat:

---

Zitat von tab

Probier mal

left:50%;
margin-left:312px;

Bei großen Bildschirmbreiten stimmt es dann wohl. Kann ich leider nicht richtig ausprobieren im Moment, da mein großer Monitor abgeraucht ist, mehr als 1024 ist momentan nicht drin. Wird das Fenster schmäler, dann sieht allerdings sowieso alles wieder völlig anders aus. (Edit: nur wegen media query, nicht wegen des vorgeschlagenen CSS ;) )

Edit2: Die 312 px kommen übrigens so zustande: 0.5 * (Breite Wrapper) - 0.5 * (Breite Bild)

---

Drück' einfach Strg+Shift+M im FireFox, dann gib' links oben bspw. 1920x600 ein ;)

Ok, das hilft wenigstens zum Testen übers Wochenende. Ersatz sollte Montag eintreffen :)

danke leute,
die ganzen Hinweise haben mir sehr geholfen.
Ich weiß leider nicht, wie man den Beitrag auf gelöst setzt.

Danke