[crossbrowser] posizionamento div differenti

[Immaginando]

Mich_ sei stato esaurientissimo!

ma anche x IE7 vale ancora il discorso del quirks mode?!

[Mich_]

Originariamente inviato da Immaginando
ma anche x IE7 vale ancora il discorso del quirks mode?!

Non ricordo. E comunque e` sicuramente diverso da IE6.

Diciamocelo: e` ora di passare a XHTML 1.0 Strict, dove i problemi sono molto minori (salvo IE5.5)

[Immaginando]

Originariamente inviato da Mich_

Diciamocelo: e` ora di passare a XHTML 1.0 Strict, dove i problemi sono molto minori (salvo IE5.5)

sto proprio usando xhtml con dtd strict!

[Another-Life]

Non si capisce molto la struttura a markup completa che stai utilizzando semplicemente dal disegnino che hai postato su...

[Immaginando]

Ops!
piccolo particolare: x qs layout ho usato il prologo xml ... quindi IE mi "parte" in quirks mode.

In altri post qui in giro sul forum si parla spesso del fatto che sia meglio ometterlo.
Ora se io lo faccio (ovviamente) con IE6 vedo il mio layout stravolto VVoVe:

E poi il w3c lo raccomanda... quindi qui nasce il mio dilemma...ci vuole o non ci vuole ?!



@Another-Life:
andavo di fretta xcui non sono stata a spiegare perfettamente... ci riprovo...
ho un box contenitore al 100%, che contiene 3 box;
quello centrale (liquido) e'ulteriormente suddiviso in 4 bottoni, mentre gli altri 2 hanno misure fisse xche' contengono delle img.
Il mio problema e' che nei browser standard compliant i bottoni non occupano tutta la parte centrale.

[Mich_]

E poi il w3c lo raccomanda... quindi qui nasce il mio dilemma...ci vuole o non ci vuole ?!

Il W3C lo raccomanda, ma la Microsoft lo snobba. Grosso dilemma: seguire le direttive o fare un sito che si veda bene nel browser usato da almeno la meta` dei visitatori?

Comunque il W3C lo raccomanda, ma non lo obbliga; Il prologo e` invece obbligatorio per XHTML 1.1 e 2.0.

Chiaramente se fai il sito XHTML Strict per IE6 senza il prologo, vanno modificati/aliminati eventuali hack (che comunque andrebbero spostati dentro i commenti condizionali).
Per l'esperienza comune del forum, se usi XHTML Strict IE6 si comporta secondo gli standard al 90% (c'e` ancora qualcosa non conforme): in particolare il box model e` quello del W3C.

Ora se io lo faccio (ovviamente) con IE6 vedo il mio layout stravolto

Dovresti vederlo come con FF, se quanto ho scritto or-ora e` vero (ma aspetto conferma - io lavoro con linux e non posso installare IE).

----
Comunque tutto cio` non risolve il tuo problema.

Ripartiamo dalla tua ultima frase:

Box contenitore al 100%, che contiene 3 box;
quello centrale (liquido) e'ulteriormente suddiviso in 4 bottoni, mentre gli altri 2 hanno misure fisse xche' contengono delle img.
Il mio problema e' che nei browser standard compliant i bottoni non occupano tutta la parte centrale.

Per semplificare la discussione, concentriamoci unicamente sui browser standard: eventuali problemi con IE li vedremo alla fine.

Per come la vedo io, il box centrale occupa gia` tutto lo spazio senza dare position e senza specificare width (con il solo float). Pero` occorre vedere come si comportano i quattro "bottoni", che devono essere larghi 50%, quando non e` specificata la larghezza del contenitore.

Visto che le immagini laterali hanno una larghezza definita in px, puoi anche procedere ad un tentativo diverso:
Non dare float al centrale (ma neppure position), e dagli invece margini laterali in px, pari alla larghezza delle due immagini.
Altro problema: due blocchi di 50% ciascuno potrebbero (con gli arrotondamenti) sforare il 100%: prova a dare larghezza 49%, modificando magari fino al 49.9%; se questa soluzione ti piace, potresti mascherare i pixel rimanenti con opportuni colori di sfondo che si confondano con i blocchi vicini.

Alla fine ti pregherei di ri-postare il CSS, perche` lo hai postato all'inizio, ma poi mi sono perso nelle varie modifiche. Oppure (meglio), fai una pagina di prova (molto scarna ma con gli sfondi colorati) e posta il link, cosi` che lo possiamo vedere tutti.

[Another-Life]

Mi sa che ti stai complicando la vita piu del dovuto....come mai hai assegnato delle dimensioni in % al box contenitore?

[Immaginando]

Ok Mich_
ho provato a fare come mi dicevi (tolto width e position al centrale e dato il margin pari alla larghezza dei box immagine)... ed effettivamente e' quello che volevo!

Pero' adesso quando restringo la finestra mi spariscono i primi 2 bottoni
(ho aggiunto il min-width)

Mentre con IE e' na' schifezza!
anche se quando ho provato a togliere il prologo xml il tutto si avvicina al sogno dei miei desideri!


@Another-Life: ho usato misure in % xche' vorrei che il box si adattasse a qualsiasi dimensione della finestra.


sorry!
ma ho problemi con l'ftp stamattina... non riesco a farvi vedere la pagina!
x ora posto il codice

css:

body {
background-color: #666666;
margin: 0px;
color: #ffffff;
}
#contenitore {
width: 100%;
margin: 10px;
}

/* inizio macroaree */
#boxMacroaree {
background-color: #FFFFFF;
width: 100%;
border: 1px solid #FFFFFF;
z-index: 27;
height: 161px;
text-align: center;
background-image: url('images/sfondo_x_macroaree.gif');
}

#boxMacroaree .boxSx{
width: 234px;
float: left;
height: 161px;

}
#boxMacroaree .boxDx{
width: 234px;
float: right;
height: 161px;
}
#boxMacroaree .centrale{
background-color: #ffffff;
text-align: center;
margin-right: 234px;
margin-left: 234px;;
}

#boxMacroaree .centrale ul{
margin: 0px;
display: inline;
}
#boxMacroaree .centrale li{
list-style-type: none;
display: inline;
margin: 0px;
}

#boxMacroaree .centrale a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
color: #333333;
text-decoration: none;
width: 50%;
min-width: 100px;
height: 50px !important;
height: 80px;
text-align: center;
padding: 30px 0 0 0;
margin: 0;
border: 0;
}

#boxMacroaree .centrale a:hover{
text-decoration: underline;
background-color: #666666;
color: #ffffff;
}
#boxMacroaree .centrale a.btnA{
background-color: #fffa96; /* juicy studio OK */
float: left;
color: #333333;

}
#boxMacroaree .centrale a.btnB{
background-color: #ffccd5; /* juicy studio OK */
float: right;
color: #333333;
}
#boxMacroaree .centrale a.btnC{
background-color: #cbdfe4; /* juicy studio OK */
float: left;
color: #333333;
}
#boxMacroaree .centrale a.btnD{
background-color: #e3f9bd; /* juicy studio OK */
float: right;
color: #333333;
}

...et voila' il codice xhtml!

<body>
<div id="contenitore">
<div id="boxMacroaree">
<div class="boxSx">[img]boxSx.gif[/img]</div>
<div class="boxDx">[img]boxDx.gif[/img]</div>

<div class="centrale">
<ul>
[*]btnA [*]btnB[*]btnC[*]btnD[/list]
</div>
</div>
</div>
</body>

scusate l'incasinamento...

[Mich_]

Trovato il primo errore:
devi definire width:100% anche nel body e nel html, altrimenti il 100% del #contenitore non ha significato.

E una cosa che non capisco:
ci metti il text-align: center come il prezzemolo; non ha effetto nei browser standard, ma porta scompiglio in IE (quirks); prova a toglierli tutti.

Altro argomento da discutere.
Hai inserito i "bottoni" (che sono dei[*]) in un unico <ul>. Lo so che e` semanticamente corretto, ma ho l'impressione che non piaccia molto a qualche browser.
Proporrei di fare alcune prove inserendo semplicemente 4 <div>. Si tratta di strutture piu` semplici, probabilmente piu` accettate. Poi quando funzionera` il tutto, provi a reinserire la lista. E` solo una semplificazione per le prove, ma prima di rompersi la testa, penso che sia il caso di provare anche questa.

E comunque l'ul, dentro il <div> non deve avere il float. Invece i[*] devono avere larghezza 49-50% e avere il float (e invece non possono avere il display: inline, altrimenti non potrebbero piu` contenere i bottoni)

[Immaginando]

oh grazie Mich_ delle dritte! e soprattutto scusa se ti rompo le scatole!

Originariamente inviato da Mich_
E una cosa che non capisco:
ci metti il text-align: center come il prezzemolo;

carina questa!
effettivamente non so mi sa che provando un po' di cose o cominciato a scrivere a casaccio!

Altro argomento da discutere.
Hai inserito i "bottoni" (che sono dei[*]) in un unico <ul>. Lo so che e` semanticamente corretto, ma ho l'impressione che non piaccia molto a qualche browser.

era proprio che volevo fare una cosa giusta!
all'inizio ero indecisa perche' nn ero sicura che fosse corretto... poi leggendo in giro e provando su browser testuali ho visto che effettivamente trattandosi di menu, si capivano meglio...
x qs volevo tenerli...

E comunque l'ul, dentro il <div> non deve avere il float. Invece i[*] devono avere larghezza 49-50% e avere il float (e invece non possono avere il display: inline, altrimenti non potrebbero piu` contenere i bottoni)

ma come faccio a dare un float ai[*]
se sono affiancati?


scusa ancora...