div mittig zentrieren

handymanjack · 4 Mai 2007

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

da_loki · 4 Mai 2007

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 :)

Alti · 4 Mai 2007

Ich glaub margin:auto funktioniert im IE nur, wenn ein Doctype vorhanden ist.

gruenspan · 4 Mai 2007

Alti schrieb:
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.

matibaski · 4 Mai 2007

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

gruenspan · 4 Mai 2007

warum dieser WorkAround, wenn es bei einer korrekten Angabe des DocType
auch mit einer Zeile CSS für alle aktuellen Browser getan ist?

matibaski · 4 Mai 2007

WorkAround?
Was meinst du damit?

MfG,matibaski

gruenspan · 4 Mai 2007

matibaski schrieb:

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

handymanjack · 4 Mai 2007

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

mfg
handymanjack

div mittig zentrieren

handymanjack

Neues Mitglied

da_loki

Guest

Alti

Guest

gruenspan

Neues Mitglied

matibaski

Guest

gruenspan

Neues Mitglied

matibaski

Guest

gruenspan

Neues Mitglied

handymanjack

Neues Mitglied

Neueste Beiträge