Estructura web

by pitufoweb

HTML

<div id="banner-wrap">
    <div id="banner">
        BANNER
    </div>
</div>

<div id="pagina">
    <div id="cabecera">
        1 de Enero del 2013 "Año de la Integracion Nacional..."
    </div>
    
    <ul id="navegacion">
        <li><a href="#">Botón 1</a></li>
        <li><a href="#">Botón 2</a></li>
        <li><a href="#">Botón 3</a></li>
        <li><a href="#">Botón 4</a></li>
        <li><a href="#">Botón 5</a></li>
        <li><a href="#">Botón 6</a></li>
        <li><a href="#">Botón 7</a></li>
        <li><a href="#">Botón 8</a></li>
        <li><a href="#">Botón 9</a></li>
    </ul>
    
    <div id="noticias">
        Noticias importantes
    </div>
</div>

CSS

body {margin:0; font-size:12px; background-color:#56FFFD;}
        
        #banner-wrap {background-color:#3CC0F0;}
        #banner {width:465px; height:120px; margin:auto;
        background-color:#FFF;}
        
        #pagina {width:555px; overflow:auto; margin:auto;
        background-color:#fff;}
        
        #navegacion {float:left; width:100px; padding:20px 15px;
        list-style:none;}
        #navegacion li {margin-bottom:10px; text-align:center;}
        #navegacion li a {display:inline-block; width:100px; padding:3px 0;
        border-radius:10px; color:#000; text-decoration:none;}
        #navegacion li a:hover {background-color:#DDD;}
        
        #noticias {float:right; width:400px; height:300px; margin-top:12px;}
        
        #cabecera, #navegacion, #navegacion a, #noticias {border:1px solid #444;}