Anzeige

Zwei übereinander liegende Objekte gemeinsam horizontal zentrieren...

Zwei übereinander liegende Objekte gemeinsam horizontal zentrieren... | PSD-Tutorials.de

Erstellt von Avalon, 02.11.2008.

  1. Avalon

    Avalon Ritter aus Leidenschaft

    Dabei seit:
    18.06.2006
    Beiträge:
    495
    Geschlecht:
    männlich
    Software:
    Gimp, Inkscape & Texteditor
    Zwei übereinander liegende Objekte gemeinsam horizontal zentrieren...
    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:

    Ebene auf Ebene mit z-index (Layer) - Lektion 15 | CSS Tutorial | HTML.net

    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.
     
    #1      
  2. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Zwei übereinander liegende Objekte gemeinsam horizontal zentrieren...
    AW: Zwei übereinander liegende Objekte gemeinsam horizontal zentrieren...

    du kannst sie ohne position und mit negativem margin übereinanderlegen:
     
    #2      
  3. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Zwei übereinander liegende Objekte gemeinsam horizontal zentrieren...
    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...
     
    #3      
  4. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Zwei übereinander liegende Objekte gemeinsam horizontal zentrieren...
    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:
    1.  
    2. <div id="Element1">
    3.  <div id="Element2">
    4.   &nbsp;
    5.  </div
    6. </div
    7.  
    css dazu
    HTML:
    1.  
    2. #Element1, #Element2 {
    3.  height: 50px;
    4.  width: 50px;
    5. }
    6. #Element1 {
    7.  background: url(bildadresse vom bild 1) no-repeat 0 0;
    8. }
    9. #Element2 {
    10.  background: url(bildadresse vom bild 2) no-repeat 0 0;
    11. }
    12.  
    Sollte so gehen wenn ich mich nicht verguckt hab oder was übersehen.
     
    #4      
  5. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Zwei übereinander liegende Objekte gemeinsam horizontal zentrieren...
    AW: Zwei übereinander liegende Objekte gemeinsam horizontal zentrieren...

    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 (Text):
      1. background-position:center;
      Mit background-position kann man die vertikale und horizontale Position definieren.
     
    Zuletzt bearbeitet: 03.11.2008
    #5      
Seobility SEO Tool
x
×
×