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

HTML5 - Main zentriert nicht

T

tanzbaer85

Neues Mitglied
Grüße euch,
bin gerade dabei HTML5 zu lernen. Es funktioniert soweit alles wunderbar. Es ist ja eigentlich auch ein kurzer Quelltext und trotzdem schaff ich es nicht den <main> und <nav> zu zentrieren. Die zwei Bereiche hängen links fest.

Probiere bereits seit zwei Tagen rum. Float ist bei main und bei nav Center ...

Bin für jede Hilfe dankbar :)

Hier der Quelltext zu neues.php

HTML: 
<!DOCTYPE html>

<html lang="de">

<head>

<meta charset="utf-8">

<title>ABC</title>

<meta name="description" content="ABC">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/styles.css" rel="stylesheet" media="all">

</head>

<body>




<header role="banner">




<h1>ABC</h1>




</header>

<nav role="navigation">




<div id="linkbox_garage"><a href="neues.php">Garage</a></div>

<div id="linkbox"><a href="forum.php">Forum</a></div>

<div id="linkbox"><a href="wissen.php">Wissen</a></div>

<div id="linkbox"><a href="setup.php">Setup</a></div>

<div id="linkbox"><a href="einladen.php">Einladen</a></div>

<div id="linkbox_ausloggen"><a href="ausloggen.php">Ausloggen</a></div>







</nav>




<main role="main">   

<article>

<h2>ABC</h2>

</article>




<article>

<h3>ABC</h3>

<p>ABC</p>

</article>



<article>

<h3>ABC</h3>

<p>ABCp>

</article>




<article>

<h3>ABC</h3>

<p>ABC<p>

</article>




</main>




<footer role="contentinfo">


<small>Impressum & Datenschutz <time datetime="2015">2015</time></small>




</footer>

</body>

</html>

Hier mein styles.css

Code: 
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
        display: block;   
    }
    audio, canvas, video {
    display: inline-block;   
    }
   
    html {
        background: #333;
        color: #000;
        font-family: sans-serif;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;   
    }
   
    body {
    background: #FFF;
    color: #333;
    }
   
   
   
    header {
    float: center;
    background:#63adff;
    color: #ffffff;
    padding: 1px;
    text-align:center;
    }
   
    nav {
    max-width: 960px;
    float: center;
    background: #FFF;   
    }
   

   
    #linkbox_garage {
    float: left;
    padding-top: 10px;
    padding-bottom: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
    width:156px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    /* Box Design */
    background: #eee;
    border: 1px solid #63adff;
    background: -moz-linear-gradient(top, #EEE, #FFF);   
    background: -webkit-linear-gradient(top, #eee, #fff);
    background: -ms-linear-gradient(top, #eee, #fff);
    background: -o-linear-gradient(top, #eee, #fff);
    box-shadow: 1px 2px 4px rgba(0,0,0, .2);
    }
   
    #linkbox {
    float: left;
    padding-top: 10px;
    padding-bottom: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
    width:156px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    /* Box Design */
    background: #eee;
    border: 1px solid #DDD;
    background: -moz-linear-gradient(top, #EEE, #FFF);   
    background: -webkit-linear-gradient(top, #eee, #fff);
    background: -ms-linear-gradient(top, #eee, #fff);
    background: -o-linear-gradient(top, #eee, #fff);
    box-shadow: 1px 2px 4px rgba(0,0,0, .2);
    }
   
    #linkbox_ausloggen {
    float: left;
    padding-top: 10px;
    padding-bottom: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
    width:156px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    /* Box Design */
    background: #eee;
    border: 1px solid #F60;
    background: -moz-linear-gradient(top, #EEE, #FFF);   
    background: -webkit-linear-gradient(top, #eee, #fff);
    background: -ms-linear-gradient(top, #eee, #fff);
    background: -o-linear-gradient(top, #eee, #fff);
    box-shadow: 1px 2px 4px rgba(0,0,0, .2);
    }
   
    #linkbox_klein {
    float: left;
    padding-top: 10px;
    padding-bottom: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
    width:156px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    /* Box Design */
    -moz-box-shadow: inset 0 0 15px 5px #F93;
    -webkit-box-shadow: inset 0 0 15px 5px #F93;
    box-shadow: inset 0 0 15px 5px #F93;
    border-radius: 40px;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    }

    a:link { color:#000; }
    a:visited { color:#000; }
    a:hover, a:focus { color:#000; text-decoration: none; }
    a:active { color:#000; }


    main {
    max-width: 960px;
    float: center;
    background: #FFF;
    margin-top: 5px;
    margin-bottom: 5px;
    }
   
    article {
    margin:10px;
    padding-bottom:5px;
    padding-left:10px;
    padding-right:10px;
    padding-top:15px;
    }
   
    footer {
    float: center;
    background:#63adff;
    color: #ffffff;
    margin: 0 auto;
    padding: 5px;
    text-align:center;   
    }
 
Werbung:
Hallo,

"float: center;" gibt es nicht. Und verwende float nur wenn du dich über die Nebenwirkungen informiert hast: aus dem Fluß nehmen, clear, globales clear, Vererbung u.s.w.

Wenn du einen Container zentrieren willst gibst du ihm eine Breite (width) und links und rechts (margin-left, margin-right) den Abstand "auto".

Gruss

MrMurphy
 
Werbung:
Ich hab schon geahnt das es gleich behoben werden kann. Hab aber den Wald nicht mehr gesehen :)
margin: 0 Auto; und schon geht's.
Danke an euch alle bin wirklich froh. Haut wunderbar hin. So schaut bei mir die Lösung aus :cool:

Code: 
nav {
    max-width: 960px;
    background: #FFF;
    margin: 0 auto;   
    }

main {
    max-width: 960px;
    background: #FFF;
    margin: 0 auto;
    }
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben