zentrieren von div/overflow

  • hallo,
    ich habe ein anfängerproblem... und zwar bekomme ich meine divs nicht horizontal zentriert, dh. ich habe ein prob mit dem overflow.

    fakt:
    2 divs, eins rechts, eins in der mitte. horizontal zentriert mit 50% und -300margin.
    bei hoher auflösung: alles klar.
    wenn ich aber meinen browser horizontal kleiner schiebe, bzw mit netbookauflösung anschaue,
    kommt wie gewolllt die scrollleiste, aber das linke div bekommt abstand von unten und das mittlere verschwindet nach unten..

    ich hätte aber gerne, dass beide in vollem format horizontal zentriert bleiben und scrollbalken bekommen.

    das ist das linke div:


    und dieses das mittlere:


    sorry, die situation ist schwer zu beschreiben.. ich hoffe, jemand von euch hat genug imaginationskraft..

    sven

    die seite ist temporär zu sehen auf: http://test.thepetsitters.net

    Einmal editiert, zuletzt von Bandit (8. September 2012 um 21:15) aus folgendem Grund: BB-Code eingebaut

  • oops, ich habe horizontal und vertikal vertauscht..

    also, ich hätte gerne, dass die divs nach oben und nach unten gleichen abstand behalten sollen, wenn der scrollbalken auftaucht.
    vielen dank für den link, doch ich finde nirgends dieses scrollproblem.
    oder meinst du mit dem link, das mein ganzes layout nicht stimmt?

    nette grüße,
    sven


    und dieses das mittlere:

  • ok. hat geklappt! vielen dank für´s erste..

    ich hab den container jetzt nach links ausgerichtet
    und möchte die gleiche formation noch einmal rechts daneben haben,
    also diese hier:

    #distance {
    width: 10px;
    height: 50%;
    margin-bottom: -250px;
    float: left;
    background-color: #f00; /*nur zu Demozwecken*/
    }

    #container {
    margin: 0 auto;
    position: relative;
    height: 500px;
    width: 700px;
    clear: left;
    background-color: #ADFF2F;
    }

    das funktioniert aber nicht, der #distance rutscht immer darunter..

    nette grüße,
    sven

  • hallo, inzwischen bin ich ein stück weiter gekommen.

    1. habe ich meinen ersten DIV nach links und horizontal mittig ausgerichtet bekommen und die scrollleiste funktioniert auch prima.
    2. habe ich nach "Vertikale Zentrierung nach Ziff. 2" den zweiten "distance"-DIV rechts neben die ersten zwei DIVs bekommen.
    rechts daneben kommt jetzt mein Container2, der letzte möchte aber wieder nicht vertikal zentriert werden..

    sejuma: ich habe mal in deinem tut geschmöckert. wirklich sehr gut erklärt. und ich habe jetzt auch mehr überblick. danke.

    dieses sind meine ertsten zwei Container. die stehen super da:

    dann mein zweiter distanzDIV und der zweite Hauptcontainer, horizontal kein prob aber vertikal... er klebt wieder an der decke..

    sven

  • Varab:
    Du verwendest bestimmte div ID's mehrfach, was unzulässig ist. Verwende in diesen Fällen Klassen:
    http://validator.w3.org/check?verbose=…erenzenNEU.html

    Der Überlappungseffekt rührt daher, wenn die Seite höher ist als das Bildschirmfenster.

    Das Layout kannst du viel einfacher aufbauen:

    Verwende einen allumfassenden, horizontal zentrierten Div, z.B.

    Code
    #wrapper {
    width: 1100px;
    margin: 40px auto;
    }

    Im folgenden verzichte auf sämtliche absoluten Positionierungen.
    In den #wrapper kommt die Navi mit float: left; und gegebenenfalls einem margin-top-Wert.

    Daneben kommt dein bisheriger #container2, nur mit margin positioniert.
    Sieh dir hierzu einfach mal diese Beispiele an:
    http://www.ohne-css.gehts-gar.net/0077.php

  • ahh, ich verstehe,
    du hast jetzt den distance-trick auf den wrapper angewand..
    ich hatte immer den distanceDiv mit in den wrapper gepackt.
    ich bastle weiter..
    vielen dank für den tipp!
    das wird schon..

  • puhh,
    also, so langsam glaube ich, dass mein vorhaben gar nicht machbar ist..

    jetzt bleibt der abstand von oben konstant, dafür verschwindet er aber unten... ich glaube wir drehen uns im kreis.
    und außerdem klappt das mit dem overflow auch nicht mehr. http://test.thepetsitters.net/neu/03referenzenWrap.html

    im großen und ganzen glaube ich, dass ich an diesem punkt http://test.thepetsitters.net/03referenzenNEU.html schon mal weiter war..
    hier fehlt doch nur noch eine 100%ige höhe des rechten divs..

    stephan

  • das hatte ich ja schon, da bekomme ich dann zwei scollbalken und das ist ja auch unschön.


    bei der anderen version fehlt doch nur noch ein kleines quentchen...

    stephan

  • sorry, aber das hat gar nicht funktioniert.

    ich rede von dieser version: http://test.thepetsitters.net/03referenzenNEU2.html

    ich habe den container2(rechter DIV) in eine art wrapper(box) zu packen,
    damit rutscht er wenigsten nicht mehr oben raus. die begrenzung unten bzw.
    horizontale zentrierung bekomme ich aber trotzdem nicht hin. alle versuche
    nochmal so ne art distance für den rechten
    inhalt anzulegen sind gescheitert.

    stephan

  • Und genau da liegt m.E. auch dein Denkfehler.
    Überleg mal was du willst:

    Du willst - wenn ich das recht verstanden habe - eine Seite, die horizontal und vertikal zentriert sein soll und eine fixe Höhe und Breite hat:
    Dann brauchst du lediglich einen #container als äußere Hülle, der mir #distance und wie unter #18 beschrieben zentriert wird.
    Das funktioniert.
    In diesen #container packe die gefloatete Navi und den gesamten Inhalt. Dazu brauchst du keinerlei weitere Zentrierung und keinerlei absolute Positionierung. Da reicht margin vollkommen aus.
    Das entspricht meinem Vorschlag #13 wobei in den div #inhalt dann noch der konkrete Inhalt rein kommt.
    Den Wolkenhintergrund kannst du dann body zuweisen und bei #wrapper und #inhalt lässt du eben den background weg.