Problem mit dem zentrieren

  • Hallo zusammen,
    ich möchte gerne auf meiner Webseite eine Bildergalerie einbauen, die beim anklicken des Titelbildes geöffnet wird. Dabei habe ich diese Bildergalerie mit position:absolut und z-index nach vorne gesetzt, nun will ich die Bilder mit margin-right:auto und margin-left:auto zentrieren. Dabei bleibt das Bild jedoch oben Links in der Ecke und bei px angaben oder % verschiebt es sich.
    Mein Code:

    HTML:
    <div class="abdunkeln">
    </div>
    <div class="rahmen2"><!--Den will ich mittig haben-->
    ...<!--hier sind alle Bilder in einer Liste, als Bildergalerie, wahrscheinlich unsauber, aber funktionsfähig-->
    </div>

    CSS:
    .rahmen2 {
    margin-top: 5%;
    margin-right:auto;
    margin-left:auto;
    border-radius: 5px;
    padding-bottom:50px;
    padding-left:50px;
    padding-right:50px;
    padding-top:50px;
    height: auto;
    width: auto;
    background-color:#FFFFFF;
    position:absolute;
    z-index:4;
    }


    .abdunkeln {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color:#000;
    opacity: 0.8;
    z-index:3;
    }

    Ich hab den code schon paar mal neu geschrieben und finde den Fehler einfach nicht. Ich fände es klasse, wenn mir jemand helfen kann :)

    MfG Klaus

  • also auf fix hab ich im firebug dem .rahmen2 ne breite von 800px gegeben und nen position:relative und da wars zentriert, aber mir fehlt akut auch die zeit, dein codekonstrukt zu zerpflücken und die alle evtl fehler aufzuzaigen ;)

  • Hab es mal ausprobiert, jedoch ist es doch ein komplett falscher weg, weil dann der rahmen vor die Seite gestellt wird oder danach.
    Ich bekomme auch alle relative Teile zentriert nun ist nur mein Problem, dass es nicht mit dem absolut Teil geht, wenn es überhaupt geht.
    Heute ist es auch schon zu spät, wenn sich demnächst ein wenig Zeit finden lässt würde ich mich sehr freuen :)
    Bin leider erst seit Kurzem beim programmieren mit CSS und HTML5 und am besten lerne ich, sowie andere, mit learning-by-doing :D

    Einmal editiert, zuletzt von Klaus4334 (11. Juni 2013 um 23:09)

  • Habe jetzt verstanden, woran es ein Problem gibt. Habe es jetzt so gelöst:

    Jedoch vermute ich nun, dass es mit CSS alleine nicht möglich ist, bei unbekannter breite, die Galerie mittig zu setzen. Ich wollte die Galerie nämlich nochmal neu programmieren und nun mit verschieden großen Bildern arbeiten. Wisst ihr noch eine Möglichkeit dies mit pur CSS hin zu bekommen?
    Habe in einem Forum die einzige Möglichkeit gefunden, die Breite über JavaScript zu bestimmen.

    Einmal editiert, zuletzt von Klaus4334 (12. Juni 2013 um 15:10)

  • Den habe ich auch ausprobiert, aber dabei wird der Rahmen und der Hintergrund nicht mehr richtig angezeigt :/
    Hast du dir meine Webseite angeschaut und auf das auf dieser probiert oder nur an Hand meines geposteten codes?

    Noch eine Frage am Rande, lässt sich z-index bei allen positions angeben?
    Außerdem, kann mir jemand sagen, warum mein Dropdown menü auf allen jeglichen Computer und Handys, mit allen von mir getesteten Browsern funktioniert, nur Apples Geräte dieses nicht öffnen wollen, wobei IOS Simulatoren dagegen dies anzeigen? -.-

    Einmal editiert, zuletzt von Klaus4334 (12. Juni 2013 um 20:32)

  • Ich habe das auf deiner Seite probiert und konnte keine Probleme feststellen.
    Lade das ggf. nochmal geändert hoch.
    Der z-index benötigt entweder ein position absolute oder ein position relative.

    Zum Klappmenue hilft möglicherweise hier die Ziffer 12, hab's aber selbst mangels dieser Geräte nicht ausprobiert.


  • Außerdem, kann mir jemand sagen, warum mein Dropdown menü auf allen jeglichen Computer und Handys, mit allen von mir getesteten Browsern funktioniert, nur Apples Geräte dieses nicht öffnen wollen, wobei IOS Simulatoren dagegen dies anzeigen? -.-

    Das Menu wird auf keinem Smartphone oder Tablet funktionieren, da es auf diesen Geräten keinen hover-State gibt.

    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

  • Sejuma, danke. Beim überfliegen des Links scheint mir der sehr hilfreich zu sein. Ich werde mich heute Abend nochmal genauer damit beschäftigen.

    SinnlosS, ich habe die Webseite bereits auf mehreren Android Geräten und Windows Geräten ausprobiert und dort funktioniert alles einwandfrei :) Jedoch ist es ein guter hinweis, dessen Inhalt ich einmal mit dem Problem mit IOS verknüpfen werde und mir so das Problem bestimmt klarer wird.

  • Ich hatte hier nur ein iPhone3 zum testen, Kollege hat grad mal mit Android draufgeschaut, da greift der hover-state tatsächlich. Trotzdem ist das für touch-devices nicht empfehlendswert, da es beim ziehen zum Beispiel auch mal zu solchen Effekten kommen kann, dass der hover-state nicht wieder entfernt wird.

    Hier ist ein ganz interessanter Ansatz für ein responsives Dropdown-Menu:
    http://webdesignerwall.com/tutorials/css-…/comment-page-1

    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook