Layout grafico particolare

**platone** · 13-01-2009, 16:21

Sto riprogettando il layout di un sito con i CSS (mi tocca aggiornarmi).
All'epoca in cui ho sviluppato per la prima volta il sito usavo le tabelle per sviluppare il layout con molteplici trucchi per alleggerire quanto più possibile il "peso" della pagina ottenendo ottimi risultati.

Voglio provare a riscrivere il template con i CSS e alleggerire le pagine ulteriormente.

Il problema è che temo non sia possibile senza utilizzare immagini di background anzichè bgcolor, il che temo che si traduca in un aumento delle dimensioni della pagina anzichè in una diminuzione.

Il mio scopo è replicare la fascia orizzontale che taglia il sito web sullo sfondo.
Vi passo il link del sito web in questione:

http://www.pegasohosting.net/

Temo che lo sfondo con la fascia non sia fattibile mediante CSS, se non creando una immagine AD HOC che svolga appunto tale lavoro.

Se così fosse allora l'attuale soluzione sarebbe senza dubbio più leggera di quella proponibile con i CSS.

Però mi affido a voi super GURU dei CSS.... ditemi che si può fare e indicatemi la via....

**digital00** · 13-01-2009, 16:50

Credo che dopo una qualche nozione in più sui css, tu potrai ritirare cose come "trucchi con le tabelle ottenendo ottimi risultati" e "la soluzione tabelle sarebbe senza dubbio più leggera".

Niente di personale eh, non mi mordere!

Per farti capire cosa vuol dire soluzione leggera:
Basta dare al body il background del pattern (che sarà massimo 4x4 pixel), con l'opzione repeat, in modo che si ripeta per tutta la pagina. Poi basterà tagliare l'immagine di back attuale che comprenderà il pattern iniziale, la barra, e la fascia, (sempre per una larghezza di massimo 4px), e usarla come background in un div #container con l'opzione repeat-x e colore trasparente.
Vale a dire, essenzialmente:

codice:

body {
 background: #FFF url(images/pattern.gif) repeat;
}
#container {
 background: transparent url(images/back.gif) repeat-x;
 width: 100%;
}

Questo è lo style. Basterà ficcare tutta la pagina dentro <div id="container"></div> e sei a cavallo. Al limite testalo su una pagina vuota..!
ciao

**platone** · 13-01-2009, 16:57

Ciao Digital00,

mi sa che non hai capito il problema. Ho fatto già numerosi siti in CSS e so che sono più leggeri.

Tuttavia in questo caso oltre allo sfondo (è un 4x4), c'è anche questa maledetta fascia orizzontale che parte dal punto 73 verticale dello schermo (e da quello deve partire), con il codice che mi hai postato posso replicare lo sfondo in background (che per carità avrei potuto risolvere facendo prima con un

<body background="pattern.gif">

che è sicuramente più veloce che farlo in CSS.
Ma la barra orizzontale così come la vedi non è replicabile con il semplice codice che mi ha dato:

#container {
background: transparent url(images/back.gif) repeat-x;
width: 100%;
}

Salvo che back.gif non sia una ENORME immagine di una fascia blu che pesa come minimo 80Kb inutili.

**digital00** · 13-01-2009, 17:27

Mi stai dicendo che non vuoi una cosa del genere:
http://www.enginnet.it/prove/prova1.htm
?

**platone** · 13-01-2009, 17:32

Ci sono dei dettagli:

1) la barra a sinistra è meno alta di quella a destra.
2) Le sfumature al bordo della tabella centrale che ricadono sull'intera struttura sottostante non sono applicabili giacchè non si possono usare PNG con trasparenza alfa su IE.

**digital00** · 13-01-2009, 17:53

Beh alla domanda 2 si risponde semplicemente convertendo l'intero layout, rendendolo table-less. Basterà fare un div con background un'immagine alta 4 pixel che riassume lo sfumo laterale e il bianco centrale; dentro questo div, tutto il resto del contenuto.
Il punto 1 è un problema, ma io sinceramente credo che tu possa farne tranquillamente a meno, e che anzi, forse una fascia di eguale altezza possa apparire più uniforme.. poi sono gusti eh, ma non vedo tutta quella necessità di avere la fascia più bassa a sinistra e più alta a destra.

Per quanto riguarda la tua tesi su quanto scrivere <body background="pattern.gif"> sia più veloce, beh, lo è sicuramente, ma c'è differenza tra scrivere UNA VOLTA body { background: #FFF url(immagine.jpg) repeat; } in UN foglio di stile, e scrivere invece <body background="pattern.gif"> per OGNI pagina che possiede il sito. Questa teoria applicata a tutti i div rende un sito in css più veloce, e il codice molto più pulito.

**platone** · 13-01-2009, 18:02

Inanzitutto ti ringrazio per il tuo tempo, anche perchè ti sei messo a ritagliare pics per me e credo che tu sia stato davvero molto molto molto molto gentile.

