Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Entwickler>CSS: DIV fixiert und zentriert (2. Teil)

CSS: DIV fixiert und zentriert (2. Teil)

dom_beta29.12.1200:44
Hallo,

ich habe eine andere Methode gefunden, wie man ein DIV-Container mit fester Breite horizontal zentrieren kann.

Allerdings verstehe ich nicht, weswegen genau man left und right benötigt. Klingt für mich jedenfalls nicht logisch.

Kann mir das jemand erklären?

div {
position:fixed;
width:62em;
top:0;
left:0; right:0;
margin:0 auto
}
„...“
0

Kommentare

dom_beta04.01.1323:12
Hallo,

kann es sein, daß der W3C CSS Validator fehlerhaft ist?

Mein Original Code:
#NavObenG {
background-color:#C0C0C0;
position:fixed;
z-index:3;
width:62.5em;
left:0;
right:0;
margin:auto;
box-shadow:0 0 0.5em 0 #000;
border-bottom-right-radius:0.4375em;
border-bottom-left-radius: 0.4375em
}

Der Validator macht daraus:
#NavObenG {
background-color : #C0C0C0;
position : fixed;
z-index : 3;
width : 62.5em;
left : 0;
top : 0;
margin : auto;
box-shadow : 0 0 0.5em 0 #000;
border-bottom-right-radius : 0.4375em;
border-bottom-left-radius : 0.4375em;
}

Er fügt ein top hinzu und streicht das right.

Ein bisschen eigenartig.
„...“
0
bmc desgin08.01.1323:01
Was hast du als Parser eingestellt ???

CSS2.0 oder CSS3.0???


Das sollte erfolgreich validiert werden, lediglich mit den Browser-Präfixes kann der validator nicht umgehen...
„Ask your questions...“
0
roca12308.01.1323:21
Was hast du den vor?

Horizontal&Vertikal:
.center {
width: 300px;
height: 300px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
background-color: #000;
}

Horizontal:
.center {
width: 300px;
height: 300px;
margin: 0 auto;
background-color: #000;
}
0
dom_beta09.01.1301:44
bmc desgin
Was hast du als Parser eingestellt ???

CSS 3

roca123
Was hast du den vor?

ich möchte gerne ein Div mit einer festen Breite fixieren ("position:fixed") allerdings ohne einen negativen Margin-Wert (sofern das funktioniert, sollte aber).

Obiges funktioniert auch im IE 9, Firefox 16, Safari 5 nur tanzt dann der IE 8 aus der Reihe.
„...“
0
roca12309.01.1308:38
ich möchte gerne ein Div mit einer festen Breite fixieren ("position:fixed") allerdings ohne einen negativen Margin-Wert (sofern das funktioniert, sollte aber).

Ist aber eigentlich schon ein Standard.

Alternativ kannst du auch 2 divs verschachteln:


<!DOCTYPE html>
<html>
    <head>
    <style type="text/css" media="screen">
        #wrap{
            margin: 0 auto;
            width: 100px;
            height: 100px;
        }
        
        #fixed{
            position: fixed;
            width: 100px;
            height: 100px;
            background-color: #000;
        }
        
        #content{
            margin: 0 auto; 
            width: 500px;
            height: 1500px;
            background-color: #ccc;
        }
        
    </style>
    </head>
    <body>
        <div id="wrap">
            <div id="fixed"></div>
        </div>
        <div id="content">
        </div>
    </body>
</html>
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.