Salve sfruttando boostrap ho realizzato questo :


codice:
  
<!DOCTYPE html>  
<html > 
<head> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>Spidermail</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/css/default.css" rel="stylesheet" type="text/css" media="all" /> 
<link href="css/css/bootstrap.css" rel="stylesheet">
<link href="csss/css/bootstrap-responsive.css" rel="stylesheet">

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/prove.js"></script>



</head> 
<body > 
<div id="container" class="container-fluid"> 
	 <div class="row-fluid">
		 <div id="pubblictasup" class="span12"> 
			<h1>Pubblicità </h1> 
		</div>
	</div>
	   <div class="row-fluid">
		  <div  id='logo' class="span4">
			 <h1>logo</h1>
		  </div>
		  <div id='menu' class="span8">
			 
				<nav>
				 <ul> 
                <li >Homepage            [*]Prodotti
	[*]Ricerca  --> 
						
				[/list]
				</nav>
			
		  </div>
	   </div>

        
 <div class="row-fluid">
	<div id= "pubblicitàsx" class="span2"><h1>Pub</h1></div>	 
	<div id="banner" class="span8"> 
			<h1>testo<h1> 
			
			 
	</div> 
	<div id= "pubblicitàdx" class="span2"><h1>Pub</h1></div>
</div> 
	<div id='footermain' class="row-fluid"> 
		<div id="footer" class="span12"> 
			

Copyright (c) 2013 </p> 
		</div>
	</div>  

</div>  
</body> 
</html>
Queto il css :


codice:

#container{
	background-color: #2b2b2b;	
	height: 100%;
}

#pubblictasup{
	height: 100%;
	text-align: center;
}

#menu {
	float: right;
	width: 50%;
	height: 50%;
	padding: 20px 40px 0px 0px;
}

#menu ul {
	float: right;
	margin: 0;
	padding: 40px 0px 0px 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
}

#menu a {
	display: block;
	margin-left: 1px;
	padding: 7px 20px 7px 20px;
	letter-spacing: 1px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #FFFFFF;
}

#menu a:hover, #menu .current_page_item a {
	text-decoration: none;
	background: #1B5902;
	border-radius: 5px;
	color: #FFFFFF;
}
// banner

#banner {
	height: 700px;	
	overflow: hidden;
	width: 70%;
   text-align:center;
	margin: 0 0 0 0;
   background-color: greenyellow;
   color:red;
	border: 20px solid #FFFFFF;
   text-align:center;
}
	
#banner h1{
	color: red;	
}



// footer

#footer {
	height: 100px;
	margin: 0 auto;
	padding: 50px 0px 50px 0px;
	text-align: center;
}

#footer p {
	text-align: center;
	font-size: 12px;
	color: #757575;
}

#footer a {
	color: #757575;
}
HO 2 domande da farvi :
1- Perchè il div banner non viene con il bordo bianco di 20px?
2- Perchè se applico il background-color al body non viene preso , mentre se lo metto al container si?