pulsanti(rettangoli) su div "barra"

**pippuccio76** · 17-10-2012, 11:02

Salve volevo creare un layout come in allegato con la barra formata da tanti rettangoli impostati in base alle esigenze che si autodimensionino in modo da coprire la barra stessa (i rettangoli blu sulla barra .
ecco quello che ho fatto per ora:

html:

codice:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Impaginazione senza laterali</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 0.21" />
	<link rel="stylesheet" type="text/css" href="../../stefano/css/ImpaginazioneSenzaLaterali.css" /> 

</head>

<body>
	
	<div id="contenitore">
		
	
	<div id="testata">
	
	</div> 
	
	
	<div id="barra">
		
		<ul>
			
			
			[*]a 
			[*]b 
			[*]c 
			[*]d 
			[*]e 
			[*]f 		
			[/list]
		
	</div> 
	
	
	<div id="contenuti">
	
	
	</div> 
	
	
	<div id="footer">
	
	</div> 
	
	</div> 
</body>

</html>

css:

codice:

#contenitore{
margin-left:auto;
margin-right:auto; 
width :800px;
border:1 solid black;
}
#testata{
width :800px;
height : 200px;
margin: 0 0 0 0 ;
background-color:#FFFF00;
border:1px solid black;

}
#barra{
width :800px;
height : 100px;
margin: 0 0 0 0 ;
background-color:#FF0000;
border:1px solid black;
padding:0 0 0 0;
}

#barra ul{

margin: 0;padding: 0;
list-style-type: none;

}
/*per mettere i "pulsanti sulla stessa linea" */
#barra li{
display: inline; margin:  30px;padding: 0;

}
#blocka {
height:100px;
margin : 0 0 0 0;
padding: 0 0 0 0;
float: left;
background-color:#FFA500 ;
border:1px solid black;
}
#barra a{
color:#369;font: normal bold 15px arial,sans-serif;text-decoration: none

}

#barra a:hover{
color: #FFFF00;text-decoration: underline

}

#barra a#activelink{
color: #003333;text-decoration: none

}

#contenuti{
width :800px;
height : 500px;
margin: 0 0 0 0 ;
background-color:#ADD8E6;
border:1px solid black;

}
#footer{
width :800px;
height : 100px;
margin: 0 0 0 0 ;
background-color:#7F7F7F;
border:1px solid black;

}

**pippuccio76** · 18-10-2012, 12:28

ho eliminato gli ul e creato 4 div uno per ogni bottone nella barra e ho modificato il css così:

codice:

#barra{
width :800px;
height : 100px;
margin: 0 0 0 0 ;
background-color:#FF0000;
border:1px solid black;
padding:3px 0px 3px 0px;
}

#pulsante1{
width :198px ;
height : 98 px ;
background-color: #FFA500;
float:left ;
border:1px solid black;
}

#pulsante2{
width :198px ;
height : 98 px ;
background-color: #FFA500;
float:left ;
border:1px solid black;

}

#pulsante3{
width :198px ;
height : 98 px ;
background-color: #FFA500;
float:left ;
border:1px solid black;

}

#pulsante4{
width :198px ;
height : 98 px ;
background-color: #FFA500;
float:left ;
border:1px solid black;

}

Pensando che la barra poichè avevo dato ad ogni div altezza 98 larghezza 198 si riempisse con quattro rettangoli , invece ci sono si 4 rettangoli che occupano la barra orizzontalmente ma non verticalmente , perchè?

Discussione: pulsanti(rettangoli) su div "barra"

Strumenti discussione

Ricerca discussione

Visualizza

pulsanti(rettangoli) su div "barra"

Permessi di invio