[Xhtml]Allineamento difficile

[cerba]

http://www.regalidicuore.it/merinos/..._ventaglio.php
qua ho provato delle pg e se voi aprite con ie6 non avete problemi, però se cambiate browser o solo versione di ie, vi sballa tutto...
domanda 1:
ho inserito 3 box principali in cui ho inserito rispettivamente
la testata, il corpo, e il fondo...risultato: il fondo mi torna su, invece di vedersi in fondo appunto, si visualizza al top ( solo con browser che non sono ie6)
domanda 2 :
la parte centrale, anch'essa viene sballata e sbattuta in fondo stavolta......( sempre con browser non ie6 )
chi mi aiuta?
thanks
Max

[Shores]

La soluzione è semplice:

1) non usare box dentro box, o perlomeno le informazioni di posizionamento devono essere riferite al box più esterno (esempio tra la div box e la div linksopra è alla div box che devi assegnare il posizionamento)

2)ricorda che le box che posizioni sono sempre posizionate con riferimento alla prima div progenitrice che è posizionata almeno relative, e che non è uguale non specificare position...

3)non usi da nessuna parte la clausola clear del CSS, che serve a dire che la div deve stare sotto a qualsiasi div che sia float...

Ciao!

[cerba]

ho trovato 1 persona k mi da 1 mano!
thank ypu very match...
dovrei chiederti 1 cosa:
l'attributo clear devo metterlo al box che sta sotto o a quello che ha il float( che dovrebbe stare sopra)?
eppoi come si scrive?
#boxsotto {align:clear } ?????

grazie ancora...
MAx

[Shores]

L'attributo clear devi metterlo al box che sta sotto; si scrive clear:right o left o both, per indicare che deve stare sotto a chi ha float left right o entrambi.

Ciao!

[cerba]

funziona: mi ha messo giù il box.....grande!!!
ora però il box centrale, quello con l'immagine, me lo fa vedere ancora giù..e ho il problema opposto..senza che guardi le pg...ti mando il css...se hai 1 secondo, mi dici cosa nn va?
ah, quelli non box li ho fatti diventare div semplici come mi hai detto..

html { height: 100%;}

body { background-color: #0099ff; text-align: center; margin-top:15px; padding: 0px;
height: 100%; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;}

#box { background-image:url(sopra.gif);height:50px;text-align: left;width: 768px;margin-top: 0px;margin: auto; }

#box2 { background-color: #99ccff; text-align: left; width: 768px; margin-top: 0px;
margin-right: auto; margin-bottom: 0px; margin-left: auto; }

.sinistra {background-color: #99ccff; float: left;width: 126px;margin: 0px; }

.centro {background-color:white;padding-right:10px;
float: left; width: 485px; margin: 0px;}

.centrosx {width: 125px; ;font-family:verdana; font-size:11px;color:gray;padding-left:3px}

.centrodx {float:right;width: 300px;padding-right:5px;padding-left:5px}

.destra {background-color: #99ccff; text-align:right;float:right;width: 126px;
height: 100%;font-family:verdana;font-size:10px;color:white;padding-right:3px}


#sotto {background-image:url(sotto.gif);clear:both;width: 768px;height:50px}


l'html è semplice:
<div id="box"></div>
<div id="box2"></div>
<div class="sinistra"></div><div class="centro"><div class="centrosx"></div><div class="centrodx"></div>
</div><div class="destra"></div>
grazie mille

[Shores]

Secondo me devi aggiungere un float:left; in centrosx...

Che dici, va a posto così?

[cerba]

per ho tolto il #centro e così va a posto...ricapitolando:
ho un box centrale chiamato box2 ,a sx e dx ci sono i 2 box ( colonne classiche di portale) e in mezzo c'è un box che si divide in 2 , da una parte la foto dell'oggetto(centrodx) e dall'altra la descrizione(centrosx).
Problema: il centrosx dovrebbe essere un box lungo meno del box parente, quindi dovrebbe prendere lo sfondo di questi, cosa che invece non fa.
domanda:
senza che ti scardino i maroni ancora 150 volte, potresti farmi vedere un codice di un box con 4 box verticali dentro che così copio in qualche maniera?
thanks
Max

[Mutato]

Ciao Cerba, in un caso come il tuo ho ottenuto buoni risultati utilizzando tre colonne #sx #centro #dx affiancate con float:left, e poi creando altri 2 box dentro #centro, sempre affiancandoli con float:left.

Purtroppo qui ho solo il codice di questi due...

#centro .boxcols {
padding: 0px 0px 0px 0px;
margin-top:20px;
float:left;
width: 46%;
}

#centro .boxcols1 {
padding: 0px 0px 0px 0px;
margin-top:20px;
margin-left:10px;
float:left;
width: 50%;
}


Nell'html

<div id="centro">

<div class="boxcols">Sta a sinistra</div>
<div class="boxcols1">Sta a destra</div>
<br style="clear:both" />
<div class="boxcols">Sta a sinistra</div>
<div class="boxcols1">Sta a destra</div>
</div>

Come vedi, ho dovuto utilizzare un piccolo trucco... cioe' impostare width inferiore a 100% (50+46) perche' IE da' problemi con width totale al 100%.

Se capisco meglio cosa vuoi fare posso postare altro codice...

[Shores]

Hmm, qui mi sa che non ci capiamo:

float serve a fare galleggiare su un lato la div a cui viene applicata: se fai galleggiare a dx la parte della colonna centrale che contiene l'immagine, il resto gli girerà intorno automaticamente.

Esempio:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
	<head>
	</head>
	<body>
		<div style="position:relative;margin-left:auto;margin-right:auto;width:606px; border:1px red solid;">
			<div style="float:left; width:100px;height:100%; border:1px yellow solid;">
				Colonna esterna sx
			</div>
			<div style="float:left;width:400px;height:100%; border:1px yellow solid;">
				<div style="float:right;width:200px; border:1px yellow solid;">
					qui ci metti l'immagine
				</div>
				Questo testo a sx dell'immagine
				<br style="clear:right;">
				Questo testo sotto l'immagine
			</div>
			<div style="float:left; width:100px;height:100%; border:1px yellow solid;">
				Colonna esterna dx
			</div>
		</div>
	</body>
</html>

Così può andare?

[cerba]

funziona...ho riscritto la pg dall'inizio k cominciava a darmi sui nervi...
ora funzia però gli sfondi del box me li prende fin dove c'è testo..
il pezzettino k rimane prende lo sfondo del body, ma io nn gli ho detto così!
Eppoi come si da l'attributo al testo che lo spinge in basso al box?
ho provato con text-valign:bottom ma nn va..forse è un altra.
Scusatemi per la rottura ma in questo forum ci siete solo voi...
thanks
allego foto per chiarezza, ci sono 4 colonne e ognuna dovrebbe avere uno sfondo fino alla fine ..mah!!!!!