variator nel layout - come trattarli?

[marruz]

qual è il modo migliore di trattare quegli elementi che sfuggono alle regole di composizione del layout della pagina?

guardate il file allegato. ovviamente è una fuffa che serve solo a esemplificare la situazione.

Fuffa ma ammettiamo che il box che compare sulla colonna dx debba avere quelle caratteristiche. Deve uscire dalla colonna, avere uno sfondo sfumato, avere gli angolo arrotondati, avere un'ombra.

qual è la procedura migliore (ovviamente parlo di xhtml e css senza tabelle) per realizzare una cosa simile?

[marruz]

l'allegato non viene allegato? riprovo

[Mich_]

Chiaramente per una cosa cosi` devi usare una larghezza fissa, per lo meno la colonna di destra (non so se si puo` fare tramite %).

La colonna di destra sara` 5 px piu` larga dello sfondo (suppongo che la sporgenza sia 5 px).
La colonna di sin. avra` una fascia blu in alto, la col dx avra` uno sfondo nel pezzo in alto.
Lo sfondo del pezzo alto deve essere un'immagine che si ripete in vert, e che lascia gli ultimi 5 px bianchi.
Lo sfondo del pezzo principale destro sara` anche un'immaigne che si rpete vert. con 5 px bianchi.
Il riquadro con angoli arrotondati sara` allineato a dx.
L'arrotondamento lo farei con i nifty corner (vedi A.Fulciniti).

Credo che le cose fondamentali le ho scritte.

[thomas_anderson]

io non userei il nifty corner, che è da intendersi come ottimo test grafico e presentazionale. questo test, con i suoi elementi [b] annidati genera codice ridondante che letto da uno screen-reader risulterebbe oltremodo noioso all'ascolto. meglio usare una qualunque tecnica con le immagini.

.rtop,.artop{display:block}
.rtop *,.artop *{display:block;height:1px;overflow:hidden;font-size:1px}
.artop *{border-style: solid;border-width:0 1px}
.r1,.rl1,.re1,.rel1{margin-left:5px}
.r1,.rr1,.re1,.rer1{margin-right:5px}
.r2,.rl2,.re2,.rel2,.ra1,.ral1{margin-left:3px}
.r2,.rr2,.re2,.rer2,.ra1,.rar1{margin-right:3px}
.r3,.rl3,.re3,.rel3,.ra2,.ral2,.rs1,.rsl1,.res1,.resl1{margin-left:2px}
.r3,.rr3,.re3,.rer3,.ra2,.rar2,.rs1,.rsr1,.res1,.resr1{margin-right:2px}
.r4,.rl4,.rs2,.rsl2,.re4,.rel4,.ra3,.ral3,.ras1,.rasl1,.res2,.resl2{margin-left:1px}
.r4,.rr4,.rs2,.rsr2,.re4,.rer4,.ra3,.rar3,.ras1,.rasr1,.res2,.resr2{margin-right:1px}
.rx1,.rxl1{border-left-width:5px}
.rx1,.rxr1{border-right-width:5px}
.rx2,.rxl2{border-left-width:3px}
.rx2,.rxr2{border-right-width:3px}
.re2,.rel2,.ra1,.ral1,.rx3,.rxl3,.rxs1,.rxsl1{border-left-width:2px}
.re2,.rer2,.ra1,.rar1,.rx3,.rxr3,.rxs1,.rxsr1{border-right-width:2px}
.rxl1,.rxl2,.rxl3,.rxl4,.rxsl1,.rxsl2,.ral1,.ral2,.ral3,.ral4,.rasl1,.rasl2{border-right-width:0}
.rxr1,.rxr2,.rxr3,.rxr4,.rxsr1,.rxsr2,.rar1,.rar2,.rar3,.rar4,.rasr1,.rasr2{border-left-width:0}
.r4,.rl4,.rr4,.re4,.rel4,.rer4,.ra4,.rar4,.ral4,.rx4,.rxl4,.rxr4{height:2px}
.rer1,.rel1,.re1,.res1,.resl1,.resr1{border-width:1px 0 0;height:0px !important;height /**/:1px}

[marruz]

intanto grazie a entrambi.

preciso meglio che il mio dubbio riguarda il posizionamento del "F... box" rispetto alla colonna di destra.

la cosa che diceva Mich Underscore mi piace assai. è semplice e furba.



mi sa che più di così non posso pretendere, ma se qualcuno ha altri suggerimenti...