View Single Post
Old 09-03-2008, 21:56   #7
m.distrutti
Member
 
L'Avatar di m.distrutti
 
Iscritto dal: Sep 2007
Messaggi: 207
ho scaricato quersto layout da html.it e adattato con menu a sinistra e contenuti a destra come da te richiesto mi sembra

prova questo un attimo
Codice:
<div id="container">

    <div id="header">
        <h1>Layout di html.it</h1>
    </div>
    <div id="content">
        Prova di contenuti
        <br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
        <div id="navigation">
        <ul>
            <li><a id="activelink" href="#">MENU1</a></li>
            <li><a href="#">MENU2</a></li>

            <li><a href="#">MENU3</a></li>
            <li><a href="#">MENU4</a></li>
            <li><a href="#">MENU5</a></li>
            <li><a href="#">MENU6</a></li>
            <li><a href="#">MENU7</a></li>
        </ul>

    </div>
    <div id="footer">FOOTER</div>
</div>
css :
Codice:
/*stili per il layout fisso con posizionamenti assoluti*/
html,body{margin: 0;padding:0}

body{font-family: arial,sans-serif;font-size: 76%;text-align: center}

div#container{
   position:relative; width: 100%;margin: 0 auto;text-align: left;
   border-left: 2px solid #36c;border-right: 2px solid #36c;}

/*stili generici, su header e footer*/
div#header{background-color:#36C;color: #ff0}
h1,h2{margin: 0;padding:0}
h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
h2{color: #999;font-size: 1.5em}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline}

/*stili specifici per il layout*/
div#navigation{position:absolute;top: 80px;left: 0;width: 13em}
div#content{margin-left: 13em;padding: 1em}
div#footer{text-align:center; padding: 0.5em;
    background-color: #69c; color: #FFF}

/*stili per la navigazione*/
div#navigation ul{margin: 1em 0 1em 1em;padding: 0; list-style-type: none;}
div#navigation li{margin: 0;padding: 0}
div#navigation a{color:#369;font: normal bold 1.2em/1.6em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #033;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}
nel caso il testo dovesse eccedere viene riportato a capo
giusto per capire un attimo, cmq c'e' una proprieta css per i box che consente la visualizzazione del contenuto eccedente tramite barre di scorrimento applicate verticalmente od orizzontalmente

se devi implementare una tabella molto grande credo sia normale che ti dia errori in visualizzazione dato che la tabella non puo tornare a capo come un testo e venga messa sotto il div menu per visualizzarla

Ultima modifica di m.distrutti : 09-03-2008 alle 22:00.
m.distrutti è offline   Rispondi citando il messaggio o parte di esso