Eliminare spazio tra <div>[Principiante]

**pippuccio76** · 01-10-2012, 21:31

Salve vorrei eliminare lo spazio tra il <div> header e il <div> navigation
questa è la pagina:

codice:

<head> 	<title>Euro Arte ferro di tizio</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="euroarteferro.css" /> </head>  <body> 	<div id="container">         <div id="header"> 			<h1>Euro Arte Ferro</h1> 			<H2>di tizio</H2> 		</div>	 		<div id="navigation"> 			<ul> 			 			[*]Home  			[*]Infissi Alluminio  			[*]Infissi Pvc  			[*]Ferro Battuto  			[*]Zanzariere  			[*]Contatti 		 			[/list]		</div> 		<div id="content"> 		 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		</div> 		<div id="footer"> 		

© 2012 - Grafica, layout  sono di esclusiva proprietà di caio s.r.l.
 		Per informazioni o richieste sulla grafica del sito web cliccare sul nome</p></div> 	</body>  </html>

e questo il css :

codice:

html,body{margin:0; padding: 0} body{font-family: arial,sans-serif; font-size: 76%} h1{text-align:center ; margin: 0;padding:0} h1{font: bold 60px arial,serif ;color:#FFFF00} h2{background-color:#1E90FF ; color:#A020F0; font-size:14px; text-align:center} div#header {background-color:#1E90FF; color:#A020F0} div#navigation {background-color:#7F7F7F} div#navigation ul{margin: 0;padding: 0; list-style-type: none;} div#navigation li{display: inline; margin:  30px;padding: 0} div#navigation a{color:#369;font: normal bold 20px arial,sans-serif;text-decoration: none} div#navigation a:hover{color: #FFFF00;text-decoration: underline} div#navigation a#activelink{color: #003333;text-decoration: none} div#footer {background-color:#1E90FF; color:#A020F0 ;text-align:center}

ps come metto il codice in modo leggibile?

**carlomarangoni** · 01-10-2012, 23:34

Il codice postato così è illegibile

**pippuccio76** · 02-10-2012, 08:47

Rieccoli in modo leggibile :

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>Euro Arte ferro di Marco Calamaio</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="euroarteferro.css" />
</head>

<body>
	<div id="container">
        <div id="header">
			<h1>Euro Arte Ferro</h1>
			<H2>caio</H2>
		</div>	
		<div id="navigation">
			<ul>
			
			[*]Home 
			[*]Infissi Alluminio 
			[*]Infissi Pvc 
			[*]Ferro Battuto 
			[*]Zanzariere 
			[*]Contatti 		
			[/list]
		</div>
		<div id="content">
		
		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		</div>
		<div id="footer">
		

© 2012 - Grafica, layout e guide sono di esclusiva proprietà di tizio s.r.l.

		Per informazioni o richieste sulla grafica del sito web cliccare sul nome</p></div>
	</body>

</html>

CSS

codice:

html,body{margin:0; padding: 0}
body{font-family: arial,sans-serif; font-size: 76%}
h1{text-align:center ; margin: 0;padding:0}
h1{font: bold 60px arial,serif ;color:#FFFF00}
h2{background-color:#1E90FF ; color:#A020F0; font-size:14px; text-align:center}
div#header {background-color:#1E90FF; color:#A020F0}
div#navigation {background-color:#7F7F7F}
div#navigation ul{margin: 0;padding: 0; list-style-type: none;}
div#navigation li{display: inline; margin:  30px;padding: 0}
div#navigation a{color:#369;font: normal bold 20px arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #FFFF00;text-decoration: underline}
div#navigation a#activelink{color: #003333;text-decoration: none}
div#footer {background-color:#1E90FF; color:#A020F0 ;text-align:center}

**codencode** · 02-10-2012, 10:22

Aggiungi margin-bottom:0 all'h2 presente nell'header.
Ti consiglio di utilizzare un foglio di stile di reset prima di iniziare la formattazione CSS.

**pippuccio76** · 04-10-2012, 11:07

HO applicato delle modifiche :

codice:

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

<head>
	<title>Euro Arte ferro di Caio</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="euroarteferro.css" />
</head>

<body>
	<div id="container"> 
        <div id="header">
			<h1>Euro Arte Ferro<h1>
			<h3>di tizo e caio<h3>
		</div>
		<div id="navigation">
			<ul>
			
			[*]Home 
			[*]Infissi Alluminio 
			[*]Infissi Pvc 
			[*]Ferro Battuto 
			[*]Zanzariere 
			[*]Contatti 		
			[/list]
		</div>
		<div id="content">
		
		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		
  
		

		</div>
		<div id="footer">
		

© 2012 - Grafica, layout e guide sono di esclusiva proprietà di Sempronio s.r.l.

		</div>
		
	</body>

</html>

e questo il css

codice:

body{margin:0}
body{font-family: arial,sans-serif; font-size: 76%}
h1{text-align:center ; margin: 0;padding:0;font: bold 60px arial,serif ;color:#FFFF00}
h3{margin: 0;padding:0;color:#FFFF00;text-align:center}
div#header {background-color:#1E90FF; color:#A020F;margin: 0 0 0 0;padding: 0;height:150px}
div#container{position:relative  ;margin-right:auto;margin-left:auto;  width: 60% ;  border : 2px solid Black  }
div#navigation {background-color:#7F7F7F}
div#navigation ul{margin: 0;padding: 0; list-style-type: none;}
div#navigation li{display: inline; margin:  30px;padding: 0}
div#navigation a{color:#369;font: normal bold 15px arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #FFFF00;text-decoration: underline}
div#navigation a#activelink{color: #003333;text-decoration: none}
div#footer {background-color:#1E90FF; color:#A020F0 ;text-align:center ; position:fixed ; bottom:0px ; margin-right:auto;margin-left:auto ;width: 60% ;}

Ho 2 domande vorrei che il riquadro del div container arrivasse sotto al footer
e vorrei sapere come spostare la scritta [h3]"di tizio e caio"
specificando il punto preciso dove dovrebbe essere (per esempio molto + vicino a h1 oppure sotto la o di h1)
Grazie per i suggerimenti

**braskal** · 04-10-2012, 14:15

devi giocare un pò con i margin dell'h3 se vuoi spostarlo, ovviamente dovendolo spostare verso destra usa margin-left

es:

codice:

h3 {
     margin-left: 10px;
}

vedi un pò come va. puoi usare anche le percentuali volendo..

**pippuccio76** · 04-10-2012, 19:58

e per far si che il div container arrivi fino al footer?e per avvicinare l'h3 al h1 ?

Discussione: Eliminare spazio tra <div>[Principiante]

Strumenti discussione

Ricerca discussione

Visualizza

Eliminare spazio tra <div>[Principiante]

Permessi di invio