Dubbio margin/padding

**lomiz** · 03-03-2008, 17:10

Ciao a tutti,
stavo smanettando con i css e mi si è presentato un problema.
Ho messo due div annidati: uno da container con dei bordi, e l'altro con colore di sfondo e con il testo.
Volevo dare un distacco ai due di 1px così ho provato sia a dare un margin an quello interno, sia un padding a quello esterno, però mi si è presentato un problema:
tra la parte superiore ed inferiore dei due c'e' un grosso distacco anche se imposto le regole dei margin e dei padding a zero.
Il tutto si puo' risolvere con dei margini negativi ma sono sicuro che ci siano soluzioni più pulite.
Di sicuro è un buco teorico che ho io ma non sono riuscito a capire il perchè, qualcuno me lo potrebbe spiegare?

Grazie

**Mich_** · 03-03-2008, 18:12

Con quali browser hai testato?
Se il problema si presenta solo in IE, e` facile che sia uno dei bachi di tale browser (ci sono siti specializzati sui bachi di IE - trovi riferimenti tra i "link utili"); se si presenta con vari browser, puo` essere un errore di impostazione del layout.

Dato che non posti il codice (HTML, CSS, DTD), e` impossibile diagnosticare il problema.

**lomiz** · 03-03-2008, 18:33

se si presenta con vari browser, puo` essere un errore di impostazione del layout.

Di sicuro ho impostato male il layout.
Ecco il codice:

codice:

<html>
  <head>
    <title>Prove</title>
    <meta content="">
		<style type="text/css">
			@import url(style.css);
		</style>
  </head>
  <body>
  

  

  <div id="menu2">
  <div id="menu1">
	<h3>Menù</h3>
	

link1

	link2

	link3

	link4

	link5

	link6

	link7
</p>  
  </div>	
  </div>	  
  
  </body>
</html>

css:

codice:

html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 76%;text-align: center}


/*div interno*/
div#menu1{
background-color:green; /*colore sfondo del testo*/
margin: 10px, 10px, 10px, 10px; /*per ottenere un distacco di 1px tra il i bordi del div esterno e lo sfondo del div interno (non funziona oltre che visualizzarlo male)*/
}

/*div esterno/contenitore*/
div#menu2{
width:200px; /*larghezza alla quale si adagierà il div interno*/
border-color:#d0e2ff;/*colore bordi*/
border-width:1px;/*larghezza bordi*/
border-style:solid;/*stile bordi*/
}

Di sicuro c'è qualche concetto teorico che non conosco in quanto i margini proprio non fungono neanche lateralmente. Inoltre non capisco il perchè del distacco sulla parte superiore ed inferiore:

**lomiz** · 03-03-2008, 20:53

up

**lomiz** · 04-03-2008, 09:10

up

**lomiz** · 04-03-2008, 09:51

ho modificando il codice css eliminando alcuni errori.

codice:

html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 76%;text-align: center}


/*div interno*/
div#menu1{
background-color:#e8eefa; /*colore sfondo del testo*/
margin: 2px 2px 2px 2px; /*per ottenere un distacco di 1px tra il i bordi del div esterno e lo sfondo del div interno*/
}

/*div esterno/contenitore*/
div#menu2{
border:1px solid #c3d9ff;
width:200px; /*larghezza alla quale si adagierà il div interno*/
}

In questa maniera viene visualizzato correttamente con IE ma non con firefox

**Mich_** · 04-03-2008, 09:57

Non hai detto in quale browser stai testando, e quale DTD usi (la DTD e` specificata nel DOCTYPE).

Comunque c'e` un erorre semantico: i menu si fanno con le liste, non con i
.

Ma fatti un giro nelle raccolte di menu, tipo cssplay (riferimento tra i "link utili"): trovi sicuro spunti migliori per iniziare il tuo menu.

EDIT: vedo adesso la tua risposta di pochi minuti fa: dici solo i browser in cui testi, ma non la DTD: se on la specifichi, i brwoser moderni potrebbero interpretare male.

**lomiz** · 04-03-2008, 13:53

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
  <head>
    <title>Prove</title>
    <meta content="">
		<style type="text/css">
			@import url(prove.css);
		</style>
  </head>
  <body>
  

  

  <div id="menu2">
  <div id="menu1">
	<h3>Men&ugrave;</h3>
	

link1

	link2

	link3

	link4

	link5

	link6

	link7
</p>  
  </div>	
  </div>	  
  
  </body>
</html>

Sto testando con IE7 e FF 2.

Questo e' il codice modificato, completo di DTD (dovrebbe essere quello giusto).

Può essere Firefox che non rispetta gli standard??? Oppure cosa ho sbagliato??

Ripeto il fatto che si visualizza con IE ma non con FF

**Mich_** · 04-03-2008, 16:20

C'e` un grave errore HTML (il tag <html> duplicato), che pero` dovrebbe impedire la visualizzazione completa della pagina, per cui non e` quello il problema.
E c'e` un tag <meta> errato.
Comunque dovresti passare dai validatori: sono molto meglio degli umani nel trovare questo tipo di errori.

Dopodiche` in FF il menu2 e` largo 202 px; il menu1 dovrebbe posizionarsi all'interno, lasciando 2 px di margine in alto e a sinistra; il margine di destra e in basso dipende anche da quanto spazio occupano le scritte all'interno, per cui non e` determinato.

**lomiz** · 04-03-2008, 16:40

Originariamente inviato da Mich_
C'e` un grave errore HTML (il tag <html> duplicato), che pero` dovrebbe impedire la visualizzazione completa della pagina, per cui non e` quello il problema.
E c'e` un tag <meta> errato.
Comunque dovresti passare dai validatori: sono molto meglio degli umani nel trovare questo tipo di errori.

Riecco i codici validati con tutti gli errori corretti (il problema persiste come avevi previsto tu):

codice:

html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Prove</title>
    <meta content="asd" />
		<style type="text/css">
			@import url(style.css);
		</style>
  </head>
  <body>
  


  

  <div id="menu2">
  <div id="menu1">
	<h3>Men&ugrave;</h3>
	

link1

	link2

	link3


	link4

	link5

	link6

	link7
</p>  
  </div>	
  </div>	  
  
  </body>
</html>


css:
/*Risultati della validazione W3C dei Fogli di Stile a Cascata (CSS) per file://localhost/TextArea
Non sono stati identificati errori o avvisi*/

html, body {
margin : 0;
padding : 0;
}
body {
font-family : arial, sans-serif;
font-size : 76%;
text-align : center;
}
div#menu1 {
background-color : #e8eefa;
margin : 2px 2px 2px 2px;
}
div#menu2 {
border : 1px solid #c3d9ff;
width : 200px;
}

Dopodiche` in FF il menu2 e` largo 202 px; il menu1 dovrebbe posizionarsi all'interno, lasciando 2 px di margine in alto e a sinistra; il margine di destra e in basso dipende anche da quanto spazio occupano le scritte all'interno, per cui non e` determinato.

Non mi è ben chiaro cio' che mi hai detto.
Perchè è largo 2px in più? quale dei margini laterali prende?
Ma non si dovrebbe adagiarsi riempendo tutto il div genitore?
Quindi c'ho che voglio fare è impossibile?

Discussione: Dubbio margin/padding

Strumenti discussione

Ricerca discussione

Visualizza

Dubbio margin/padding

Permessi di invio