Newsgroup: it.comp.www.html
Titolo: anomalia CSS????

allora..
ho cominciato da poco a lottare con i css e mi sto scontrando con alcune 
cose che, secondo me, sono anomale.
Vediamo se riuscite a darmi una spiegazione ragionevole a questo 
comportamento.
creo 6 aree con i tag div..
ogni area ha dimensione 180x120 punti
sono su 2 righe (quindi un 3x2)
il codice che ho usato e'.
----- inizio codice -----
<!-- prima categoria -->
<div name="cat1" style="position: absolute; width: 180px; height: 120px; 
top: 10px; left: 50px; background-color: #C0C0C0; z-index: 1">
</div>
<!-- seconda categoria -->
<div name="cat2" style="position: absolute; width: 180px; height: 120px; 
top: 10px; left: 260; background-color: #C0C0C0; z-index: 1">
</div>
<!-- terza categoria -->
<div name="cat3" style="position: absolute; width: 180px; height: 120px; 
top: 10px; left: 470px; background-color: #C0C0C0; z-index: 1">
</div>
<!-- seconda riga -->
<!-- quarta categoria -->
<div name="cat4" style="position: absolute; width: 180px; height: 120px; 
top: 160px; left: 50px; background-color: #C0C0C0; z-index: 1">
</div>
<!-- quinta categoria -->
<div name="cat5" style="position: absolute; width: 180px; height: 120px; 
top: 160px; left: 260px; background-color: #C0C0C0; z-index: 1">
</div>
<!-- sesta categoria -->
<div name="cat6" style="position: absolute; width: 180px; height: 120px; 
top: 160px; left: 470px; background-color: #C0C0C0; z-index: 1">
</div>
----- fine codice -----
ora.. finche' dentro i riquadri non inserisco alcunche',  e' tutto ok, i 
riquadri rimangono allineati tra loro in maniera corretta (come se avessi 
fatto una tabella di 5x3 ed avessi colorato le caselle dispari), le 
caselle superiori sono a 10 punti dal margine superiore e distanti 30 
punti l'una dall'altra, quelle inferiori a 30 punti da quelle superiori.
Se pero' inserisco una tabella del tipo
---- inizio codice ----
<table class="offerte">
	<tr>
		<th class="cat" colspan="3">
		</th>
	</tr>
	<tr>
		<td class="bordo">
			&nbsp;
		</td>
		<td>
			&nbsp;
		</td>
		<td class="bordo">
			&nbsp;
		</td>
	</tr>
</table>		
---- fine codice ----
in tutti i riquadri, TUTTI i riquadri, tranne quello in alto a sinistra 
(il "cat1") si spostano a destra di 50px e in basso di 10, come se il 
riferimento 0,0 per il posizionamento assoluto non fosse piu' l'angolo 
superiore sinistro della pagina, ma quello del primo riquadro (sempre 
"cat1").
Ora... ho sistemato la cosa diminuendo di 10px ogni top ad esclusione del 
primo e di 50 ogni left....
Non mi pare pero' molto logica come cosa.. se il posizionamento assoluto 
del primo elemento e' rispetto all'angolo della pagina, non vedo perche' 
per gli altri questo assunto non valga...
_ Chi mi da un motivo a questo comportamento, o mi indica qual'e' 
l'errore formale e/o concettuale che ho commesso? _
TIA

| _ Chi mi da un motivo a questo comportamento, o mi indica qual'e'
| l'errore formale e/o concettuale che ho commesso? _
Ho provato il codice e devo dire che non ho riscontrato alcun problema.
L'unico "erroruccio" riscontrato dal mio validatore (CSE) č che div non
supporta l'attributo "name" bensě "id".
Con IE5 e con Netscape 4.7 non ho avuto modifiche nell'allineamento degli
oggetti sulla pagina.
mandi
andrea/bergamasco
--
______________________________
Le faq di it.comp.www.html:
http://digilander.iol.it/tamburo
----------------------------------------------------------------------------
------------
Il codice l'ho interpretato cosě:
<body bgcolor="#ffffff">
<!-- prima categoria -->
<div name="cat1" style="position: absolute; width: 180px; height: 120px;
top: 10px; left: 50px; background-color: #C0C0C0; z-index: 1">
</div>
<!-- seconda categoria -->
<div name="cat2" style="position: absolute; width: 180px; height: 120px;
top: 10px; left: 260; background-color: #C0C0C0; z-index: 1">
<table class="offerte">
<tr>
<th class="cat" colspan="3">Seconda
</th>
</tr>
<tr>
<td class="bordo">
&nbsp;
</td>
<td>
&nbsp;
</td>
<td class="bordo">
&nbsp;
</td>
</tr>
</table>
</div>
<!-- terza categoria -->
<div name="cat3" style="position: absolute; width: 180px; height: 120px;
top: 10px; left: 470px; background-color: #C0C0C0; z-index: 1">
<table class="offerte">
<tr>
<th class="cat" colspan="3">Terza
</th>
</tr>
<tr>
<td class="bordo">
&nbsp;
</td>
<td>
&nbsp;
</td>
<td class="bordo">
&nbsp;
</td>
</tr>
</table>
</div>
<!-- seconda riga -->
<!-- quarta categoria -->
<div name="cat4" style="position: absolute; width: 180px; height: 120px;
top: 160px; left: 50px; background-color: #C0C0C0; z-index: 1">
<table class="offerte">
<tr>
<th class="cat" colspan="3">Quarta
</th>
</tr>
<tr>
<td class="bordo">
&nbsp;
</td>
<td>
&nbsp;
</td>
<td class="bordo">
&nbsp;
</td>
</tr>
</table>
</div>
<!-- quinta categoria -->
<div name="cat5" style="position: absolute; width: 180px; height: 120px;
top: 160px; left: 260px; background-color: #C0C0C0; z-index: 1">
<table class="offerte">
<tr>
<th class="cat" colspan="3">Quinta
</th>
</tr>
<tr>
<td class="bordo">
&nbsp;
</td>
<td>
&nbsp;
</td>
<td class="bordo">
&nbsp;
</td>
</tr>
</table>
</div>
<!-- sesta categoria -->
<div name="cat6" style="position: absolute; width: 180px; height: 120px;
top: 160px; left: 470px; background-color: #C0C0C0; z-index: 1">
<table class="offerte">
<tr>
<th class="cat" colspan="3">Sesta
</th>
</tr>
<tr>
<td class="bordo">
&nbsp;
</td>
<td>
&nbsp;
</td>
<td class="bordo">
&nbsp;
</td>
</tr>
</table>
</div>
</body>

 andrea/bergamasco
Ciao, sto approfondendo i CSS ed ho provato a usarli in un sito che ho
fatto.
Pero' usando il validatore di w3c (quello on-line) ho visto che me li
uccide... e non ho capito dove sbaglio :( il bello e' che siccome sono
sfaticato :P li ho fatti con un programmino apposito :O)
...stessa cosa quando faccio validare l'HTML... mi segna come errori molti
simboli "<" e ">"
Sapresti/e dirmi dove sbaglio?
il sito e' 
www.milanobilance.it
grazie :)
ciao
andy