div a dimensione fissa ridimensionabile

[Piccy]

Siao ragassuoli.
Domandona... mi sto scervellando da tre orette buone...
Sto impaginando un sito che deve essere validato dal w3c, e deve essere WAI AAA compliant, quindi gestito da css e livelli.
Il mio problema è questo:
ho due div che si flottano, uno largo 765px e l'altro 258px. Questo da 258px dovrebbe però ridimensionarsi quando stringo il browser in modo da farmi vedere sempre quello da 765px, eventualmente anche nascondendosi dietro di esso...
Come posso fare? Spero di essermi spiegata...

[andrea.paiola]

imposta le dimensioni del div che deve ridimensionarsi in %
prova un po'... se linki una pagina o posti tutto il codice posso essere + preciso

[Mich_]

Lascia perdere la tripla-A. Non credo che sia possibile in siti "reali".
Invece punta alla AA+ (come si dira` tra un po'), cioe` che siano verificati tutti i checkpoints della AA e in piu` buona parte di quelli per la AAA.

Oppure vedi i 22 criteri della legge Stanca (04/2004).

Nota: non sto parlando dei validatori per l'accessibilita` che nei casi migliori arrivano a testare il 50% dei checkpoints, ma della validazione complessiva delle specifiche per l'accessibilita`.

[andrea.paiola]

ormai si punta più ad una accessibilità reale (con una "dichiarazione di accessibilità") che a quella W3C per via degli evidenti limiti di quest'ultima

[Piccy]

In % non va bene perchè in pratica il div in questione dovrebbe stringersi fino ad annullarsi a 800X600, e con le percentuali non accade.
Allora, se lo vedo a 1024X768, dovrei avere il mio div fisso a 765px più il div in questione largo 258px. Se lo vedo a 800X600, dovrei vedere solo il div fisso a 765px, mentre il div in questione dovrebbe stringersi fino a far vedere solo qualche millimetro.
Se lo vedo a risoluzioni più grandi di 1024X768, dovrebbe vedersi il div fisso a 765px, il div in questione a 258px e in più dovrebbe vedersi il background del body che si allunga al 100%, fino a coprire il resto dello schermo... il tutto allineato a destra.

Ti faccio uno schemino di come vorrei che uscisse...

e questo è il codice del css che sto provando a paciugare:

HTML {width:100%; background-image:url(img/bg-container.gif); background-position:top; background-repeat:repeat-x; text-align:right;}

BODY { width:100%; margin:0px -5px 0px 0px; text-align:right; font-family:Verdana, Arial, Helvetica, sans-serif; }

#container { max-width:1003px; text-align:right; right:0px; background-color:#FF0000}

#bg-header { margin:0px 0px 0px 765px; position:relative; padding:0px; height:252px; text-align:right; background-image:url(img/bg-header.gif); background-repeat:no-repeat;}

#header {z-index:10; position:relative; width:765px; height:252px; background-image:url(img/bg-headerok.gif); background-position:right top; background-repeat:no-repeat;}

[andrea.paiola]

allora prendiamo come riferimento il tuo schemino...
per impostare le dimensioni massime nei div che però devono rimanere elastici (quello giallo se non sbaglio) devi usare max-width (che in IE fa casini quindi leggi max-width in Internet Explorer )
se vuoi un allinemanento a dx devi dare float:right ai div giallo e rosso... prova un po'

[Piccy]

Grazie x avermi risposto così in fretta!
Sto provando a afre quellon che ki hai detto... con il float adesso sono a posto. L'unica cosa che ancora non va è il div a 258px che non si stringe...
Il mio codice modificato è questo:
(#bg-header = div a 258px
#header = div fisso a 765px)

#bg-header {float:right; max-width:258px; width:expression(document.body.clientWidth > 258? "258px": "auto" ); height:252px; text-align:right; background-image:url(img/bg-header.gif); background-repeat:no-repeat;}

#header {float:right; width:765px; height:252px; background-image:url(img/bg-headerok.gif); background-position:right top; background-repeat:no-repeat;}

Dove sbaglio?

[Piccy]

O.o... firefox, opera e netscape non me lo vedono più così il mio div in questione a 258px...

[Piccy]

Correzione: adesso l'ho modificato così xè mi sono accorta che avevo sbagliato le misure nell'expression... però non funziona neancora...

#bg-header {float:right; max-width:238px; width:expression(document.body.clientWidth > 1003? "238px": "auto" ); height:252px; text-align:right; background-image:url(img/bg-header.gif); background-repeat:no-repeat;}

#header {float:right; width:765px; height:252px; background-image:url(img/bg-headerok.gif); background-position:right top; background-repeat:no-repeat;}

In explorer se stringo il div a 258 (che adesso è diventato a 238px) sparisce di botto invece che ridimensionarsi. Negli altri browser non si vede proprio...

[Piccy]

Vi preeegooo!!! Aiutateeemiii!!!