ne sto uscendo matto: i div lasciano spazio

**artax** · 10-10-2005, 11:37

Salve, ragazzi,

ho cercato mille soluzioni, ho letto tutti gli articoli di html e di extrowebsite ma nada

Ho impostato div e css in modo che l'immagine rossa che contiene il logo sia incorniciata da degli sfondi leggermente sfumati. Non so come eliminare lo spazio tra un div e l'altro! In mozzilla lo spazio si presenta solo in basso, in IE sia in alto che in basso:

Questo il docice della pagina:

codice:

<?php header("Content-type: text/html; charset=utf-8"); ?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="" />
<meta name="keyword" content="" />
<link type="text/css" rel="stylesheet" href="stili3.css" />

<title>Sito MxDesign</title>
</head>

<body>
<center>
	<div id="liv1">

		<div id="cell1">
			<div id="as"></div>
			<div id="su1"></div>
			<div id="ad"></div>
		</div>
		<div id="cell1">
			<div id="sin1"></div>
			<div id="cont">[img]img/logo.jpg[/img]</div>
			<div id="des1"></div>

		</div>
		<div id="cell1">
			<div id="bs"></div>
			<div id="giu1"></div>
			<div id="bd"></div>
		</div>
	</div>
</center>


</body>
</html>
?>

e questo il foglio css interessato:

codice:

 body { 
	PADDING: 0px;
	FONT-SIZE: 10px;
	MARGIN: 0px;
	FONT-FAMILY: verdana, arial, helvetica, sans-serif;
	HEIGHT: 100%;
	BACKGROUND-COLOR: #b8b8b8;
}
div {
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	position: relative;
	top: 0px;
	left: 0px;
	border: 0px 0px 0px 0px;
	float: left;
}
div#cell1 {
	width: 576px;
	float: none;
}
div#su1 {
	background-image : url(img/trat_a.gif);
	width: 560px;
	height: 8px;    
}
div#cont {
	width: 560px;	  
}
div#sin1 {
	background-image : url(img/trat_s.gif);
	width: 8px;
	height: 75px;
}
div#des1 {
	background-image : url(img/trat_d.gif);
	width: 8px;
	height: 75px;

}
div#giu1 {
	background-image : url(img/trat_b.gif);
	width: 560px;
	height: 8px;    
}

div#as {
	background-image : url(img/ang_as.gif);
	width: 8px;
	height: 8px;
}
div#ad {
	background-image : url(img/ang_ad.gif);
	width: 8px;
	height: 8px;    
}
div#bs {
	background-image : url(img/ang_bs.gif);
	width: 8px;
	height: 8px;    
}
div#bd {
	background-image : url(img/ang_bd.gif);
	width: 8px;
	height: 8px;
}
div#liv1 {
	position: relative;
	top: 25px;
	left: 0px;
	width: 780px;
	padding: 0px;
	margin: 0px;
	float: none;
}

Vi prego aiutatemi ne sto uscendo pazzo!!!!

**artax** · 10-10-2005, 11:39

p.s.: per semplificare la comprensione della pagina... in sostanza il logo è incastonato in un bordo sfumato composto dai 4 lati e dai 4 angoli.

**Mich_** · 10-10-2005, 12:08

Potresti iniziare ad usare un DOCTYPE valido (XHTML 1.1 Transitional non esiste! ).
E potresti iniziare a validare la pagina per il codice HTML (il tag <center> non esiste piu` in XHTML Strict).

Poi si puo` vedere anche il CSS, ma con quegli errori che ti ho segnalato non ha senso vedere se funziona o meno il CSS.

**artax** · 10-10-2005, 16:29

lo so ho tolto il center e prima era 1.0 (1.1 lo avevo provato in un impeto di disperazione).
Nessun cambiamento cmq.

**floyd46** · 10-10-2005, 16:48

ciao
apparte che ho notato anche io, come giustamente ti fatto notare Mich_ di inserire una DTD valida, e provare a vedere cosa viene fuori.
Inoltre ti ringrazio di aver letto gli articoli presenti in extrowebsite (in quanto io sono l'autore di quel sito e mi fa piacere che serva a qualcosina quwello che ho fatto), ma sinceramente non ho capito cosa vorresti ottenere con i div che vuoi "incastonare" in altri div ecc...

Potresti allegare un file grafico e vedere quello di cui hai bisogno.
Non scoraggiati perchè quando hai capito il meccanismo dei CSS ti verrà tutto + semplice. fammi sapere, ciao.
Floyd

**Mich_** · 10-10-2005, 16:57

Infatti il DOCTYPE di prima non aveva senso.

Ancora non capisco la riga di PHP in testa: se il codice postato e` il sorgente PHP, allora sicuramente ci sara` un errore nel codice che arriva al browser; viceversa se il codice e` quanto arriva al browser hai un'impostazione errata nel tuo server.

Comunqe se vuoi che funzioni anche in IE, il DOCTYPE deve essere la prima riga del file.

Poi io toglierei il position e il top e left del div: ti crea solo confusione, e ti impedisce il corretto flusso dei div.

Inoltre nel tuo CSS tu scrivi sempre
div#IDOGGETTO
non e` necessario dato che l'ID deve essere unico: ti basta scrivere
#IDOGGETTO

Comunque per il resto il CSS dovrebbe essere corretto, per cui l'errore deve essere da qualche altra parte.

**artax** · 10-10-2005, 17:25

Originariamente inviato da Mich_
Ancora non capisco la riga di PHP in testa: se il codice postato e` il sorgente PHP, allora sicuramente ci sara` un errore nel codice che arriva al browser; viceversa se il codice e` quanto arriva al browser hai un'impostazione errata nel tuo server.

Ok ho tolto il richiamo in php e messo come prima riga il doctype. Ce l'avevmo messo perchè l'avevo visto non so piu dove. Le pagine sono in php e senza quella riga il validator nonmi dava errore ma mi segnalava la sua mancanza.

Originariamente inviato da floyd46
Inoltre ti ringrazio di aver letto gli articoli presenti in extrowebsite (in quanto io sono l'autore di quel sito e mi fa piacere che serva a qualcosina quwello che ho fatto), ma sinceramente non ho capito cosa vorresti ottenere con i div che vuoi "incastonare" in altri div ecc...Floyd

Grazie a te il tuo sito è ottimo!

Con i div vorrei semplicemente sostituire le obsolete tabelle. Qui sotto riporto un esempio grafico di come vedo ora la pagina, dopo aver corretto il doctype e tolto gli id e sostituiti con class (visto che li riutilizzerò nella pagina). In mozzilla si vede correttamente, a differenza di ie

:

Qui di seguito il codice (maledettoooooo!):

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 name="description" content="" />
<meta name="keyword" content="" />
<link type="text/css" rel="stylesheet" href="stili3.css" />

<title>Sito MxDesign</title>
</head>

<body>
	<div id="liv1">
		<div class="cell1">
			<div class="as"></div>

			<div class="su1"></div>
			<div class="ad"></div>
		</div>
		<div class="cell1">
			<div class="sin1"></div>
			<div class="cont">[img]img/logo.jpg[/img]</div>
			<div class="des1"></div>
		</div>
		<div class="cell1">

			<div class="bs"></div>
			<div class="giu1"></div>
			<div class="bd"></div>
		</div>
	</div>



</body>
</html>

e il codice css:

codice:

 body { 
	PADDING: 0px;
	FONT-SIZE: 10px;
	MARGIN: 0px;
	FONT-FAMILY: verdana, arial, helvetica, sans-serif;
	HEIGHT: 100%;
	BACKGROUND-COLOR: #b8b8b8;
	
}
div {
	position: relative;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	border: 0px 0px 0px 0px;
	float: left;
}


.cell1 {
	width: 576px;
	float: none;
}

.su1 {
	background-image : url(img/trat_a.gif);
	width: 560px;
	height: 8px;    
}

.sin1 {
	background-image : url(img/trat_s.gif);
	width: 8px;
	height: 75px;
}

.des1 {
	background-image : url(img/trat_d.gif);
	width: 8px;
	height: 75px;

}

.giu1 {
	background-image : url(img/trat_b.gif);
	width: 560px;
	height: 8px; 
}



.as {
	background-image : url(img/ang_as.gif);
	width: 8px;
	height: 8px;
}
.ad {
	background-image : url(img/ang_ad.gif);
	width: 8px;
	height: 8px;    
}

.bs {
	background-image : url(img/ang_bs.gif);
	width: 8px;
	height: 8px;    
}

.bd {
	background-image : url(img/ang_bd.gif);
	width: 8px;
	height: 8px;
}



#liv1 {
	position: absolute;
	top: 25px;
	left: 50%;
	width: 780px;
	padding: 0px;
	margin: 0px;
	float: none;
	margin-left:-390px;
}


.cont {
	width: 560px;
	height:75px;
}

**Mich_** · 10-10-2005, 17:55

C'e` qualcosa che non mi torna.

E` esattamente quello il codice HTML? Come fa a realizzare quel logo ripetuto? (o e` l'immagine che contiene la scritta logo ripetuta tante volte?)

E ci sono una serie di <div> vuoti: in quel caso il browser e` autorizzato a non interpretare il blocco per intero, compreso l'eventuale CSS associato: qualche versione di IE effettivamente non interpreta i blocchi vuoti.

C'e` poi il posizionamento assoluto del contenitore, che potrebbe avere effetti collaterali: un layout senza posizionamenti e` piu` semplice da gestire.

**artax** · 10-10-2005, 17:56

Ho risoltoooooooooooooooooooooooooooo

VVoVe:

VVoVe:
(credo)

Ho cambiato questo:

codice:

div {
	position: relative;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	border: 0px 0px 0px 0px;
	float: left; }

con questo:

codice:

div {
	position: relative;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	border: 0px 0px 0px 0px;
	float: left; 
	overflow:hidden;  
}

dovrebbe essere corretto no?

Discussione: ne sto uscendo matto: i div lasciano spazio

Strumenti discussione

Ricerca discussione

Visualizza

ne sto uscendo matto: i div lasciano spazio

Re: ne sto uscendo matto: i div lasciano spazio

Permessi di invio