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">
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;margin-top:10px;
margin-left:50px;background-color:grey;}
/*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#immagine{position:absolute;margin-left:400px;
margin-top:100px;border: 2px solid grey;width:200px;height:200px;background-image: url(computer.jpg);}
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">
</div>
<div id="content">
</div>
<div id="immagine">
<p> il mio computer </p>
</div>
<div id="collegamenti">
<div>
<div id="footer">© 2014 - Grafica, layout e guide sono del prof Pioppi
</div>
</div>
</body>
</html>
Partendo dall’esercizio sopra dove appare nella pagina solo l’header, il footer , e il tag div immagine ,
modificare la pagina come segue.
