Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Zwei übereinander liegende Objekte gemeinsam horizontal zentrieren...“

Avalon

Ritter aus Leidenschaft

Ich möchte mit CSS zwei Objekte (z.B. Bilder) deckungsgleich übereinander legen und diese zugleich variabel horizontal zentrieren. Das Übereinanderlegen habe ich so wie in dieser Anleitung gemacht, was scheinbar funktioniert:



Mein Problem ist jetzt das variabel horizontal Zentrieren der beiden Objekte, mit der Positionierung "absolute" wird das kaum möglich sein? Am einfachsten wäre es wahrscheinlich, so sich die Positionierung des oberen Objekts an dem darunter orientiert. Toll wäre es auch so der "Textfluss" erhalten bleiben könnte, dass die ggf. nachfolgenden Objekte sich von selbst unterhalb der beiden positionieren. Danke für die Hilfe.
 

sokie

Mod | Web

AW: Zwei übereinander liegende Objekte gemeinsam horizontal zentrieren...

du kannst sie ohne position und mit negativem margin übereinanderlegen:
 

Top_Gun

Aktives Mitglied

AW: Zwei übereinander liegende Objekte gemeinsam horizontal zentrieren...

Hmmm, ich würde dir eine andere Lösung anbieten:

Du erstellst ein div mit einer festen Höhe (so hoch wie das höchste Bild ist), welches als Background dein erstes Bild bekommt. Diesen Background kannst du übers CSS horizontal und vertikal zentrieren.
In dieses eine div legst du ein weiteres div und verfährst mit dem zweiten Bild genauso wie mit dem ersten.
Der Effekt ist einfach, die Bilder liegen, bei gleicher Größe haargenau übereinander. So ersparst du dir die Positionierung und den Z-Index...
 

jackprince

xHTML & CSS Junkie

AW: Zwei übereinander liegende Objekte gemeinsam horizontal zentrieren...

Um die aussage von TopGun zu bekräftigen bzw. zu verdeutlich ...
Wir gehen davon aus das es sich um Bilder handelt?

html bsp.
HTML:
<div id="Element1">
 <div id="Element2">
  &nbsp;
 </div
</div

css dazu
HTML:
#Element1, #Element2 {
 height: 50px;
 width: 50px;
}
#Element1 {
 background: url(bildadresse vom bild 1) no-repeat 0 0;
}
#Element2 {
 background: url(bildadresse vom bild 2) no-repeat 0 0;
}

Sollte so gehen wenn ich mich nicht verguckt hab oder was übersehen.
 

Top_Gun

Aktives Mitglied

AW: Zwei übereinander liegende Objekte gemeinsam horizontal zentrieren...

Sollte so gehen wenn ich mich nicht verguckt hab oder was übersehen.
Da ich momentan genau mit dem Trick arbeite, weiß ich das es so geht, aber noch zwei Anmerkungen:

  1. Du brauchst keine Breite angeben. Beide divs sind dann trotzdem gleich groß.
  2. Zum Positionieren des Hintergrundes sollte man hiermit arbeiten:
    Code:
    background-position:center;
    Mit background-position kann man die vertikale und horizontale Position definieren.
 
Zuletzt bearbeitet:
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

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.856
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben