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.449
338
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.046
150
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.046
150
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! ;)
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
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.046
150
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
E Creare un testo trasparente dietro un div HTML e CSS 5
F Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni? Javascript 0
M Accordion menu e posizione div HTML e CSS 0
P jquery refresh div non funziona Javascript 0
P refresh div + scrittura/lettura dal db Javascript 1
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
M Unire 2 funzioni per l'invio di un form e con l'apertura di un div Javascript 0
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
Cosina [PHP] Scrivere dati in un div specifico PHP 3
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4
trattorino [Javascript] onclick su piu div insieme Javascript 1
trattorino ritornare al div precedente jQuery 2
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
A JAVASCRIPT ELIMINAZIONE DIV DINAMICO SU SITO Offerte e Richieste di Lavoro e/o Collaborazione 3
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
M [HTML] Invertire DIV su dispositivi mobile HTML e CSS 2
A Javascript Nascondere Div con id numerico dinamico Javascript 18
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
paloppa Div che appare appena due form sono compilati jQuery 16
S [javascript] visualizzare/nascondere div Javascript 3
S [HTML] Centrare verticalmente il testo in div HTML e CSS 2
G [HTML] Modificare ordine dei div in mobile responsive HTML e CSS 5
D [HTML] Frameset e Div HTML e CSS 8
G [HTML] Impostare dimensione immagini in un div HTML e CSS 2
L php - pulsante premuto che mostra #div PHP 3
S [HTML] Div visibile o nascosto al passaggio del mouse HTML e CSS 3
C [Javascript] Mostrare un div cliccando una checkbox Javascript 0
M Ottenere i valori di una proprietà su un array di oggetti (es. DIV) in JavaScript Javascript 7
C Nascondere un div al click di una casella Ajax 1
S [HTML] Distanza esatta tra due div HTML e CSS 7
G [HTML] Posizionamento testo in un div HTML e CSS 5
trattorino css solo se richiama un class di un div HTML e CSS 1
G [HTML] Bordo bianco sotto immagine in un Div HTML e CSS 1

Discussioni simili