Salve sto cercando di capire come funziona 90 grid , e ho alcune domande :
Per quanto riguarda l'altezza dei div per essere responsive , bisogna metterla in percentuale?
Volevo inserire un menu in un div e poi posizionarlo devo fare float right per metterlo a dx o con 960 grid posso specificare la posizione proprio sulla griglia?
ecco il codice html:
e il css(oltre a quelli di 960 grid :codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>senza nome</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="generator" content="Geany 1.22" /> <link rel="stylesheet" type="text/css" media="all" href="css/960grid/reset.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/960grid/960.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/960grid/text.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/960grid/mycss.css" /> </head> <body> <div id='container'> <div id='testata' class="container_12"> <div id='logo' class="grid_3">Logo</div> <div id='menu' class="grid_9"> <div id='pulsanti'> <nav> <ul> [*]Home [*]Collegamenti-html [*]Elenchi puntati [*]Selettori [*]Promovici [/list] </nav> </div> </div> <div class="clear"></div> </div> <div class="container_12"> <div id='content' class="grid_12">content</div> <div class="clear"></div> </div> <div id='3box'class="container_12"> <div id='box1' class="grid_4">box1</div> <div id='box2' class="grid_4">box2</div> <div id='box3' class="grid_4">box3</div> <div class="clear"></div> </div> <div id='footermain' class="container_12"> <div id='footer' class="grid_12">footer</div> <div class="clear"></div> </div> </div> </body> </html>
codice:#logo{ background-color: black; height: 100% ; } #menu{ background-color: red; height: 100% ; } #content{ background-color: green; height: 40% ; } #box1{ background-color: gray; height: 30% ; } #box2{ background-color: violet; height: 30% ; } #box3{ background-color: blue; height: 30% ; } #footer{ background-color: brown; height: 10% ; } /* menu */ #pulsanti{ //float: right; //text-align: right; margin:50px; } ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul { position:absolute; padding: 3px 2px 1px 2px; } ul li { float:left; border-left: 1px solid #fff; } ul a:link, ul a:visited { display: block; text-decoration: none; padding: 7px; font-weight: bold; background-color: #acd; color: #dff; } ul a:hover { background-color: #71b9de; color: #fff; border-top:5px solid blue; }

Rispondi quotando