• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

div mittig zentrieren

Status
Für weitere Antworten geschlossen.

handymanjack

Neues Mitglied
HI!

Ich möchte meine seite zentrieren...

Da ich ausschließlich mit Containern arbeite, wollte ich die Standardlösung: margin:auto 0px; und IE: text-align:center; benutzen, aber es funktioniert nur im IE....

Habs auch schon mit der Variante 50% und - halbe breite usw. versucht aber dann zerlegt der IE die seite...

Hier nen link: Be welcomed to my page
hier der code:
styles.css:
Code:
body {
    text-align:left;
    font-size:12px;
    font-family: Arial, Helvetica, sans-serif;
}

a.inhalt:link { 
    color: rgb(125, 125, 125);
    text-decoration:none;
}

a.inhalt:visited {
    color: rgb(100, 100, 100);
    text-decoration:none
}

a.inhalt:hover {
    color: rgb(0, 125, 0);
    font-weight:bold;
}

a.inhalt:active {
    color: rgb(150, 150, 150);
}

.clearer {
    clear:both;
}

div#mittig {
    margin:auto 0px;
    width:1000px;
}

div#design {
    width: 1000px;
    height:700px;
    float:left;
    background-image:url('../images/design.jpg');
    background-repeat:no-repeat;
}

div#links {
    float:left;
    width:200px;
    height:700px;
}

div#mitte {
    float:left;
    width:600px;
    height:700px;
}

div#rechts {
    float:left;
    width:200px;
    height:700px;
}

div#welcome {
    width:200px;
    height:200px;
    background-image:url('../images/welcome.jpg');
    background-repeat: no-repeat;
}

div#menue {
    margin-top:0px;
    width:200px;
    height:500px;
    background-image:url('../images/menue.jpg')
}

div#header {
    width:600px;
    height:70px;
    background-image:url('../images/navleisteoben.jpg');
}

div#inhalt {
    width:600px;
    height:580px;
    background-image:url('../images/inhalt.jpg');
    background-repeat: no-repeat;
}

div#footer {
    width:600px;
    height: 50px;
    background-image:url('../images/footer.jpg');
    background-repeat:no-repeat;
}

div#logo {
    width:200px;
    height:200px;
    background-image: url('../images/logo.jpg');
    background-repeat:no-repeat;
}

div#news {
    width:200px;
    height:500px;
    background-image:url('../images/news.jpg');
    background-repeat:no-repeat;
}

div#content {
    overflow:auto;
    overflow-x:hidden;
    color:rgb(0, 255, 0);
    width:590px;
    height:570px;
    margin-left: 5px;
    padding-top:5px;
}
menue.css:
Code:
body {
    text-align:left;
    font-size:12px;
    font-family: Arial, Helvetica, sans-serif;
}

a.menue:link { 
    color: rgb(0, 125, 0);
    text-decoration:none;
}

a.menue:visited {
    color: rgb(50, 50, 50);
    text-decoration:none
}

a.menue:hover {
    color: rgb(0, 125, 0);
    font-weight:bold;
}

a.menue:active {
    color: rgb(150, 150, 150);
}

div#buttons {
    height:460px;
    width:183px;
    padding-top:20px;
    margin-left:8px;
}

div.buttonleer {
    width:183px;
    height:58px;
    background-image:url('../images/buttonleer.jpg');
    background-repeat:no-repeat;
}

div#buttonhome {
    width:183px;
    height:58px;
    background-image:url('../images/buttonhome.jpg');
    background-repeat:no-repeat;
}

div#buttonhomehigh {
    width:183px;
    height:58px;
    background-image:url('../images/buttonhomehigh.jpg');
    background-repeat:no-repeat;
}

div#buttonfroemmer {
    width:183px;
    height:58px;
    background-image:url('../images/buttonfroemmer.jpg');
    background-repeat:no-repeat;
}

div#buttonfroemmerhigh {
    width:183px;
    height:58px;
    background-image:url('../images/buttonfroemmerhigh.jpg');
    background-repeat:no-repeat;
}

div#buttonprivat {
    width:183px;
    height:58px;
    background-image:url('../images/buttonprivat.jpg');
    background-repeat:no-repeat;
}

div#buttonprivathigh {
    width:183px;
    height:58px;
    background-image:url('../images/buttonprivathigh.jpg');
    background-repeat:no-repeat;
}

div#buttonweb {
    width:183px;
    height:58px;
    background-image:url('../images/buttonweb.jpg');
    background-repeat:no-repeat;
}

div#buttonwebhigh {
    width:183px;
    height:58px;
    background-image:url('../images/buttonwebhigh.jpg');
    background-repeat:no-repeat;
}

div#topbuttonhome {
    float:left;
    width: 200px;
    height:70px;
    background-image:url('../images/topbuttonhome.jpg');
    background-repeat:no-repeat;
}

div#topbuttonhomehigh {
    float:left;
    width: 200px;
    height:70px;
    background-image:url('../images/topbuttonhomehigh.jpg');
    background-repeat:no-repeat;
}

