[CSS] <div> Layer zentrieren

Dieses Thema im Forum "Webdesign" wurde erstellt von toschk, 17. August 2009 .

  1. 17. August 2009
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    <div> Layer zentrieren

    Ich bekomme diesen einen blöden <div>-Layer nicht zentriert. Google spuckt zwar ein paar Sachen raus. Ich suche aber nach der Patent-Lösung und nicht nach irgendwelchen CSS-Gefummel. Hier mal ein Bild:

    Bild

    ich arbeite mit Opera

    und hier der HTML-Code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html> 
     <head> 
     <link rel="stylesheet" type="text/css" href="style.css" />
     <meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
     <meta name="generator" content="PSPad editor, www.pspad.com"> 
     <title>H.. Dienstleistungen</title> 
     </head> 
     <body>
     <div id="header">header</div> 
     <div id="menu"> 
     <div id="schalt">schalt</div> 
     <div id="mess">mess</div> 
     <div id="robot">robot</div>
     </div>
     <div id="content">content</div> 
     <div id="footer">footer</div>
     </body>
    </html>
    und der CSS-Code:
    Code:
    #header {
     width: 600px;
     height: 100px;
     background-color: #00CCCC;
     margin: auto;
    }
    
    #menu {
     margin: auto;
    }
    
    #schalt {
     background-color: #009966;
     width: 200;
     float: left;
    }
    
    #mess {
     background-color: #0033FF;
     width: 200;
     float: left;
    }
    
    #robot {
     background-color: #FFCC00;
     width: 200;
     float: left;
    }
    
    #content {
     background-color: #006600;
     width: 600px;
     clear: left;
     margin: auto;
    }
    
    #footer {
     background-color: #FF6600;
     width: 600px;
     height: 25px;
     margin: auto;
    }
    Ich hoffe jemand hat eine Antwort auf dieses Mysterium.
     
  2. 17. August 2009
    AW: <div> Layer zentrieren

    hab's mal umgebaut

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #site {
     width: 600px;
     margin: 0 auto;
    }
    #header {
     height: 100px;
     background-color: #00CCCC;
    }
    #menu ul {
     margin: 0;
     background: #999;
    }
    #menu ul li {
     display: inline;
     padding: 2px 14px;
    }
    #menu ul li.col1 {
     background: #ff0000;
    }
    #menu ul li.col2 {
     background: #00ff00;
    }
    #menu ul li.col3 {
     background: #0000ff;
    }
    #content {
     background-color: #006600;
     height: 200px;
    }
    #footer {
     background-color: #FF6600;
     height: 25px;
    }
    </style>
    </head>
    
    <body>
    <div id="site">
     <div id="header">header</div> 
     <div id="menu">
     <ul>
     <li class="col1">schalt</li>
     <li class="col2">mess</li>
     <li class="col3">robot</li>
     </ul>
     </div>
     <div id="content">content</div> 
     <div id="footer">footer</div>
    </div>
    </body>
    </html>
    
     
  3. 17. August 2009
    AW: <div> Layer zentrieren

    Danke, aber ich hab ne bessere Methode gefunden. Da meine Seitengröße horizontal konstant ist hab ich einen Container um alle div's gelegt und folgende Eigenschaften vergeben:

    Code:
    #align {
     left: 50%;
     margin-left: -300px;
     position: absolute;
    }
    Funktioniert auf allen Browsern.
     
  4. 17. August 2009
    AW: <div> Layer zentrieren

    margin: 0 auto;

    ist deutlich besser und du mußt nicht rumrechnen.
    position absolute nimmt außerdem dein div aus deine konstrukt heraus.
    macht auch gerne mal probleme.

    wie gesagt nimm margin: 0 auto;
     
  5. 17. August 2009
    AW: <div> Layer zentrieren

    habe ich probiert gehabt. Hat nicht funktioniert. Weder mit IE noch mit opera.
     
  6. 18. August 2009
    AW: <div> Layer zentrieren

    parent element (zb body): text-align:center;
    div: margin-left:auto;margin-right:auto;width:300px;[text-align:left;]
     
  7. 18. August 2009
    AW: <div> Layer zentrieren

    Code:
    .mitte {
    width: 600px;
    margin: 0 auto;
    }
    <div class="mitte">
     alle inhalte
    </div>
    
    wenn du in der classe einmal "marign: 0 auto;" verwendet hast, darfst du nicht mehr margin in der classe verweden. nur ein mal
     
  8. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.