problema layout con i CSS

**awd** · 27-09-2003, 18:52

Dunque, sto cercando di costruire un layout solo con i CSS, ma al terzo div sono già in crisi

Stranamente funziona tutto bene con explorer, mentre ho dei problemi con Netscape e Opera che mi visualizza un margine bianco in alto che non dovrebbe esserci. Allego un immagine esplicativa e il codice CSS. Non riesco a capire cosa ci sia che nn funzioni, qualcuno mi da una mano?
thanx

codice:

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #FFFFFF;
	text-align: center;
	padding: 0px;
	margin: 0px;
}

.generale {
	width: 700px;
	border: 1px solid #333333;
	background-color: #FFFFFF;
	margin: 10px auto;
	text-align: left;
}

.testata {
	margin: 0px;
	height: 60px;
	padding: 0px 5px;
	background-color: #006699;
	border-bottom: 1px solid #333333;
	color: #FFFFFF;
}
.menu {
	background-color: #00CCFF;
	width: 640px;
	margin-right: 29px;
	margin-left: 29px;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	border-left: 1px solid #333333;
}

**Francis87** · 27-09-2003, 21:13

Originariamente inviato da awd
Dunque, sto cercando di costruire un layout solo con i CSS, ma al terzo div sono già in crisi

Stranamente funziona tutto bene con explorer, mentre ho dei problemi con Netscape e Opera che mi visualizza un margine bianco in alto che non dovrebbe esserci. Allego un immagine esplicativa e il codice CSS. Non riesco a capire cosa ci sia che nn funzioni, qualcuno mi da una mano?
thanx

codice:

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #FFFFFF;
	text-align: center;
	padding: 0px;
	margin: 0px;
}

.generale {
	width: 700px;
	border: 1px solid #333333;
	background-color: #FFFFFF;
	margin: 10px auto;
	text-align: left;
}

.testata {
	margin: 0px;
	height: 60px;
	padding: 0px 5px;
	background-color: #006699;
	border-bottom: 1px solid #333333;
	color: #FFFFFF;
}
.menu {
	background-color: #00CCFF;
	width: 640px;
	margin-right: 29px;
	margin-left: 29px;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	border-left: 1px solid #333333;
}

se non vuoi nessuno spazio bianco prova:

codice:

.generale {
	width: 700px;
	border: 1px solid #333333;
	background-color: #FFFFFF;
	margin-top: 0px;
     /* margin: 10px auto; */
	text-align: left;
}

.testata {
	margin: 0px;
	height: 60px;
	padding: 0px 5px;
	background-color: #006699;
	border-bottom: 1px solid #333333;
	color: #FFFFFF;
}
.menu {
	background-color: #00CCFF;
	width: 640px;
        margin-top: 0;
	margin-right: 29px;
	margin-left: 29px;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	border-left: 1px solid #333333;

**awd** · 27-09-2003, 21:44

Ma così non ho più l'allineamento centrato!
e cmq non funzia!

**Francis87** · 27-09-2003, 21:47

Originariamente inviato da awd
Ma così non ho più l'allineamento centrato!
e cmq non funzia!

oops... allora sorry..
se vuoi posta il codice della pagina, ke provo

**awd** · 27-09-2003, 22:02

Non avevo visto il margin-top: 0; nel menu, ma cmq non funziona lo stesso! e cmq il margine a 0 dovrebbe ereditarlo da body (credo)

Il codice sono poche righe:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="test2.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="generale">
  <div class="testata"><h1>TESTATA</h1></div>
  <div class="menu">MENU</div>
  

</p>
  

</p>
  

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

**Francis87** · 27-09-2003, 22:10

ok adesso provo!

**Furcas** · 28-09-2003, 02:08

il problema ti si verifica perchè la parola TESTATA è inserita all' interno di H1
H1 è un elemento block di suo, che crea autonomamente uno spazio sopra e sotto.
per elimanarlo devi agire sui margini.
Nel tuo CSS inserisci, dopo .testata, quanto segue:

.testata h1 {
margin: 0px;
}

vedrai che con Mozilla e simili non avrai più il problema, come puoi verificare dall' immagine che allego.
Non ho sottomano adesso Opera per verificare anche con esso, ma dovrebbe andare pure lì.

**awd** · 28-09-2003, 11:30

Si infatti ho già risolto! era l'h1 che aggiungeva il suo margine di default, visto che nn lo avevo ancora definito nel css. Anche con Opera tutto ok!
Grazie cmq!

Discussione: problema layout con i CSS

Strumenti discussione

Ricerca discussione

Visualizza

problema layout con i CSS

Re: problema layout con i CSS

Permessi di invio