problema riquadri usando css

Printable View

23-11-2003, 14.22.32

Ho un problema con la costruzione delle pagine senza uso delle tabelle e quindi solo con i css ... Infatti la pagina viene visualizzata perfettamente da ie, mentre opera ed netscape la visualizzano incasinata. Credo che dipenda dal fatto che ho inserito i tag <div> uno dentro l'altro.

per esempio se provate a fare due file ... il css con questi stili:

.box_area{width:760px; border:1px solid #CC0000;}
.box_area_sx{width:150px; float:left; background-color:#FFCCCC;}
.box_area_x{width:458px; float:left; background-color:#FFFFFF;}
.box_area_dx{width:150px; float:left; background-color:#FFCCCC;}

... ed il file htm con questo contenuto:

<body>
<div class="box_area">
<div class="box_area_sx">ciao</div>
<div class="box_area_x">ciao</div>
<div class="box_area_dx">ciao</div>
</div>
</body>

con ie ve lo visualizza perfettamente ... e cioè le tre senzioni sx,x,dx sono dentro nel riquadro bordato, mentre con netscape ed opera le tre sezioni sono visualizzate fuori.
Di conseguenza l'effetto in una pagina in cui si ripete la situazione di un riquadro dentro un'altro riquadro la pagina presenta pezzi sparpagliati ovunque.
Dov'è il problema? Devo usare un tag diverso per il riquadro esterno? Devo aggiungere qualcosa nei fogli di stile? Ditemi un po' ... L'uso dei fogli di stile al posto delle tabelle è molto utile ... ma vorrei una pagina compatibile con tutti i browser.
grazie!
23-11-2003, 15.49.55

Non é un problema del foglio, ma un bug dei browser.

In pratica tutti i browser, a parte IE, visualizzano corretamente i box solo se hanno del testo dentro.

Per risolvere, al posto di fare un box solo per il bordo, potresti impostare il bordo per ogni box interno.
23-11-2003, 20.36.59

ok immaginavo che fosse una cosa del genere ... Cavolo ... mi tocca risistemare tutto!! :shock:
23-11-2003, 21.21.25

però spiegami una cosa ... come faccio a mettere quei box da 760 complessivi centrati nella pagina se non posso usare un <div align=center> che li contenga?
Ho provato ad associare al <body> uno stile che preveda text-align: center; ... ma non funziona ... hai qualcosa da suggerire?
24-11-2003, 00.57.53

gve diceva di mettere un text-align: center nel browser più esterno ed un margin: auto in quelli più interni.

Però dai test fatti non si ottiene nulla :|
24-11-2003, 08.16.17

già ... l'unico modo col il quale riesco ad accentrare il tutto è usare una tabella esterna ... Ma a quel punto non ha senso dato che mi sto sbattendo per non usare le tab. Quindi mi aspettavo che voi esperti dei fogli di stile aveste già la soluzione :roll:
24-11-2003, 11.41.52

Prove a prendere spunto da qui:
http://www.constile.org/template/centrare_il_box/
24-11-2003, 12.31.26
gve

Citazione:

Originalmente inviato da numerone

gve diceva di mettere un text-align: center nel browser più esterno ed un margin: auto in quelli più interni.

Però dai test fatti non si ottiene nulla :|

Non funge?
Ma io in una mia pagina lo uso per sistemare un form, e mi funge (faccio i test con IE6, Firebird e Opera7), e anche nella mia home uso qualcosa del genere (anche se un po' diverso perchè lì ho le tabelle), funziona tutto :!:

Forse lo avevo postato con qualche errore, ora non ricordo quale era il post, comunque ecco come lo uso nel mio guestbook, vi riporto la parte del css interessata (il risultato lo vedete qui: http://gve.altervista.org/ospiti/index.php?act=scrivi , è il form centrato per inserire i commenti l'elemento interessato):

[code:1:291dead74c]body {
background-color: #666666 ;
text-align: center ;
color: #000000 ;
font-family: sans-serif }

.form {
border: none ;
margin: 1em auto ;
padding: 0 ;
width: 27em ;
text-align: left ;
font-family: monospace ;
background-color: #00bcac ;
font-size: 1em }

form {
font-family: monospace ;
font-size: 1em ;
margin: 0 ;
padding: 1em }[/code:1:291dead74c]

.form è il div esterno, mentre in questo caso il div interno è un campo form (ma è la stessa cosa, ho verificato perchè all'inizio credevo di dover usare anche un div, mentre poi ho visto che il form era sufficiente).

Per centrare, ho semplicemente impostato per body text-align=center.
24-11-2003, 12.40.09
gve

Nel tuo caso prova così, secondo me dovrebbe funzionare:
[code:1:1bbff66206]body{text-align:center;}
.box_area{width:760px; border:1px solid #CC0000;padding:0;margin:auto;}

.box_area_sx , .box_area_dx {width:150px; float:left; background-color:#FFCCCC;padding:0;margin:0;&#125 ;
.box_area_x{width:458px; float:left; background-color:#FFFFFF;padding:0;margin:0;&#125 ;[/code:1:1bbff66206]

omettendo margin:auto al box esterno non funziona su tutti i browser, anche se ora non ricordo su quali va e su quali no.
24-11-2003, 18.27.11

Il metodo di gve funziona con Opera ma, per esempio, non funziona con Netscape ... Ed io non ho una versione preistorica di netscape (la 7.0).

provate a vedere l'effetto (magari con qualche altro browser) su questa pagina: http://www.richialbum.altervista.org/prova.htm

E' un bel problema questo ... Per fare un nome ...
sugandbibi, del quale ho seguito il consiglio rivedendo la struttuta delle mie pagine, sa come risolvere il problema???? Ok io sono ben felice di usare una tecnica migliore abbandonando le obsolete tabelle, ma se devo ammattire per creare una pagina compatibile per tutti i browser ...
24-11-2003, 19.33.14
gve

Mi dici che non funge con Netscape? :(
In effetti non ho mai provato, ho sempre pensato (perchè avevo letto da qualche parte che usavano lo stesso motore) che funzionassa come Mozilla nelle ultime versioni, quindi ho considerato mi bastasse testarlo con quello ... provvederò subito a verificare con Netscape il mi sito (uff, un'altro browser da tenere in considerazione ...)
24-11-2003, 21.05.12
gve

Ma fammi capire:
io ho installato Netscape 7.1 (che è quello che si trova adesso) e la tua pagina di esempio la vedo "giusta", come con Firebird. Mi spiego meglio: il mio metodo funge, solo che con firebird e Netscape per qualche ragione (ma il problema potrebbe essere non legato direttamente al metodo di centramento e dimensionamento dei div) non vengono visualizzati i bordi laterali e inferiore.
Mi avevi fatto preoccupare più del necessario, e mi hai fatto scaricare e installare Netscape per niente :(

Va be', la ho messa giù un po' dura, in effetti ho l'ADSL per cui non è stato un grosso problema. Però cerca di specificare meglio un'altra volta il problema.
25-11-2003, 01.22.41
gve

Sono buono, eccoti la soluzione :wink: : il problema è float
Ho trovato infatti sul manuale del css che le finestre flottanti normalemte possono uscire dal containing block, e netscape/mozilla rispetta alla lettera tale direttiva: non genera un containing box più grande del necessario; la cosa non si nota se non ci sono di mezo i bordi, ma se ci sono ...

Soluzione:
.box_area{width:760px; border:1px solid #CC0000;padding:0;margin:auto;overflow:auto;}
:D
25-11-2003, 10.40.25

grazie mille gve!
in effetti avevo dato per scontato questa mia frase del mio primo mex ...

Citazione:

Originalmente inviato da richialbum

con ie ve lo visualizza perfettamente ... e cioè le tre senzioni sx,x,dx sono dentro nel riquadro bordato, mentre con netscape ed opera le tre sezioni sono visualizzate fuori.

... proprio perchè il problema era quello dei box interni fuori dai bordi di quello esterno (poi si è aggiunto anche il problema dell'accentramento).
Sarò più chiaro in tutti i miei mex in futuro (senza dare per scontate certe cose) ... comunque grazie ! dato che ci hai risolto sia l'accentramento sia il problema netscape.

... e poi vedila così ... adesso hai un quarto browser su cui fare i test :lol:
byee
25-11-2003, 11.25.46
gve

Don't worry, non me la sono presa.
Anche se nel messaggio precedente la ho messa giù un po' dura.

Citazione:

Originalmente inviato da richialbum

... e poi vedila così ... adesso hai un quarto browser su cui fare i test :lol:

Eh già, mi mancava; del resto esiste anceh il detto: non c'è due senza tre ... ed il quarto vien da sè :?

See you soon.