div impazzito - con il bordo resta su, senza va giu

andre9004

Utente Attivo
15 Mar 2012
104
1
0
Lombardia
Eccomi di nuovo qui ... è assurdo... se metto il bordo a un div questo mi resta al suo posto.. se non lo metto si abbassa...

screen:

con il bordo (posizione div corretta)
2012-03-18_190015.png

senza bordo (posizione div scorretta)
2012-03-18_185818.png

codice:
Codice:
css:
/* body */
body{
	margin:0px;
	padding:0px;
	text-align:center;
}
/* Wrapper Header */
#wrapper_header{
	width:100%;
	height:154px;
	background-image:url(img/wrapper_header.png);
	background-repeat:repeat-x;
	margin:0px;
	padding:0px;
}
#cont_header{
	position:relative;
	width:800px;
	height:154px;
	margin:0px auto;
	text-align:left;
	border:1px solid black;
}

html:
<div id="wrapper_header">
	<div id="cont_header">
               .......
        </div>
</div>
Io lo voglio senza bordo e attaccato su... ma non resta :'(( come potrei fare?

Grazie mille in anticipo!!
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.278
330
83
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
/* body */
body{
	margin:0px;
	padding:0px;
	text-align:center;
}
/* Wrapper Header */
#wrapper_header{
	width:100%;
	height:154px;
	background-image:url(img/wrapper_header.png);
	background-repeat:repeat-x;
	margin:0px;
	padding:0px;
}
#cont_header{
	position:relative;
	width:800px;
	height:154px;
	margin:0px auto;
	text-align:left;
}

</style>
</head>

<body>
<div id="wrapper_header">
	<div id="cont_header">
              ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
        </div>
        </div>

</body>
</html>
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
ciao
una volta sapevo che usando margin l'ordine era il seguente
margin:'margin-top' 'margin-right' 'margin-bottom' 'margin-left';
per cui prova a mettere
margin:0px auto 0px auto;
 

marco_rx

Utente Attivo
19 Dic 2010
129
0
0
Ma ci sono altri elementi nella pagina? Posta il codice completo.
Comunque per curiosità prova a sostituire questa parte
Codice:
#cont_header{
	position:relative;
	width:800px;
	height:154px;
	margin:0px auto;
	text-align:left;
	border:1px solid black;
}
con questa:
Codice:
#cont_header{
	position:relative;
	width:802px;
	height:154px;
	margin:0px auto;
	text-align:left;
}
PS. al posto di scrivere 0px scrivi solamente 0. Zero è zero sia che siano px sia che siano em o percentuali, è superfluo specificare.

ciao
una volta sapevo che usando margin l'ordine era il seguente
margin:'margin-top' 'margin-right' 'margin-bottom' 'margin-left';
per cui prova a mettere
margin:0px auto 0px auto;
Quando i valori di top e bottom o di left e right sono gli stessi si può abbreviare.
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
ciao
ho provato (e riprovato) in questa modo il cont risulta dentro il wrapper, ma nel body rimangono circa 10 px che non sono riuscito a far sparire, comunque è il meglio che io sono riuscito ad ottenere.
guarda che ho messo i background-color per vedere il body e i div

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
html{
	margin:0px;
	padding:0px;
}
body{
	margin:0px;
	padding:0px;
	text-align:center;
	background-color:#CC6600;
}
/* Wrapper Header */
#wrapper_header{
	width:100%;
	height:154px;
	background-color:#CCCCCC;
	/*background-image:url(img/wrapper_header.png);
	background-repeat:repeat-x;*/
	margin:0px;
	padding:0px;
}
#cont_header{
	/*position:relative;*/
	width:800px;
	height:154px;
	margin:0px auto 0px auto;
	text-align:left;
	/*border: 1px solid;*/
	background-color:#CCCC66;
}
</style>
</head>
<body>
<div id="wrapper_header">
	<div id="cont_header">
	  <p>nel mezzo di camin di nostra vita<br>
	    mi ritrovai per un html oscuro<br>
	    che il div del css era smarrito</p>
    </div>
</div>
</body>
</html>
 

andre9004

Utente Attivo
15 Mar 2012
104
1
0
Lombardia
max la tua soluzione non va.. :( comunque ho capito.. hai messo i due px aggiuntivi del bordo... ma non va lo stesso :((

Grazie anche per il consiglio sullo 0px

alla fine ho risolto.. ho messo il padding e ci sta su... bo... ecco il codice ;)

Codice:
/* body */
body{
	margin:0px;
	padding:0px;
	text-align:center;
}

/* Wrapper Header */
#wrapper_header{
	width:100%;
	height:154px;
	background-image:url(img/wrapper_header.png);
	background-repeat:repeat-x;
	margin:0px;
	padding:0px;
}
#cont_header{
	position:relative;
	width:800px;
	height:135px;
	margin:0px auto;
	text-align:left;
	padding-top:19px;
}
Grazie mille a tutti!! Davvero!! :D :D Alla prossima! ;)
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.278
330
83

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
ciao
secondo me stiamo girando come trottole senza cavare un ragno dal buco.
ho provato il css di andre9004 di max 1 e il mio:
sia con IE che FIRE ottengo sempre la stessa cosa come da imm seguente
div_impazzito.jpg
il wrapper è sempre circa 10px sotto il body
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
@Borgo

il problema nel tuo codice è il tag p che per default ha il padding e forse anche il margin preimpostati

puoi risolvere cosi:

Codice:
p {
  margin:0;
  padding:0; 
}
Il codice di max a me funziona
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
ciao
@ciric
Ciao,
@Borgo

il problema nel tuo codice è il tag p che per default ha il padding e forse anche il margin preimpostati

puoi risolvere cosi:

Codice:
p {
  margin:0;
  padding:0; 
}
Il codice di max a me funziona
hai ragione, però con <p> o senza usando i vari css postati risultano sempre uguali.
con <p> rimangono i 10 px (su tutti), senza <p> i 10px spariscono su tutti
cioè non trovo alcuna differenza usando un css o un altro