div#topbuttonprivat {
    float:left;
    width: 200px;
    height:70px;
    background-image:url('../images/topbuttonprivat.jpg');
    background-repeat:no-repeat;
}

div#topbuttonprivathigh {
    float:left;
    width: 200px;
    height:70px;
    background-image:url('../images/topbuttonprivathigh.jpg');
    background-repeat:no-repeat;
}

div#topbuttonweb {
    float:left;
    width: 200px;
    height:70px;
    background-image:url('../images/topbuttonweb.jpg');
    background-repeat:no-repeat;
}

div#topbuttonwebhigh {
    float:left;
    width: 200px;
    height:70px;
    background-image:url('../images/topbuttonwebhigh.jpg');
    background-repeat:no-repeat;
}
index.php:
Code:
<html>
    <head>
        <title>Be welcomed to my page</title>
        <meta name="author" content="Jens Froemmer a.k.a. handymanjack">
        <meta name="generator" content="Adobe Go Live CS2">
        <link rel="stylesheet" href="styles.css">
        <link rel="stylesheet" href="menue.css">
        <script type="text/javascript" src="script.js"></script>
        <!-- ist aber alles von Hand programmiert und nicht per WYSIWYG xD -->
    </head>
<body bgcolor="black" align="center" style="margin:0;padding:0; height:100%; text-align:center;">
    <div id="mittig">
        <div id="links">
            <span class="clearer"></span>
            <div id="welcome"></div>
            <div id="menue">
                <div id="buttons">
                    <?
                        if(isset($_REQUEST['seite'])){
                            include "navigation.php";
                        }else{
                            include "menuehome.php";
                        }
                    ?>
                </div>
            </div>
        </div>
        <div id="mitte">
            <span class="clearer"></span>
            <div id="header">
                <div id="topbuttonhome" onmouseover="this.id='topbuttonhomehigh';" onmouseout="this.id='topbuttonhome';"></div>
                <div id="topbuttonprivat" onmouseover="this.id='topbuttonprivathigh';" onmouseout="this.id='topbuttonprivat';"></div>
                <div id="topbuttonweb" onmouseover="this.id='topbuttonwebhigh';" onmouseout="this.id='topbuttonweb';"></div>
                <span class="clearer"></span>
            </div>
            <div id="inhalt">
                <div id="content">
                    <?
                        if(isset($_REQUEST['seite'])){
                            include "seiten.php";
                        }else{
                            include "start.html";
                        }
                    ?>
                </div>
            </div>
            <div id="footer"></div>
        </div>
        <div id="rechts">
            <span class="clearer"></span>
            <div id="logo"></div>
            <div id="news"></div>
        </div>
    </div>
</body>
</html>
mfg
handymanjack
 
Werbung:
Code:
div#mittig {
    margin:auto 0px;
    width:1000px;
}

Schau dir den margin genauer an ;)
[/code]
margin: 10px; oben / unten / links / rechts;
margin; 10px 20px; oben / unten & rechts/links
margin; 10px 20px 30px; oben & links/rechts & unten
margin: 10px 20px 30px 40px; oben & rechts& unten & links

->
margin: 0px auto;
[/code]

CSS 4 You - The Finest in Stylesheets hilft dir da weiter :)
 
Ich glaub margin:auto funktioniert im IE nur, wenn ein Doctype vorhanden ist.
 
Werbung:
Ich glaub margin:auto funktioniert im IE nur, wenn ein Doctype vorhanden ist.

...und der ist ja wohl bitteschön Pflicht. Die meisten Möchtegernprogrammierer und -webdesigner hätten wesentlich weniger Probleme, wenn Sie auf solche Grundlegenden Sachen achten würden.
 
Also ganz einfach:
Code:
body {
text-align:center: /* Für IE */
}

div {
margin-left:auto; /* Firefox, Opera und so */
margin-right:auto;
}
Also diese Variante funktioniert bei mir bei allen Browsern. Netscape, Safari, Opera, IE 5-7, FF und IE für Mac.


MfG, matibaski
 
warum dieser WorkAround, wenn es bei einer korrekten Angabe des DocType
auch mit einer Zeile CSS für alle aktuellen Browser getan ist?
 
Werbung:
Code:
body {
text-align:center: /* Für IE */ <!-- einmal für IE -->
}

div {
margin-left:auto; /* Firefox, Opera und so */ <!-- und für alle anderen -->
margin-right:auto;
}

Ein kleiner Workaround halt. ;)

EDIT: Man beachte aber bitte die Vererbung bei CSS ;)
 
Zuletzt bearbeitet:
-.- margin:auto 0px; margin:0px auto; ... kein kommentar ...

danke für die schnelle hilfe - ach und das mit dem doctype - ehrlich gesagt ich habs einfach vergessen xDxD

mach ich schnell noch rein.. :D

mfg
handymanjack
 
Zuletzt bearbeitet:
Werbung:
Status
Für weitere Antworten geschlossen.
Zurück
Oben