[fabio.gaigher]

Buonasera a tutti.
Sono nuovo del forum e felicissimo di aver incrociato questo sito meraviglioso.

Mi presento e vengo subito al dunque:
mi chiamo Fabio Gaigher, sono un fotografo still life e un grafico di prestampa, mestiere in via d'estinzione da quando la carta quasi non si usa più. Questo per dire che il web non è esattamente il mio ambiente naturale, io mi intendo più di pellicole e cataloghi.

Ma facciamola breve: pare che alla mia età io sia vecchio per il mercato (30 anni, da non credere), quindi mi sono messo in proprio in tutti i sensi, anche con la costruzione dei miei sitarelli. E qui viene il bello. Ho approfittato di un morbillo tardivo per studiare il css (meglio tardi che mai) e mettere su un sito per la presentazione della mia professione grafica, che deve restare assolutamente distinta dall'altra, ho letto i Vostri preziosi consigli e sono giunto a questo punto:

http://www.gaigher.it/creativesolutions

Sostanzialmente ho 3/4 problemi che non riesco a risolvere:

1. ho messo su una struttura a tre colonne, la centrale fissa e le laterali, con un background che dovrebbe ancorarsi verso l'interno della pagina, che servirebbero da riempimento per un monitor fino a 1680. Ecco, questa cosa non riesco a farla.

2. sulla sinistra del menu c'è una porzione di background che corrisponde a un div. Con lo stessa tecnica che ho utilizzato per i pulsanti rollover, ovvero un'unica immagine con tre stati, vorrei che allo scorrimento del mouse su un singolo link del menu, possa corrispondere una diversa porzione di quel background che contiene alcune decorazioni. Credo si chiami rollover disgiunto, concettualmente dovrebbe funzionare come questo http://www.extrowebsite.com/lab/articoli-css/galleria-fotografica/roll_img.htm, ma non sono riuscito a riadattare il codice alle mie esigenze.

3. Lo stato di hover funziona, active pure. Non riesco a capire come posso attivare la funzione CURRENT, per evidenziare la pagina che sto visitando.

4. Ultima cosa, giuro! Questa potrei anche risolverla a mano, ma era giusto per togliermi lo sfizio di capire bene: sotto al menu, una porzione div a cavallo tra il celeste e il rosa darà un dettaglio grafico della pagina che sto visitando. Potrei posizionarla semplicemente in html sulle singole pagine. Ma come fare con i css se quella porzione contiene al suo interno tutti gli stati per ogni pagina?

vi allego un link in fondo con lo zip dei codici, spero di non avervi annoiato, e spero possiate essermi d'aiuto.

Vi ringrazio anticipatamente!

Fabio

http://www.gaigher.it/downloads/fabiogaigher-c-s.zip

P.s.: il layout è stato disegnato con photoshop, il resto affidato a dreamweaver. il sito http://www.gaigher.it invece può ingannare, ma è opera di artisteer, e c'è di mezzo wordpress, altra croce altra delizia, altra storia.
P.p.s.: ho cambiato il titolo al post perché non era consono al regolamento del forum. Pardon.

[nando]

Ciao Fabio e benvenuto su YIW! Se tu a trent'anni sei vecchio per il mercato io allora sono da buttare via =) L'età e il tempo sono concetti molto relativi.

Vediamo di analizzare i tuoi problemi:

1. ho messo su una struttura a tre colonne, la centrale fissa e le laterali, con un background che dovrebbe ancorarsi verso l'interno della pagina, che servirebbero da riempimento per un monitor fino a 1680. Ecco, questa cosa non riesco a farla.

Dando un rapido sguardo al markup utilizzato presumo che sia stato generato automaticamente da qualche editor visuale. Il problema è proprio di fondo, il posizionamento delle immagini è fatto quasi tutto in modo "assoluto" (position:absolute) quando invece questo non è necessario, soprattutto se vuoi rendere il tuo sito compatibile con più risoluzioni video. L'immagine di sfondo è suddivisa in tre parti, per ottenere ciò che desideri dovresti renderla unica, assegnarla al body come background e posizionarla al centro dello schermo e automaticamente si riadatterà a tutte le risoluzioni video.

Sintassi: css [ Scarica ] [ Nascondi ]

Sintassi: css [ Scarica ] [ Mostra ]

1. body {background:url('url/tua_immagine.png') top center no-repeat;}

Per quanto riguarda il punto due esistono diversi tutorial che descrivono facilmente come ottenere il risultato, ne dovresti trovare qualcuno anche su html.it, al momento sono di corso e non ho il tempo di passarti direttamente i link.

3. Lo stato di hover funziona, active pure. Non riesco a capire come posso attivare la funzione CURRENT, per evidenziare la pagina che sto visitando.

Per il current ti basta aggiungere una classe alla pagina corrente e formattarla come desideri.

es.

Sintassi: html [ Scarica ] [ Nascondi ]

Sintassi: html [ Scarica ] [ Mostra ]

1. <a href="#" title=" " class="current">about</a>

