960 grid

**pippuccio76** · 15-07-2013, 11:35

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:

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>

e il css(oltre a quelli di 960 grid :

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;
}

**webbeloz** · 15-07-2013, 16:16

+ che 960 grid,
quello che cerchi/chiedi è capire come si lavora in responsive mi pare...

la questione altezza vale per qualsiasi titpo di CSS.
quindi che sia 960 o altri, l'altezza di un div deve essere gestita
in responsive attraverso => % ma se si tratta di un menu, non credo sia alto al punto di doverlo fare Responsive...

**HostinGorilla** · 15-07-2013, 22:18

Ciao Pippuccio,

definire un altezza in % non definisce se un css responsivo (anche perchè l'altezza in % dev'essere definita comunque in un contenitore ad altzza definita, seppur in % stessa).

Il menu lo posizione nel nei div a dx che hai creato nella griglia sui 960 px di width.

Ti consiglio questa interessante lettura per concettualizzare al meglio lo sviluppo responsivo:
http://www.netmagazine.com/tutorials...nsive-site-css

su questo stesso sito trovi molte informazioni utili sia per principianti che per sviluppatori con competenze avanzate.

Saluti.

Ang

Discussione: 960 grid

Strumenti discussione

Ricerca discussione

Visualizza

960 grid

Permessi di invio