dochtml> Posizionamento assoluto elementi tag DIV
download 
Reclamo Transcript
html> Posizionamento assoluto elementi tag DIV
<html>
<head>
<title>Posizionamento assoluto elementi tag DIV</title>
<style type="text/css">
/*stili per il layout fisso con posizionamenti assoluti*/
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 12px;color: blue}
div#container{position:absolute; width: 760px;height:500px;border: 2px solid Black;margintop:10px;margin-left:50px;}
/*stili generici, su header e footer*/
div#header{background-color:cyan;color: black;margin-right: 10px; margin-top:20px;}
h1,h2{margin: 0;padding:0}
h1{padding-left:10px;font: 20px arial,serif}
h2{color: blue;font-size: 18px}
p{color: brown;font-size: 15px;font-family:verdana;}
/*stili specifici per il layout*/
div#navigation{position:absolute;margin-left:10px; margin-top:100px;width:200px}
div#content{position:absolute;margin-left:250px; margin-top:100px; padding:10px;border: 2px solid grey;}
div#footer{position:absolute;text-align:center;
padding:10px; background-color: yellow; color:black;margin-top:420px; width:740px;}
/*stili per la navigazione*/
div#navigation a{color:orange;font: normal bold 12px,sans-serif;}
div#navigation a:hover{color: black;text-decoration: underline}
div#navigation a#activelink{color: blue;text-decoration: none}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Il mio sito</h1>
</div>
<div id="navigation">
<ul>
<li><a id="activelink" href="#">Home</a></li>
<li><a href="#">alunni</a></li>
<li><a href="#">Lezioni</a></li>
<li><a href="#">Compiti</a></li>
</ul>
</div>
<div id="content">
<h2>Layout a due colonne fisse</h2>
<p>Questo sito ha due colonne dove posso inserire i contenuti <br>
e sfruttare la potenzialità dei css <br>
e prendere un bel voto nella verifica.
</div>
<div id="footer">© 2014 - Grafica, layout e guide sono del prof Pioppi
</div>
</div>
</body>
</html>
