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

andre9004 · 18 Mar 2012

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)

senza bordo (posizione div scorretta)

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!!

borgo italia · 18 Mar 2012

ciao
forde una ca...ta, ma prova a togliere il border e dargli
top: 0px;

andre9004 · 18 Mar 2012

niente non va... :dipser:

Max 1 · 18 Mar 2012

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>

andre9004 · 18 Mar 2012

non capisco dov'è la differenza

borgo italia · 18 Mar 2012

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;

Web Italia · 19 Mar 2012

Prova a inserire come position: absolute; e assegni top: 0;

Anche se non è la soluzione più pulita dovrebbe funzionare

borgo italia · 19 Mar 2012

ciao
per rinfrescarsi le idee (mie comprese) consiglio di guardare questo link
http://www.webreference.com/html/tutorial18/index.html

andre9004 · 19 Mar 2012

borgo italia ha scritto:
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;

non va :'(

@Web Italia

Ricorrere a position absolute non è il caso

marco_rx · 19 Mar 2012

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.

borgo italia ha scritto:
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 · 19 Mar 2012

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 · 19 Mar 2012

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!!

Alla prossima!

Max 1 · 19 Mar 2012

andre9004 ha scritto:
non capisco dov'è la differenza

La differenza sta che non avevi chiuso il tag.

Prova il codice come te l'ho postato e vedrai che funziona

borgo italia · 20 Mar 2012

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

il wrapper è sempre circa 10px sotto il body

criric · 20 Mar 2012

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 · 20 Mar 2012

ciao
@ciric

criric ha scritto:
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

andre9004 · 20 Mar 2012

io ho messo il padding a cont_header e rimane su...

screen:

Cerca

Cerca

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

andre9004

Utente Attivo

borgo italia

Super Moderatore

andre9004

Utente Attivo

Max 1

Super Moderatore

andre9004

Utente Attivo

borgo italia

Super Moderatore

Web Italia

Utente Attivo

borgo italia

Super Moderatore

andre9004

Utente Attivo

marco_rx

Utente Attivo

borgo italia

Super Moderatore

andre9004

Utente Attivo

Max 1

Super Moderatore

borgo italia

Super Moderatore

criric

Super Moderatore

borgo italia

Super Moderatore

andre9004

Utente Attivo

Discussioni simili