Cmq quello che vorrei capire è se i CSS hanno davvero dei limiti o se sono io incapace di creare l'effetto che voglio.
Con le tabelle sono sempre riuscito ad ottenere un layout esattamente come lo volevo io e compatibile con qualsiasi Browser.

Con i CSS devo "arrangiarmi" ottenendo HTML pulitissimo ma codici CSS che passano più righe a correggere i Bug dei browser che effettivamente ad effettuare dichiarazioni ed è snervante perchè su un PC posso testare due versioni di Browser alla volta e non 12 versioni differenti.

Se solo non esistesse IE avrei già risolto con due PNG alfa che sfumano tutto lo sfondo trasversalmente sopra la fascia, ma sfortunatamente c'è IE ed è anche il Browser più diffuso e quindi dovrò arrangiarmi.

Ogni volta che sviluppo un sito con i CSS penso che non è ancora tempo per abbandonare i vecchi tag HTML e che bisognerà aspettare che IE5 e IE6 scompaiano del tutto per pensare di sviluppare siti con i CSS a piena potenza.

**ricman** · 13-01-2009, 18:16

Originariamente inviato da platone
Cmq quello che vorrei capire è se i CSS hanno davvero dei limiti o se sono io incapace di creare l'effetto che voglio.

La seconda che hai detto ...

Senza offesa... s'intende...
I css non hanno limiti particolari... casomai le tabelle sono limitate in quanto è scorretto usarle per uno scopo diverso da quello per cui sono state progettate.
E come portare il cibo alla bocca col coltello... di fame non muori ma è più corretto ed efficiente usare la forchetta (lo so... è un esempio del cavolo...

)

**platone** · 13-01-2009, 18:42

Ricman...

... prima di parlare, hai letto la discussione?
Sapresti risolvere il problema che ho posto oppure hai letto tre righe e hai deciso di fare un copia e incolla dalla guida introduttiva dei CSS?

Senza offesa, non ho bisogno di lezioni dal primo venuto su quale sia lo scopo dell'uso dei CSS. Sviluppo siti da 10 anni e credo di conoscere bene la fisolofia di entrambi gli approcci.

Senza offesa, ma asserire che la propria filosofia di sviluppo è la migliore mentre le altre sono "da barbari" mi sembra al quanto superficiale e ottuso, considerando che prima dei CSS esistevano solo le tabelle. Aggià!!!! .....sto dimenticando, prima della venuta dei CSS noi poveri webmaster scrivevamo i siti web con l'ascia e il martello e usavamo le torce ad olio per illuminare gli schermi perchè la luce non era stata ancora inventata...

Ritengo invece che entrambi gli approcci hanno dei PRO e dei CONTRO non trascurabili. Ad esempio un layout a tabelle può fare un uso massiccio dei CSS per migliorare il proprio aspetto riuscendo ugualmente laddove i CSS non arrivano.
L'uso esclusivo dei CSS invece ripudia completamente l'utilizzo di tabelle ponendo di fatto dei vincoli.

Onestamente, volendo usare solo i CSS senza alcuna tabella, ora come ora, mi trovo di fronte ad un CONTRO e non riesco ad andare avanti, per questo richiedo l'intervento di qualcuno che forse ha già affrontato problemi analoghi.

Di certo non ho bisogno che NESSUNO mi spieghi perchè dovrei usare i CSS anzichè le tabelle...

....altrimenti credo che inizierò a sparare laser dagli occhi.

**Mich_** · 13-01-2009, 19:10

@platone
Non credo che con questo modo riesci a risolvere, o a trovare qualcuno che ti aiuti.
Ricman e` un vecchio forumista, con molti aiuti al suo attivo.

E non e` che facendo siti che si possono vedere solo in qualche brwoser puoi risolvere i tuoi problemi.
Se usi marcatura non semanticamente corretta ci sara` sempre qualcuno che non riesce a capire le tue pagine. Utenti con browser testuali, utenti con browser "leggeri", utenti con schermi piccoli; inoltre i motori di ricerca sono ormai programmati in modo da penalizzare i siti con marcatura non-semantica.
Puoi permetterti di "tagliar fuori" qualcuno? Puoi permetterti che il tuo sito non compaia nelle ricerche?

Quindi dovresti vedere il passaggio ad un linguaggio moderno come NECESSITA`.

E se chiedi a chiunque con un minimo di esperienza con i CSS, ti confermera` che programmare a tabelle e` ormai una cosa che non si fa piu` e nessuno sente piu` la necessita` di farlo.

Dal punto di vista semantico, nella tua pagina c'e` un body con uno sfondo con sovrapposto un <div> centrato in orizzontale che contiene tutto il contenuto.
Per lo sfondo del body puoi fare un'unica immagine oppure puoi fare una riga verticale da ripetere in orizzontale. Essendo di due colori soltanto, non impiega tanti KB: devi solo scegliere il formato piu` conveniente. Probabilmente con un .gif o .png potrebbe essere di pochi KB, anche se si espande per 800x600.

Discussione: Layout grafico particolare

Strumenti discussione

Ricerca discussione

Visualizza

Layout grafico particolare

Permessi di invio