Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 14

Thema: Problem mit dem zentrieren

  1. #1
    HTML Newbie
    Registriert seit
    11.06.2013
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Problem mit dem zentrieren

    Bevor ich aus dem Handbuch vorlese, warum margin:auto hier keinen Sinn ergibt, lies bitte mal selber folgendes: http://little-boxes.de/lb1/12.4-raus...-absolute.html

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    11.06.2013
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem mit dem zentrieren

    Ich verstehe es mittlerweile besser als vorher, aber das Problem bekomme ich dennoch nicht gelöst.
    Da ich auch vor habe mit absolut und einem z-index eine neue Ebene zu erstellen, auf der ich die Bildergalerie gemacht habe.
    Ich denke Verständnis halber werde ich mein Projekt mal zeigen:
    http://rvadler.bplaced.net/Seiten/Sonstige.html#

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Problem mit dem zentrieren

    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    11.06.2013
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem mit dem zentrieren

    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
    Geändert von Klaus4334 (12.06.2013 um 00:09 Uhr)

  6. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Problem mit dem zentrieren

    absolute positioniert machste left:50% und dann ein negatives margin-left um die hälfte der containerbreite
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  7. #7
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem mit dem zentrieren

    Versuch's mal so:
    Code:
    .rahmen2 {
    	border-radius: 5px;
    	padding:50px;
    	width: 800px;
            margin: 5% auto;
    	background-color:#FFFFFF;
    	position:relative;
    	z-index:4;
            display: none;
    }

  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    11.06.2013
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem mit dem zentrieren

    Habe jetzt verstanden, woran es ein Problem gibt. Habe es jetzt so gelöst:
    Code:
    rahmen2
    {
        left:50%;
        margin-top: 5%;
        margin-bottom: 5%;
        margin-left:-450px;
        border-radius: 5px;
        padding:50px;
        height: auto;
        width: 800px;
        background-color:#FFFFFF;
        position:absolute;
        z-index:4;
        display:none;
    
    }
    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.
    Geändert von Klaus4334 (12.06.2013 um 16:10 Uhr)

  9. #9
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem mit dem zentrieren

    Zum Zentrieren benötigst du eine Breite.
    Die Zentrierung mit position absolute hat Nachteile: Wenn das Bildschirmfenster zu klein ist, können Inhalte verschwinden.
    Deshalb empfehle ich dir meinen Code mit gleichem, aber besseren Ergebnis.

  10. #10
    HTML Newbie
    Themenstarter

    Registriert seit
    11.06.2013
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem mit dem zentrieren

    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? -.-
    Geändert von Klaus4334 (12.06.2013 um 21:32 Uhr)

Ähnliche Themen

  1. Problem beim ZENTRIEREN
    Von vrime im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 15.12.2006, 16:46
  2. Problem: min-width - Div zentrieren
    Von problemkind im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 08.11.2006, 21:26
  3. HP zentrieren
    Von Gast im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 30.09.2006, 00:54
  4. div zentrieren
    Von skaal im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 20.08.2006, 18:04
  5. Problem beim zentrieren des Menüs
    Von CA2k im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 25.03.2006, 19:06

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •