✔ Fenstereigenschaften bei zentriertem div

Status
Nicht offen für weitere Antworten.
C

campari

Erfahrenes Mitglied
Beim Verkleinern des Browserfensters <= 700px wird mir durch den negativen Rand die linke Hälfte abgeschnitten. Gibt es eine Möglichkeit das zu verhindern:
HTML: 
body
{
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;

}
.center
{
        left: 50%;
        margin-left: -350px;
        padding: 0px;
        marging: 0px;
        position:absolute;
        width:700px;
        height:100%;
Wenn nein, gibts noch andere Techniken, einen Container vertikal zu zentrieren (ausser "body{ text-align:center; } .center {margin: 0px auto; }")?

Danke
 
Die Seite wendet das Prinzip an, das ich verhindern möchte...

quote: (ausser "body{ text-align:center; } .center {margin: 0px auto; }")
 
hela hat gesagt.:
Das bezieht sich aber nur auf die horizontale Zentrierung!
Zum Vergrößern anklicken....

Genau das meinte ich auch, eine horizontale Zentrierung. Sagte ich das nicht? .oO

Entschuldige, mein Fehler!

Auf ein Neues:

Gibts eine Lösung für horizontale Zentrierung ohne das "margin: 0 auto"- Konzept?
Bzw. wie verhinder ich in obigem Beispiel, dass die linke Hälfte des horizontal zentrierten div-Containers abgeschnitten wird beim Fenster verkleinern.


...mea culpa...
 
Hi,

was spricht gegen den Einsatz von margin:0 auto, zumal diese Technik genau deine Bedingungen beim horizontalen Verkleinern des Fensters erfüllt?
 
Die funktioniert in einer Mac-Version nicht (4er?). Ansonsten benutz ich diese Technik auch immer, ist prima!

Bin nun mit hela's Idee soweit:
HTML: 
<style type="text/css">
body {
    height:100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    }
.links { 
    width:50%;
    height:1px;
    background-color:red;
    margin-left: -350px;
    float:left;
    }
.ueber {
    position:relative;
    left: 0px;
    top: 0px;
    text-align:left;
    height:100%;
    width:700px;
    float:left;
    }
.center {
    width: 700px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: green;
}
</style>
</head>
<body>
    <div class="links"></div>
    <div class="ueber">
        <div class="center">Horst</div>
    </div>

Allerdings bekomme ich das Haupt-div 'center' nicht auf 100% Höhe....
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück