immagini ombreggiate posizionate su sfondi diversi

[silvia.c]

Ciao a tutti,

ho creato un layout "sfida" che sarebbe semplice crearlo con le tabelle ma credo impossibile crearlo con un layout table-less con i CSS.

Allora, immaginiamo uno sfondo rosso e un box grigio (width=80% height=80%) all'interno del box grigio c'è un logo nell'angolo in alto a sinistra, un altro box bianco (dei contenuti) e a destra c'è un elenco di bottoni verticali verdi.

Il dramma reale dell'impaginazione è questo:
il logo e i bottoni sono ombreggiati (in photoshop) e sbordano sullo sfondo rosso.

Quindi la domandona VVoVe: è: è possibile posizionare i vari elementi in modo così preciso e così legato tra loro x fare in modo che il layout (magari fluido e centrato nella pagine orizzontalmente e verticalmente) sia proprio come me lo sono disegnato in photoshop?

E' dura è? Però ci deve essere il modo, altrimenti questi layout table less... sono tutti monocorde!!!

Chi accetta la sfida?

Ciao e grazie!!
Silvia

[simone.xml]

hai provato con i posizionamenti assoluti con pixel\percentuali?

[Mich_]

Il discorso di Silvia e` interessante.

Credo che qualcosa in tal senso sia stata fatta, ed un giro sui siti tipo constile.org e simili potrebbe dare buoni risultati.

La sfida mi interessa, ma purtroppo al momento sono preso da altri lavori e non posso impegnarmi.

Silvia, dato che hai gia` realizzato il bozzetto grafico, potresti postarlo. Dovresti trasformarlo in immagine (ad esempio catturandolo con PrtSc / Stampa) ed allegarlo ad un messaggio.

[Jerry Masslo]

concettualmente è possibile, e posizionare gli elementi in modo esatto non è un problema, problematico diventa coi layout fluidi per una traduzione non precisa che fanno da percentuale a pixel i browser.

un layout così l'avevo fatto ma posso solo mettere un screenshoot della pagina ingrandita e poi tagliata e raccordata dove si possono vedere i 4 angoli, non è online e credo non lo mettero più ormai.

si tratta di dividere la pagina in tre sezioni, quella centrale è la più semplice potendo sfruttare uno sfondo ripetuto lungo y mentre per gli angoli si deve ricorrere oltre allo sfondo a immagini (ora non ricordo se ne basta una) da posizionare in modo assoluto e mi pare che ie a sinistra la posiziona facilmente mentre a destra fa i capricci o il contrario, uno dei due) questo coi layout fluidi coi fissi è parecchio più semplice


è piuttosto laborioso ma sopratutto, imho, poco conveniente, occorre sfruttare i punti di forza di uno strumento mentre non è ragionevole cercare di fare in modo complicato ciò che era semplice con un altro, e non mi viene un esempio

inoltre, si tradisce il principio della separazione tra presentazione e contenuti, infatti, bisogna inserire nello xhtml div e immagini non di sfondo che non sono contenuto

http://cssvault.com/

per non avere rimpianti colle tabelle

[silvia.c]

Ciao Jerry,

ehm... a dire il vero mi sono imposta questa sfida pur non conoscendo molto bene come fare le strutture table-less... insomma più o meno è come se volessi fare una sacher ma non so nemmeno fare il budino!!!

Cmq a me piacerebbe fare una struttura "buona" come quella che potrebbe essere realizzata con una tabella, ossia un layout fluido, perfettamente centrato orizzontalmente e verticalmente... perchè a me questi CSS mi affascinano, ma non mi convincono tanto!

Mi sembra infatti che tarpino un po' le ali del webdesign e a dire il vero, già la mia sfida sconsigliabile da tradurre con layout table-less ne è una prova purtroppo.

Io vorrei capire un po' meglio una tua frase: "è piuttosto laborioso ma sopratutto, poco conveniente, occorre sfruttare i punti di forza di uno strumento mentre non è ragionevole cercare di fare in modo complicato ciò che era semplice con un altro, e non mi viene un esempio

inoltre, si tradisce il principio della separazione tra presentazione e contenuti, infatti, bisogna inserire nello xhtml div e immagini non di sfondo che non sono contenuto"

In pratica significa che i punti di forza di uno strumento (css) non sono fatti x realizzare un layout come quello che propongo, layout che invece era semplice con l'altro metodo (le tabelle).

E inoltre il fatto che si tradisce il principio di separazione tra presentazione e contenuti cosa significa? Che dovremo dire addio al design? Ma allora, a dispetto di tutti quelli che lo negano... i CSS uccidono la grafica?

Continuiamo questo dibattito vi prego!
(e magari anche la sfida... )

Ciao ciao!
Silvia

[Jerry Masslo]

non so da dove cominciare, ma il link che ti ho dato l'hai visto?

il mio punto di vista sulle tabelle è che sono pane per editor visuali ma a usarle per scrivere codice a mano può diventare parecchio scomodo, per me è così almeno, ma personalmente prima di scrivere codice a mano usavo un editor visuale per cui non sono passato dalla scrittura manuale di tabelle quindi non ne sento minimante la mancanza, anzi negli ultimi tempi dell'editor visuale non le usavo neanche lì, poi il programma le metteva comunque ma mi ero proprio stufato delle nove celle, e tagliare i bordi e mettere le immagini agli angoli e le altre come sfondo, al solo pensarci mi sento male, e non le facevo neanche a mano.

per quel che vuoi fare tu colle tabelle è molto semplice, a parte che a me viene l'orticaria farlo coi div è più complicato ma soprattutto non avrebbe senso usare div per fare cose complicate quando è più semplice farle colle tabelle e perdendo il motivo della preferenza accordata ai div, sarebbe come dire di preferire cibi freschi a quelli in scatola e poi cercare di riprodurre il sapore di una scatoletta magari inscatolando gli ex cibi freschi.

il senso del tabless è inteso come separazione netta tra presentazione e contenuto, nello xhtml ci va il contenuto tutto il resto va nel css, anche le tabelle possono usarsi ma non se poi usi celle per elementi che non sono contenuto

fare coi div ciò che facevi colle tabelle vuol dire usare i div al modo sbagliato come si faceva colle tabelle, è possibile ma non ha senso, è sbagliato allo stesso modo, anzi forse peggio perché hai fatto anche una fatica inutile.

separando contenuto e presentazione puoi fornire più presentazioni diverse allo stesso contenuto ad esempio o modificarle molto facilmente in tante pagine agendo solo su un file css, altrimenti ti tocca ogni volta rimettere mano pure allo xhtml ma soprattutto la presentazione mischiata al contenuto può essere d'intralcio alla sua fruizione, questa è una linea guida del w3c, il bello che vedi in un browser può essere bruttissimo in un altro dispositivo e più che inutile d'intralcio

ciò vuol dire che che senza tabelle e sopratutto senza mischiare contenuto e presentazioni non si possano realizzare pagine attraenti? vedi il link di sopra

l'immagne che ho postato l'hai vista? quella pagina è in percentuale e non c'è una tabella e potrei metterla online solo che mi sono reso conto che è concettualmente sbagliata per cui rimarrà nel mio hard disk.

[simone.xml]

che i css ammazzano la grafica non è vero...può dimostrartelo csszengarden.com

di per se non è complesso quello che vuoi fare in quanto la difficoltà con un layout fluido è meno semplice da generare anche con delle tabelle.

riguardo la scelta di layout fluidi io solitamente li sconsiglio in quanto se uno visualizza la pagina a 800x600 si vede in un modo, mentre a 1280x1024 è tutta un'altra cosa



sicuramente guardati:

constile.org per i tutorial

csszengarden.com per vedere la potenza dei css...e in caso scaricati qualche layout e vedi come si fanno

[silvia.c]

csszengarden.com mi ha dato una grande rinvigorita al morale!!!!
Quello che si può fare è fantastico, non credevo possibile raggiungere certi livelli!!!!

Grazie per avermi fatto conoscere questo sito... e chissà mai... magari prima o poi farò anche io la mia sperimentazione!!!


ciao!
Silvia

[Jerry Masslo]

rivedo le mie posizioni

allora

la cosa che mi non garba del tutto è che per fare le ombre alla maniera delle tabelle bisogna trattare coi pixel delle immagini, se ci sono pixel da qualche parte spuntano incovenienti

la seconda cosa che non mi garba è "alla maniera delle tabelle", occorrerebbe scordarsele o quasi e vedere le possibilità dei css indipendentemente da come si operava colle tabelle

la terza cosa che non mi garba è, tabelle o no, che per le ombre occorre sezionare le immagini e ne occorrono ben 8 ed è una gran seccatura ogni volta sezionare etc, poi succede che dopo aver finito si cambia idea e si ricomincia daccapo e aiutooo

in ogni caso da uno dei primi siti di un link di sopra:

http://sparkle.photobug.org/

si vedono delle ombre

la pagina però non è fluida in ogni caso dal codice si nota che:

<body>

<div class="corner-circle">
<div class="corner-circle-t">
<div class="corner-circle-b">
<div class="corner-circle-l">
<div class="corner-circle-r">
<div class="corner-circle-tl">
<div class="corner-circle-tr">
<div class="corner-circle-bl">
<div class="corner-circle-br">

<div id="container">

senza guardare il css dal nome si capisce che per quelle ombre usano i div e gli sfondi ciò cambia la questione della correttezza del codice dal punto di vista di separazione tra presentazione e contenuti, imho, quei div sono accettabili, non possono considerarsi contenuto, possono vedersi come etichette, se hai la possibilità di vedere quello che fanno, bene, sperando che i grafici sappiano il fatto loro, altrimenti bene lo stesso, non può succedere nulla di catastrofico, sono pochi tag, un po' perplesso veramente mi lascia l'annidamento, credo ci sia qualcosa di particolare ma non mi va di sbirciare il css

in ogni caso starei per finire una pagina fluida con ombre su questo tema cioè, che si può fare con div di quel tipo per delle ombre? appena finisco la linko

io uso questi:

<div class="alto"></div>
<div class="altoSinistro"></div>
<div class="altoDestro"></div>

e altrettanti alla fine della pagina, mi pare che come tema sia accettabile

paradossalmente colla pagina fluida si hanno più problemi che con una fissa con Opera quando fa lo zoom, perché la fissa la ingrandisce tutta mentre la fluida contenendo elementi in pixel e in percentuale la restringe e la soluzione risulta quindi di funzionalità limitata con quel browser

[simone.xml]

non è un reato fare le ombre con photoshop.

se vuoi fare una cosa che sia anche 'di classe' fai le immagini tutte con la stessa dimensione: facciamo conto una galleria con tanti thumbs 150x150px.

1. crei un'immagine-ombra di modo che possa essere posizionata 'sotto' la foto (sarà infatti un pò + grande...diciamo 154x154).
2. metti l'immagine dentro uno span e dai a quest'ultimo come background l'immagine-ombra con un pò di padding.

puoi vedere l'effetto su http://www.deviantart.com/ ...non male direi!
Questo è il codice xhtml che lo riguarda...ti lascio alla caccia del css

<span class="shadow">
<a href="!img-full" title="!title">
[img]!img-thumb[/img]
</a>
</span>