salve.. ho deciso, non so per quale strana forma di masochismo di convertire la miriade di codice html in qualcosa di + compatto e facilmente riutilizzabile tramite css. solamente che non ho la + pallida idea di dove iniziare...
http://www.italianraiders.com/biografy.php
questa è la pagina come facilmente immaginabile è un'insieme di moltissime tabelle che generano un layaout appartentemente semplice.
e ora come si procede in sti casi?
Ciao
non è masochismo, i css ti semplificano la vitaanche se bisogna lottarci un pò...
Probabilmente l'hai già fatto, ma se non è così guardati le lezioni sui css che sono su html.it tipo qui http://css.html.it/guide/leggi/2/guida-css-di-base/
e i link utili http://forum.html.it/forum/showthrea...readid=1013463
ciao, buon lavoro!
Se può essere utile, almeno a livello concettuale...
- http://pesanervi.diodati.org/pn/?a=293
Leading the Web to Its Full Potential...
www.pierofix.it | www.w3.org | www.zeldman.com/externals | http://browsehappy.com | www.alistapart.com | www.webstandards.org | www.flickr.com/photos/pierofix/
non so xkè ma penso che postero' qui ogni fase del mio lavoro.. ho veramente bisogno di qualcuno che mi tenga per manina e che mi avverta se sto facendo cazzate o altro..
come prima cosa ho ridisegnato il layout su un foglio per sottolineare le parti + ostiche da tener conto (ridimensionamenti in cambio di risoluzione.. posizioni fisse di alcune parti e dimensioni in generale)
bene che bel casino.
allora io inizierei dallo sfondo giusto ? e poi sopra a salire quindi ..
Capitolo 1 - Lo sfondo
Obbiettivo
Lo sfondo è di colore #555555
sullo sfondo voglio che si ripeta un'immagine ma che questa immagine compaia solo una volta per quanto riguarda la ripetizione verticale mentre si ripeta normalmente lungo l'asse orizzontale. il punto rispetto cui valuto la ripetizione è il margine alto sinistro.
nel disegno le immagini ripetute si vedono ai lati della parte fissa e compaiono solo a risoluzioni maggiori di quella minima.
rispetto alla versione attuale (pagina di riferimento www.italianraiders.com/biografy.php) lo sfondo è la parte che compare a destra e a sinistra quando si ridimensione la finestra in larghezza.. come potrete notare l'immagine di sfondo si blocca ad una certa alterzza per poi continuare di colore grigio #555555
------------------------------
bene.. inizio a cercare materiale per fare questa parte di codice riguardante il backgroundche la forza sia con me
velocemente: sai che è un'idea carina per un blog
seguire passo passo la trasformazione di un sito.....
poi se posso ti rispondo seriamente.
ahhhh PS: per capire come funzionano e le potenzialità dei css non puoi non guardare qui http://www.csszengarden.com/
si quel sito che citi tu mi ha sempre affascinato non poco ^_^ da veramente l'idea di cosa possono fare i css.
un'idea per un blog ? eh si :P immagino già il titolo .. così un webmaster arrivo al suicidio ^_^
.. proseguo nella ricerca :P
a dopo per ulteriori aggiornamenti
Cominciamo, allora:
Capitolo 1 - Lo sfondo
html, body {margin:0; padding:0;}
body {background: #555 url(nomefile.gif) repeat-x left top}
"This is the end, Clark... for both of us"
ok .. mi hai anticipato.. cmq io ho risolto in un'altra maniera
Codice index.htm
Codice CSS<html>
<head>
<style>
@import url(IR.css);
</style>
</head>
</html>
/* CSS per www.italianraiders.com */
body {
background-color: #55555;
background-image: url(sfondo.gif);
background-repeat: repeat-x;
}
bene.. ammesso che funziona sia il mio che il tuo sistema .. sicuramente il tuo denota una professionalità maggiore.. vorrei capire qual'è meglio e perchè. E' solo questione di risparmio di bit (ad esempio l'esadecimale sostituito con il 555 che tral'altro non so cosa sia ) o c'è dietro altro ?
nel tuo codice vedo che i margini sono dati agli elementi html e body .. cosa intendi per dare quei margini all'html ?
EsattoE' solo questione di risparmio di bit
E' molto semplice: se il numero esadecimale è costituito da tre "doppiette", puoi tranquillamente "abbreviarlo" come ho fatto io, sempre per risparmiare qualche carattere.l'esadecimale sostituito con il 555 che tral'altro non so cosa sia
Es.
#555555 - > #555
#aabb99 - > #ab9
#11ee66 - > #1e6
ecc.
"This is the end, Clark... for both of us"
Capitolo 2 - Dalle tabelle ai div
prepariamo gli stili (prima parte)
Ho rintracciato nella struttura attuale del sito 3 ipotetici blocchi su cui suddividere la parte centrale..
Come vedete le parti esterne (in rosso) sono uguali e si trovano all'esterno del corpo centrale (in blu)
ora normalmente con le tabelle avrei proceduto in questa maniera. Tabellona maxi centrato da 733 pixel di larghezza (24 + 24 delle 2 parti esterne + 685 del corpo blu). All'interno 3 td per delimitare le 3 parti. Nei due td + esterni un'altra tabella divisa in 2 righe rispettivamente quella superiore per contenere l'immagine e quella inferiore con altezza in percentuale 100% (per adattarsi a tutta la pagina in altezza) di sfondo color grigio. e questo solo per le 2 laterali figurarimoci per il corpo centrale.
con i css dovrebbe risultare tutto molto + semplice..
iniziamo dal definire i contenuti dei div laterali rossi (ovvero il colore di background e l'immagine che vogliamo ripetere solo 1 volta)
Permessi di invio
Rispondi quotando