CSS: DIV fixiert und zentriert (2. Teil)

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)

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
}

„...“

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.

„...“

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...“

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;
}

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.

„...“

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>

Kommentieren

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

Facebook & Instagram: Zuckerberg kündigt Aus de...

20 Jahre Mac mini

iPad Pro M4: Hinweise auf geringere Nachfrage

Mac mini M4 im ersten Test: Was hält der kleine...

iPhone 17 Pro: Leaks sollen Details zur neuen R...

Das MacBook Pro M4

Kurz: Apple bietet iPhone 15 erstmals refurbish...

Bilder geben Hinweis: Mac mini M4 mit austausch...