e successivamente nel css crei una regola per a.current sulla base delle tue esigenze.

Per Il punto quattro invece non ho ben capito cosa intendi. Se provi a rispiegare magari vedo se riesco a darti una mano.

A presto Fabio e buon lavoro.

[fabio.gaigher]

Ciao Nando, grazie mille per aver risposto.
In effetti il codice di partenza è stato generato da photoshop esportando in css e immagini. Poi ho cercato di reinterpretare il css studicchiando qualche funzione proprio da html.it e altre fonti nel web. Ho la fortuna di ricordare dalla scuola qualche nozione di C++, riesco a mettere qualche toppa qua e là, ma non posso definirmi di certo un buon sarto.

Dovrei studiare in effetti da pagina 1, purtroppo non è aria.

Per chiarire meglio quei punti dovrei farti delle simulazioni su photoshop. Può sembrare una scusa banale, ma ho delle cose sui fornelli, cercherò di postare tutto nel pomeriggio.

Grazie mille, a dopo!

[fabio.gaigher]

Ok, non vorrei che sembrasse che io sia uno che vi fa perdere tempo. Ho deciso, Nando, di fare di testa mia, anzi di testa tua. Ho preso la tua guida dalla "A alla Z." sfogliandola più o meno da pagina uno. Il capitolo 8 in particolare e i seguenti fanno al caso mio. Quindi ho deciso di seguire le tue lezioni riscrivendo da solo il codice, senza sfruttare il CSS autogenerato da photoshop. Cercherò di andare avanti il più possibile, mi riaffaccerò al primo intoppo.
Ho sicuramente fatto il passo più lungo della gamba, la propedeuticità e la pratica sono fasi importantissime. Grazie di tutto, ti mostrerò a breve i miei progressi!

Buon lavoro!

[nando]

Ciao Fabio, quanto hai scritto dimostra che sei una persona che vuole fare sul serio e con tanta voglia di accrescere il proprio bagaglio di esperienze. Riscrivere da zero tutto ti tornerà molto utile, apprezzo e condivido pienamente la tua scelta.

"Larghi sono i cancelli e comode le strade che conducono alla tentazione..." diceva John Milton ne Il "Paradiso Perduto"... non sempre la strada più comoda e semplice è quella corretta da seguire per raggiungere determinati traguardi, ci sono percorsi molto più articolati e scoscesi cui il solo percorrerli è già di per se una vittoria personale. Adesso conto di vedere i tuoi progressi, non lasciarti prendere dalla fretta.

Un grosso in bocca al lupo e per qualsiasi dubbio torna pure, troverai sempre qualcuno disposto ad iutarti, questo è lo scopo principale del forum.

[fabio.gaigher]

Caro Nando. Dopo mille difficoltà, una settimana di interruzione per lavoro (e menomale) e tanto, ma tanto studio (tu ne saprai qualcosa), sono giunto a questo risultato:

http://www.gaigher.it/brightstudio/

Chiaramente non è nulla di definitivo, mancano ancora alcune definizioni tipografiche, e anche i link nel footer, andranno personalizzati con quella che sarà l'identità di questo progetto ribattezzato "b-right studio".
Sono un utente mac, quindi l'ho testato principalmente con Safari. Sembra funzionare bene anche con Chrome, ma non riesco a visualizzare le corrette transizioni dei link e dei tre box nel footer ne con opera ne con firefox. Ho testato però la Alpha della versione 3.7 di Firefox, e le transizioni vanno egregiamente, quindi è solo questione di giorni. Non ho avuto modo ovviamente di provarlo con explorer.

Nei box sul fondo, poi, ho impostato l'overflow, ma quando il testo è abbastanza corto da non smarginare, non riesco a impostare un allineamento verticale centrale.

Non ho ancora assimilato bene alcuni concetti relativi al posizionamento, ma insomma, ci sto lavorando...diciamo che a forza di sbagliare prima o poi si imbrocca la strada giusta. In ogni caso, devo dire, è stato anche piuttosto divertente. Il prossimo passo sarà convertirlo in un tema x wordpress...con calma...

Insomma, che ne pensi? Puoi darmi qualche dritta?

Con devozione... grazie!

p.s.: ci tengo a sottolineare, per chiunque si trovasse nella mia stessa condizione di ignoranza, che sono riuscito a fare questo layout seguendo e reinterpretando la guida scritta da Nando e Sara. E' un meraviglioso punto di partenza da cui trarre le basi giuste per evolvere poi il discorso verso contenuti più complessi. SCARICATELA!!!

[nando]

Ciao Fabio, perdona il ritardo della mia risposta ma sono in una settimana pienissima di lavoro, ti rispondo con calma nel fine settimana con un feedback dettagliato sul lavoro che hai svolto. grazie per la pazienza =)

[fabio.gaigher]

E di che! Grazie a te! Il lavoro è un problema quando non c'è...anzi, meglio così, perché piano piano sto "evolvendo"... Buon lavoro e a presto!