-
+37
.ABC del HTML♥
L'obiettivo del tutorial è di spiegarvi come realizzare questo semplice modello:Qualcosa o quello che vuoi~
« citazione citazione citazione citazione citazione »testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo.SPOILER (clicca per visualizzare)CODICE<div align="center"><div style="width: 308px; background: #fff; border: 2px solid #18b1c3;"><div style="width: 302px; background: #fff; border: 1px dotted #0f6c73; font-family: georgia; font-size: 12px; color: #808080; padding: 2px"><div style="letter-spacing: 2px; background: #f59853; color: #fff; font-family: georgia; font-size: 18px; margin: 3px; font-style: italic">Qualcosa o quello che vuoi~</div>[IMG]http://i.imgur.com/X322W.png[/IMG]<div style="text-align: center; color: #f59853; padding: 2px">« citazione citazione citazione citazione citazione »</div><div style="overflow: auto; height:60px">testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo. </div></div></div></div>
Oppure più dettagliato come questo:testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testotesto testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testotesto testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testoQuello che vuoi, quello che vuoitesto testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testoImmagine Piccola =D
Link ♥ Link ♥ Link ♥ Link ♥ LinkSPOILER (clicca per visualizzare)CODICE<table width="350px" align="center" style="background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #c0c0c0; font-family: georgia; font-size: 12px"><tr><td width="33%"><div style="overflow: auto; height:60px">testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo</div></td><td width="33%"><div style="overflow: auto; height:60px">testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo</div></td><td width="33%"><div style="overflow: auto; height:60px">testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo</div></td></tr><tr><td colspan="3"><div style="font-family: georgia; font-size: 18px; color: #fff; background: #18b1c3; text-align: right; text-shadow: 1px 0 1px #c0c0c0">Quello che vuoi, quello che vuoi</div></td></tr><tr><td colspan="2" width="50%"><div style="overflow: auto; height:60px">testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo</div></td><td style="background: #fa812a; padding: 3px; color: #fff">Immagine Piccola =D</td></tr><tr><td colspan="3" align="center" style="font-family: gerogia"><iframe width="330" height="25" src="http://www.youtube.com/embed/9-L97G-dMzM?wmode=transparent" frameborder="0" allowfullscreen></iframe>
[URL=http://" target=]Link[/URL] ♥ [URL=http://" target=]Link[/URL] ♥ [URL=http://" target=]Link[/URL] ♥ [URL=http://" target=]Link[/URL] ♥ [URL=http://" target=]Link[/URL]</td></tr></table>
Lo scopo è quello di farvi capire come creare un codice che potrete utilizzare ovunque, e sopratutto che alla fine ci vuole solo pratica e un pizzico di pazienza.
Credetemi quando vi dico che sono sempre gli stessi passaggi.
Il tutorial è diviso in parti, ma prima di iniziare vorrei scrivere 2 cose.
Il mondo degli HTML è vasto, io vi scriverò le cose essenziali ma per maggiori dettagli Google è un ottima fonte. Cercate di capire che non posso fare mille esempi e sopratutto descrivere 1000 effetti. Un pochino sta anche a voi. Io vi lascierò dei link guida ma alla fine se cercate CSS, HTML su google trovate mille pagine sul tema e anche come personalizzre i vostri lavori.
Cercherò di essere comprensibile e chiara, ma se ciò non mi riuscisse potete aprite un topic in ☆ What? HELP ME! (anche se non siete iscritti al forum), oppure contattarmi tramite MP.Le parti
Passo 1: Le basi
Passo 2: Align, Style, Div e Span
Passo 3: Proprietà di base dello Style
Passo 4: Proprietà particolari dello Style
Passo 5: Proprietà particolari dello Style per il Box
Passo 6: Un esempio con i Div
Passo 7: Un'altro esempio con i Div
Passo 8: Tabelle, proprietà, colspan e rowspan
Passo 9: Due Esempi con le Tabelle
Passo 10: Ringraziamenti
Edited by -spiker - 27/11/2012, 09:56
. -
+3 .Passo 1: Non sei pazzo~
Per prima cosa vorrei mostravi un semplice codice così da capire i suoi componenti.
Dal Supporto di ForumFree prendiamo il codice Cambiare colore, dimensione, font ad un testo.HTML<span style="color: COLORE; font-size: DIMENSIONE; font-family: FONT">testo</span>
Il codice è diviso in 3 parti:HTMLPrima Parte: <span style="color: COLORE; font-size: DIMENSIONE; font-family: FONT">
Seconda Parte: testo
Terza Parte: </span>
La prima parte corrisponde all' apertura del codice e alla sua personalizzazione. La seconda è il contenuto, e infine la terza è la sua chiusura.
Da ciò si capisce che ogni codice ha un inizio e una fine. E' molto importante chiudere un codice, altrimenti non funziona e noterete subito l'errore.
In sintesi, per aprire un codice si usano le "< >" e per chiuderlo usiamo la / come negazione, così: "</ >".
All' interno delle < > c'è lo span che è chiamato tag, e accanto c'è style (un'altro tag) che approfondiremo dopo.
Per la chiusura utilizziamo la negazione del primo tag così: </ span> (senza spazio tra / e span).
Adesso chiamamo TAG Principale span, e TAG Secondario style.
Esistono 2 TAGS Principali: span e div.
Le differenze tra i 2 sono molto poche e riassumibili così:
1. il Div fa andare il testo a capo, lo Span no.SPOILER (clicca per visualizzare)Prova testoche vaa capoCODICEProva testo <div>che va</div> a capo
Prova testo che non va a capoCODICEProva testo </span>che non va</span> a capo
2. il Div occupa l'intera riga, lo Span no.SPOILER (clicca per visualizzare)Prova Riga ColorataCODICE<div style="background-color: #fff;">Prova Riga Colorata</div>
Prova Riga ColorataCODICE<span style="background-color: #fff; color: #000">Prova Riga Colorata</span>
Usare Span o Div (eccetto per le differenze sopracitate) è uguale. Quando avrete imparato a usare uno dei 2, sarete a cavallo per l'altro.
NB: Niente vi vieta di usarli insieme, tipo così:HTML<div align="center"><span style="color: COLORE; font-size: DIMENSIONE; font-family: FONT">testo</span></div>
I TAGS Principali però, non quasi nulla senza i TAGS Secondari.
Li descriverò nella seconda parte =)
Edited by -spiker - 15/11/2011, 14:55. -
+3 .Passo 2: Le Spalle sono più utili degli Eroi~
Nel post precedente vi ho mostrato il codice e come si crea, adesso descriverò i TAGS Secondari.
Principalmente sono 2:
align→ si occupa dell' allineamento.
style→ si occupa della personalizzazione.
# Align:
Ci sono 4 tipi di allineamento: left (sinistra), right (destra), center (centrale) e justify (allineato da entrambi i lati).
Sotto spoiler ci sono gli esempiSPOILER (clicca per visualizzare)Prova Testo =)CODICE<div align="left">Prova Testo =)</div>Prova Testo =)CODICE<div align="right">Prova Testo =)</div>Prova Testo =)CODICE<div align="center">Prova Testo =)</div>Prova Testo =)CODICE<div align="justify">Prova Testo =)</div>
Il tag Align è molto facile, e di solito è anche insieme a text per allinerare il testo dove si vuole ( text-align: posizione ).
# Style
E' più complicato poichè ci sono un sacco di propietà che entrano in gioco.
Lo style serve a personalizzare, ad esempio prendiamo il codice precedente:HTML<span style="color: COLORE; font-size: DIMENSIONE; font-family: FONT">testo</span>
Ci sono 3 propietà:
- color: rappresenta il colore del testo;
- font-size: le dimensioni del testo;
- font-family: il carattere del testo.
Ora vi elencherò le proprietà principali ma prima mi preme scrivere questo:
Bisogna stare attenti a scrivere il codice, si inizia con <, il tag principale (span o div), il tag secondario, =" e dopo tutte le proprietà, separata l'una dall' altra con ; (punto e virgola) e infine ">.
E' molto importante, altrimenti le proprietà non funzionano. L'uguale, le virgolette e il punto e virgola SONO FONDAMENTALI.
Se osservate il codice noterete tutti i simboli =)
Edited by -spiker - 15/11/2011, 14:55. -
+3 .Passo 3: Troppe propietà da ricordare~
Ci sono moltissime proprietà, io vi elencherò le principali e vi posterò i link per altre. Per il resto ricordate che Google è un ottima fonte.
Partiamo con:
width→ larghezza (si misura in px);
height→ altezza (si misura in px);
Esempio:SPOILER (clicca per visualizzare)Testo Prova, 200x100pxCODICE<div style="width: 200px; height: 100px; background: #fff">Testo Prova, 200x100px</div>
background→ rappresenta lo sfondo.
Ci sono 2 tipi di sfondo:
- tinta unita, e si scrive background: #colore oppure background-color: #colore
- con immagine, e si scrive background: url(link immagine) oppure background-image: url(link immagine)
- se non si vuole nessuna immagine di sfondo, si scrive background: none oppure background-image: none
Esempio:SPOILER (clicca per visualizzare)Tinta UnitaCODICE<div style="background: #fff">Tinta Unita</div>
Sfondo:Tinta UnitaCODICE<div style="background: url(http://i.imgur.com/L7AW5.jpg); width:200px; height: 100px">Tinta Unita</div>
repeat→ ripetizione nello sfondo.
Ci sono 4 tipi di ripetizione:
- totale, e si scrive background-repeat: repeat
- solo orizzontale, e si scrive background-repeat: repeat-x
- solo verticale, e si scrive background-repeat: repeat-y
- nulla, e si scrive background-repeat: none
color→ colore del testo.
Il colore deve essere sempre accompagnato dal # davanti.
I colori li potete prendere da qui.
Si scrive color: #colore.
Esempio:SPOILER (clicca per visualizzare)Prova ciò che leggi di di RossoCODICE<div style="color: #FF0000">Prova ciò che leggi di di Rosso</div>
font-family→ carattere del testo.
Su questo non c' molto da dire, si scrive font-family: carattere
Esempio:SPOILER (clicca per visualizzare)Che carattere ti sembra?CODICE<div style="font-family: comic sans ms">Che carattere ti sembra?</div>
font-size→ dimensioni del testo.
Si possono misurare in pt oppure in px (ma io vi consiglio il px).
Si scrive font-size: XXpx, dove XX è il numero.
Esempio:SPOILER (clicca per visualizzare)Abbastanza Grande?CODICE<div style="font-size: 30px">Abbastanza Grande?</div>
text-align→ allineamento del testo.
Qui è come per l'align, solo che c'è il text- davanti.
Si scrive text-align: posizione (left, right etc...)
line-height→ lo spazio tra le righe del testo.
Si può misurare in %, ma anche in px (e altri valori come .em o numeri puri).
Più piccolo è il numero, e più piccolo sarà lo spazio fra le linee.
Esempio:SPOILER (clicca per visualizzare)Testo Sopra
testo sottoCODICE<div style="line-height: 40%">Testo Sopra
testo sotto</div>Testo Sopra
testo sottoCODICE<div style="line-height: 120%">Testo Sopra
testo sotto</div>
Queste sono le proprietà pricipali, nel prossimo post descriverò quelle un pochino più particolari.
La cosa importante è provare finchè non si raggiunge un risultato che soddisfa.
Ottimo sito dove trovare maggiori spiegazione è CSS.HTMIL.it =). -
+4 .Passo 4: I trucchi non sono un optional~
Quest'altre proprietà si potrebbere definire come qualcosa in più per personalizzare il testo o il font. Non farò tutti gli esempi, altrimenti non finirei più questa parte!
Una cosa che dovete sapere prima di procedere è come annullare gli effetti (o proprietà).
In generale, per annullare le proprietà sottostanti basta scrivere none o normal. Se ci fossero dei valori in px, basta scrivere 0.
Esempio:
- letter-spacing: 0
- font-style: normal
- text-decoration: none
Ci sono ancora delle proprietà da analizzare che riguardano il testo o il font:
- text-decoration→ decorazioni del testo.
- text-transform→ trasformazioni del testo.
- text-shadow→ ombreggiatura nel testo.
- font-weight→ grassetto nel testo.
- font-style→ corsivo nel testo.
- letter-spacing→ spazio fra lettere.
- word-spacing→ spazio fra parole.
text-decoration:
Ci sono 5 tipi di decorazioni nel testo:
- text-decoration: underline (testo sottolineato)
- text-decoration: overline (testo sopralineato)
- text-decoration: through (testo sbarrato)
- text-decoration: blink (testo lampeggiante).
- text-decoration: none (nessuna decorazione).
text-transform:
Ci sono 4 trasformazioni nel testo:
- text-transform: none (nessuna trasformazione)
- text-transform: capitalize (ogni prima lettera è maiuscola)
- text-transform: uppercase (tutto il testo è in maiuscolo)
- text-transform: lowercase (tutto il testo è in minuscolo)
text-shadow:
Nel text-shadow entrano in vigore 4 parametri:HTMLtext-shadow: XXpx XXpx XXpx #colore
Il primo indica lo spostamento dell'ombra in orizzontale. Da sinsitra a destra.
Il secondo indica lo spostamento dell'ombra in verticale. Dall'alto in basso.
Il terzo indica la sfocatura dell'ombra.
Componendoli insieme, aumentando i valori (in maniera positiva e negativa) otterrete vari effetti.
Esempi:SPOILER (clicca per visualizzare)Testo di Prova per vedere l'effetto, solo ombreggiatura orizzontale.CODICE<div style="background: #fff; color: #FF5500; text-shadow: 1px 0 #000">Testo di Prova per vedere l'effetto, solo ombreggiatura orizzontale.</div>Testo di Prova per vedere l'effetto, solo ombreggiatura verticale.CODICE<div style="background: #fff; color: #FF5500; text-shadow: 0px 1px #000">Testo di Prova per vedere l'effetto, solo ombreggiatura verticale.</div>Testo di Prova per vedere l'effetto, sfumaturaCODICE<div style="background: #fff; color: #FF5500; text-shadow: 0px 1px 2px #000">Testo di Prova per vedere l'effetto, sfumatura</div>
font-weight:
Se si vuole un testo in grassetto basta scrivere:
- font-weight: bold
- nessun testo in grassetto font-weight: normal
font-style:
Se si vuole un testo in corsivo basta scrivere:
- font-style: italic
- nessun testo in corsivo font-style: normal
letter-spacing
Rapprensenta lo spazio fra le lettere, si esprime in px e può essere negativo o positivo.
Se il valore è negativo (ad esempio -1) il testo si stringerà, se il valore è positivo accadrà il contrario.
Esempio:SPOILER (clicca per visualizzare)Testo di Prova per vedere l'effettoCODICE<div style="letter-spacing: -2px">Testo di Prova per vedere l'effetto</div>Testo di Prova per vedere l'effettoCODICE<div style="letter-spacing: 5px">Testo di Prova per vedere l'effetto</div>
word-spacing
Valgono le stesse cose del letter-spacing, solo che invece di agire sulle lettere, agisce sulle parole.
Esempio:SPOILER (clicca per visualizzare)Testo di Prova per vedere l'effettoCODICE<div style="word-spacing: 10px">Testo di Prova per vedere l'effetto</div>Testo di Prova per vedere l'effettoCODICE<div style="word-spacing: -10px">Testo di Prova per vedere l'effetto</div>
Per maggiori informazioni vi consiglio css.flepstudio.org e css.flepstudio.org (2). -
+4 .Passo 5: Le Armi Speciali~
Abbiamo terminato le proprietà che agiscono sul testo (o font). Adesso ci rimane da analizzare quelle inerenti al box.
Sto parlando di:
- margin→ margine esterno.
- padding→ margine interno.
- border→ bordo esterno.
- border-radius→ bordo arrotondato.
- box-shadow→ ombreggiatura al box.
Non sono proprietà difficili, ma bisogna ricordarsi 2 cose:
1. agiscono tutte in px.
2. per annullarle basta scrivere 0.
Esempio:
- margin: 0
- padding 0
etc..
Prima però, voglio parlare di angoli e posizioni.
Ci sono 4 posizioni, e 4 angoli.
Mi sto riferendo a:
- left (sinistra)
- right (destra)
- top (alto)
- bottom (basso)
E agli angoli:
- topleft (alto a sinistra)
- bottomleft (in basso a sinistra)
- topright (altro a destra)
- bottomright (basso a destra)
Questi ricordateveli perchè vi serviranno.
# margin e/o padding:
Tra i 2 c'è una differenza nell' agire. Se avete un testo dentro a un box:
- il padding sarà il margine dal testo al bordo del box.
- il margin sarà il margine dal bordo del box allo sfondo a cui è collocato.
Quest' Immagine dovrebbe aiutarvi a capire.
Non spendo ulteriori parole sul margin e padding. Ricordate (come vedete dall' immy) che loro agiscono solo con le 4 posizioni e in px.
Se si vuole solo (o più) margin (o un padding), basta scrivere margin-posizione: XXpx.
# border:
Ci sono diversi tipi di bordi, che non sto a elencare. Li trovate qui.
Dei bordi c'è da sapere che si scrivono così:HTMLborder: 1px solid #fff
Cioè dovete definire un valore (che è il loro spessore), il tipo di bordo e il colore.
Il bordo si può scindere, nel senso che anche lui agisce con le posizioni. Potete fare solo un bordo superiore border-top, oppure un superiore e un inferiore bordet-top e border-bottom e così via.
Esempio:SPOILER (clicca per visualizzare)Testo di Prova, c'è un padding e un margin di 30 pxCODICE<div style="background: #fff; color: #FF5500; padding:5px; margin:30px; border: 1px solid #c0c0c0">Testo di Prova, c'è un padding e un margin di 30 px</div>Testo di Prova, c'è un padding e un margin di 30 px. Solo bordo superiore e sinistro.CODICE<div style="background: #fff; color: #FF5500; padding:5px; margin:30px; border-top: 3px solid #c0c0c0; border-left: 3px solid #c0c0c0;">Testo di Prova, c'è un padding e un margin di 30 px. Solo bordo superiore e sinistro.</div>
# border-radius
Il border-radius rapprensenta il bordo arrotondato. E' l'unico che agisce con gli angoli ed è solo in px.HTMLborder-radius: XXpx
Maggiore è il valore, e maggiore è l'angolo.
Al solito: gli angoli sono 4 e li potete gestire come volete. Potete fare il vostro schema con un solo angolo, con 2 etc...
Nel border-radius non c'è tipo di bordo o colore. Quelli sono parametri di border, nel codice basta che li inserite entrambi e sarà tutto automatico.
Esempio:SPOILER (clicca per visualizzare)Testo di Prova. Solo bordo superiore e sinistro.CODICE<div style="background: #FFD91C; color: #FF5500; border-top: 3px solid #c0c0c0; border-left: 3px solid #c0c0c0; border-radius: 20px; padding: 5px">Testo di Prova. Solo bordo superiore e sinistro.</div>
Altri tipi di bordi sono disponibili qui.
# box-shadow:
E' indentico a tex-shadow solo che si riferisce all' ombra del box, ma si scrive nella stessa forma.
Esempio:SPOILER (clicca per visualizzare)Testo di Prova. Solo bordo superiore e sinistro.CODICE<div style="background: #FFD91C; color: #FF5500; border-top: 3px solid #c0c0c0; border-left: 3px solid #c0c0c0; border-radius: 20px; padding: 5px; box-shadow: 0 0 6px #000">Testo di Prova. Solo bordo superiore e sinistro.</div>
Maggiori informazione su quest'ultimo sono qui.
Se avete dubbi sulle altre, guardate i link precedenti postati oppure cercate su Google =). -
+4 .Passo 6: Facciamo il Punto della Situazione~
Tutte le proprietà che vi ho elencato agiscono con lo style e servono per personalizzare il nostro schema.
Adesso che abbiamo tutto il necessario possiamo metterci all' opera =D
Dunque, cercheremo di realizzare uno schema così:« citazione citazione citazione citazione citazione »testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo.
Qualcosa o quello che vuoi~
Prima di tutto dobbiamo capire da dove iniziare. Per comodità, io parto sempre dal bordo fino all'interno.
Passo 1: Bordo, Allinemento e Sfondo.
Dunque, prima scriviamo il div align. Dopo iniziamo con lo style, e quindi i 3 parametri: width, border e background.SPOILER (clicca per visualizzare)CODICE<div align="center"><div style="width: 302px; background: #fff; border: 2px solid #18b1c3;">
</div></div>
Passo 2: La citazione.
Per la citazione dobbiamo creare un div style a parte. Nel nostro caso è questo:CODICE<div style="text-align: center; color: #fa812a; padding: 2px">« citazione citazione citazione citazione citazione »</div>
Ho impostato il testo allineato al centro, il colore, e il suo margine dal bordo.« citazione citazione citazione citazione citazione »SPOILER (clicca per visualizzare)CODICE<div align="center"><div style="width: 302px; background: #fff; border: 2px solid #18b1c3; font-family: georgia; font-size: 12px; color: #808080; padding: 2px; text-align: left"><div style="text-align: center; color: #fa812a; padding: 2px">« citazione citazione citazione citazione citazione »</div>
</div></div></div>
Passo 3: Immagine e Testo.
L'immagine è forse la parte più facile. Forumfree mette a disposizione il bottoncino
che serve al nosto scopo.
Se ci clicchiamo possiamo analizzare il codice:HTML<div style="float: left; margin-right: 10px">Testo/Immy che vuoi di lato al testo</div>
Float: inidica l'allineamento. Se cambiate left a right la immy si sposterà a destra.
Margin-right: indica il margine destro, ovvero la distanza dall' immy al testo. Potete cambiarlo o aggiungerci altri margini.
Posizioniamo il codice accanto al primo testo, e dato che io sono pignola ho impostato anche il margine da sinistra (margin-left).
Per il testo abbiamo 2 scelte.
1. Creare un nuovo div style (come per citazione);
2. Aggiungere proprietà al primo div style.
Per comodità io ho aggiunto le proprietà al primo parametro:HTMLfont-family: georgia; font-size: 12px; color: #808080; padding: 2px; text-align: left
Ma potete fare anche così:CODICE<div style="font-family: georgia; font-size: 12px; color: #808080; padding: 2px; text-align: left">testo testo</div>« citazione citazione citazione citazione citazione »testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo.SPOILER (clicca per visualizzare)CODICE<div align="center"><div style="width: 302px; background: #fff; border: 2px solid #18b1c3; font-family: georgia; font-size: 12px; color: #808080; padding: 2px; text-align: left"><div style="text-align: center; color: #fa812a; padding: 2px">« citazione citazione citazione citazione citazione »</div><div style="float: left; margin-right: 10px; margin-left: 10px">[IMG]http://www.hosting.universalsite.org/images1/sfondo-232480166.png[/IMG]</div> testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo.
<div style="letter-spacing: 2px; background: #fa812a; color: #fff; font-family: georgia; font-size: 18px; margin: 3px; font-style: italic">Qualcosa o quello che vuoi~</div></div></div></div>
Passo 4: L'ultimo Box.
Per l'ultimo riquadro bisogna creare un nuovo div style. Nel nostro caso è questo:CODICE<div style="letter-spacing: 2px; background: #fa812a; color: #fff; font-family: georgia; font-size: 18px; margin: 3px; font-style: italic">Qualcosa o quello che vuoi~</div>
Come notate ho aggiunto un letter-spacing, un margin e un font-style.
Adesso mettete il codice nella parte finale e otterrete il vostro schema =)« citazione citazione citazione citazione citazione »testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo.Qualcosa o quello che vuoi~SPOILER (clicca per visualizzare)CODICE<div align="center"><div style="width: 302px; background: #fff; border: 2px solid #18b1c3; font-family: georgia; font-size: 12px; color: #808080; padding: 2px; text-align: left"><div style="text-align: center; color: #fa812a; padding: 2px">« citazione citazione citazione citazione citazione »</div><div style="float: left; margin-right: 10px; margin-left: 10px">[IMG]http://www.hosting.universalsite.org/images1/sfondo-232480166.png[/IMG]</div> testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo.
<div style="letter-spacing: 2px; background: #fa812a; color: #fff; font-family: georgia; font-size: 18px; margin: 3px; font-style: italic">Qualcosa o quello che vuoi~</div></div></div></div>
Più di così non so come spiegarmi. Dovete prenderci la mano e usare le proprietà con diligenza. All fine credetemi, è tutta una questione di pratica.
Per iniziare potete usare i codici che ho postato di volta in volta e aggiungerci proprietà che volete.
Edited by -spiker - 15/11/2011, 19:22. -
+2 .Passo 7: Un'altro esempio per fare tutti felici~
Mettiamo di voler realizzare questo:Qualcosa o quello che vuoi~« citazione citazione citazione citazione citazione »testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo.SPOILER (clicca per visualizzare)CODICE<div align="center"><div style="width: 308px; background: #fff; border: 2px solid #fca566;"><div style="width: 302px; background: #fff; border: 1px dotted #eb6605; font-family: georgia; font-size: 12px; color: #808080; padding: 2px"><div style="letter-spacing: 2px; background: #18b1c3; color: #fff; font-family: georgia; font-size: 18px; margin: 3px; font-style: italic">Qualcosa o quello che vuoi~</div><div style="text-align: right; color: #fa812a; padding: 2px">« citazione citazione citazione citazione citazione »</div><div style="overflow: auto; height:60px">testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo. </div>
[IMG]http://i.imgur.com/X322W.png[/IMG]</div></div></div>
Passo 1: Il bordo esternoSPOILER (clicca per visualizzare)CODICE<div align="center"><div style="width: 308px; background: #fff; border: 2px solid #fca566;">
</div></div>
Passo 2: Il Bordo interno
Importanti sono le dimensioni, se mettete un bordo interno dovete inserire un width altrimenti vi sballa il codice. Ma il width interno non deve essere uguale al width esterno, ma un pochino più piccolo. Per sapere le dimensioni del secondo width, il ragionamento è questo:
Nel mio schema ci sono (come parametri del bordo interno) 1px di bordo più un padding 2px. Ma non è propio così. Il bordo in realtà sarebbe di 2px perchè dovete considerare sia destra che sinistra (dato il width agisce sulla larghezza, quindi top e bottom non ci interessano), indi 1+1=2px. Lo stesso vale per il padding: ci sono 2px a destra e a sinistra quindi 2+2=4px. Li sommate 4+2=6. Il bordo esterno è 308px, quello interno andrà fatto di 308-6=302px.SPOILER (clicca per visualizzare)CODICE<div align="center"><div style="width: 308px; background: #fff; border: 2px solid #fca566;"><div style="width: 302px; background: #fff; border: 1px dotted #eb6605; font-family: georgia; font-size: 12px; color: #808080; padding: 2px">
</div></div></div>
Passo 3: Box Celeste
Solito discorso, va creato un div apposito.Qualcosa o quello che vuoi~SPOILER (clicca per visualizzare)CODICE<div align="center"><div style="width: 308px; background: #fff; border: 2px solid #fca566;"><div style="width: 302px; background: #fff; border: 1px dotted #eb6605; font-family: georgia; font-size: 12px; color: #808080; padding: 2px"><div style="letter-spacing: 2px; background: #18b1c3; color: #fff; font-family: georgia; font-size: 18px; margin: 3px; font-style: italic">Qualcosa o quello che vuoi~</div>
</div></div></div>
Il codice del box singolo è questo:CODICE<div style="letter-spacing: 2px; background: #18b1c3; color: #fff; font-family: georgia; font-size: 18px; margin: 3px; font-style: italic">Qualcosa o quello che vuoi~</div>
Passo 4: Lo scrool e il testo
Il codice generale per lo scrool è questo:HTML<div style="overflow: auto; height: XXpx; width: XXpx"> </div>
Dove al posto di XX va inserito un valore. Il Width è optionale, se volete che lo scrool occupi tutto lo spazio potete toglierlo. Se invece vedete una barra bassa dovete inserirlo.
Invece per la citazione è un'altro semplice div style.Qualcosa o quello che vuoi~« citazione citazione citazione citazione citazione »testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo.SPOILER (clicca per visualizzare)CODICE<div align="center"><div style="width: 308px; background: #fff; border: 2px solid #fca566;"><div style="width: 302px; background: #fff; border: 1px dotted #eb6605; font-family: georgia; font-size: 12px; color: #808080; padding: 2px"><div style="letter-spacing: 2px; background: #18b1c3; color: #fff; font-family: georgia; font-size: 18px; margin: 3px; font-style: italic">Qualcosa o quello che vuoi~</div><div style="text-align: right; color: #fa812a; padding: 2px">« citazione citazione citazione citazione citazione »</div><div style="overflow: auto; height:60px">testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo. </div>
</div></div></div>
Semplice Div della Citazione:CODICE<div style="text-align: right; color: #fa812a; padding: 2px">Citazione</div>
Passo 5: Immagine
Per l'immagine ho usato un semplice codice [IMG]urlimmagine[/IMG]CODICE[IMG]http://i.imgur.com/X322W.png[/IMG]
E l'ho posizionata in fondo al code (come potete vedere dal codice principale).
Per codici con una struttura più complessa vi spiegherò come utilizzare la tabelle =)
Edited by -spiker - 17/11/2011, 09:05. -
.Passo 8: Non sei solo~
Per fare codici a colonne, semplicemente il sottostante, opuure anche per i codici precedenti, è consigliato l'uso di una tabella.
Questo perchè fare 2 colonne con i Div o gli Span è estremamente difficile.testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo.testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo.testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo.
Sulle tabelle non mi dilungherò a lungo perchè io vi insegnerò le cose base, forumfree farà il resto.
Se prendete il generatore automatico, otterrete una tabella del genere (io ho impostato una riga e 1 colonne).TITOLOCOLONNA1
Ora, sappiate che:
- table è la tabella.
- tr indica la riga.
- td indica la colonna.
Quindi possiamo provare a semplificare il codice così da togliere la parte grafica della skin.CODICE<table>
<tr>
<td>
</td>
</tr>
</table>
Sulle prime, se provate a incollare il codice non noterete nulla di diverso.
Proviamo a personalizzarlo.
Stesse tecniche di prima gente, solo che table, tr e td questa volta sono i TAGS Principali e quindi non c'è bisogno di div o span (li potete usare comunque, ma per comodità potete risparmiare caratteri).
Allineiamo la tabella al centro, impostiamo una larghezza e mettiamo uno sfondo.SPOILER (clicca per visualizzare)CODICE<table align="center" style="background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #c0c0c0; font-family: georgia; font-size: 12px; width: 400px">
<tr>
<td>
</td>
</tr>
</table>
Come notate, ho aggiunto a tableHTMLalign="center" style="background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #c0c0c0; font-family: georgia; font-size: 12px; width: 400px"
Lo style e l'align possono essere applicati anche al tr e td. Ad esempio voglio fare la colonna nera. Scriverò così:HTMLstyle="background: #000; color: #fff"Colonna SPOILER (clicca per visualizzare)CODICE<table align="center" style="background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #c0c0c0; font-family: georgia; font-size: 12px; width: 400px">
<tr>
<td style="background: #000; color: #fff">
Colonna
</td>
</tr>
</table>
Lo stesso vale per la riga tr.
Alla fine non è difficile, applicate gli stessi procedimenti per il div e sarete a cavallo.
Però anche le tabelle hanno qualcosa di rognoso.
Ogni riga deve avere lo stesso numero di colonne, altrimenti il codice vi sballa.
Esempio:SPOILER (clicca per visualizzare)TITOLO<!--RIGA1--> COLONNA1 COLONNA2 COLONNA3 COLONNA4 <!--RIGA2--> COLONNA1 COLONNA2 COLONNA4 <!--RIGA3--> COLONNA1 COLONNA2
Ma qui un santo è venuto in nostro soccorso (non chiedetemi chi), e ha risolto il problema.
Con l'aggiunta al tag td
colspan→ uniamo più colonne orizzontali.
rowspan→ uniamo più colonne verticalmente.
Esempio:testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo.testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo.testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo.testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo.
In principio erano 2 righe e 3 colonne.
Io ho unito la prima colonna alta con quella bassa (cancellando quest'ultima dal codice). Infatti il primo td ha questo codice:HTMLrowspan="2"
Il valore 2 è dato perchè dovete sommare le colonne che volete unire: in questo caso se stesso più la colonna sotto.
Poi ho unito la seconda colonna bassa con la terza colonna bassa (cancellando quest'ultima dal codice).HTMLcolspan="2"
Il valore 2 è dato perchè dovete sommare le colonne che volete unire: in questo caso se stesso più la colonna accanto.
Anche qui è tutta una questione di pratica e di attenzione.
Qui sotto ci sono alcuni link dove potete approfondire il tema =)
xhtml.html.it xhtml.html.it (2) xhtml.html.it (3) xhtml.html.it (4)
Oppure cercate su Google Tabella HTML.
Edited by -spiker - 15/11/2011, 20:56. -
.Passo 9: L'ultimo esempio~
Adesso facciamo qualche esempio, partiamo con qualcosa di semplice:Link♥
Link♥
Link♥
Link♥
Link♥testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testoSPOILER (clicca per visualizzare)CODICE<table align="center" style="background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #c0c0c0; font-family: georgia; font-size: 12px; width: 310px; border-radius: 20px; padding: 5px">
<tr>
<td width="20%">
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
</td>
<td>
<div style="overflow: auto; height:60px">testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo</div>
</td>
<td>
<div style="background: #18b1c3; width: 100px; height: 60px">
</div>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<div style="background: #f3a061; height: 60px">
</div>
</td>
</tr>
</table>
Prima cosa da fare: pensare alle righe e alle colonne della tabella.
In questo esempio sono 2 righe e 3 colonne.
Passo 2: Iniziare a scrivere la tabella.SPOILER (clicca per visualizzare)CODICE<table>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
Passo 3: Unire le colonne, in questo caso solo quelle della terza riga.SPOILER (clicca per visualizzare)CODICE<table>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
</table>
Passo 4: Personalizzare la tabella.
Partiamo al solito con la parte esterna: sfondo, bordo etc... fino all' interno.SPOILER (clicca per visualizzare)CODICE<table align="center" style="background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #c0c0c0; font-family: georgia; font-size: 12px; width: 310px; border-radius: 20px; padding: 5px">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
</table>
Passo 5: Interno tabella.
Al momento abbiamo questo.
Riempiamo la prima colonna: semplicemente ci postiamo dei link all' interno.
Ora, dato che io sono pignola, ho stretto la cella.
Non ho usato style, ma semplicemente width in percentuale, è la stessa cosa. In entrambi i modi otterrete lo stesso effetto.Link♥
Link♥
Link♥
Link♥
Link♥SPOILER (clicca per visualizzare)CODICE<table align="center" style="background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #c0c0c0; font-family: georgia; font-size: 12px; width: 310px; border-radius: 20px; padding: 5px">
<tr>
<td width="20%">
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
</table>
Seconda colonna: inseriamo lo scrool con il testo.Link♥
Link♥
Link♥
Link♥
Link♥testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testoSPOILER (clicca per visualizzare)CODICE<table align="center" style="background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #c0c0c0; font-family: georgia; font-size: 12px; width: 310px; border-radius: 20px; padding: 5px">
<tr>
<td width="20%">
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
</td>
<td>
<div style="overflow: auto; height:60px">testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo</div>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
</table>
Come vedete occupa anche la cella di destra, potete inserire un width oppure riempire la cella di destra, in questo modo si restringe.
Per la terza colonna usiamo un semplice box blu fatto con i div style.CODICE<div style="background: #18b1c3; width: 100px; height: 60px">
</div>Link♥
Link♥
Link♥
Link♥
Link♥testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testoSPOILER (clicca per visualizzare)CODICE<table align="center" style="background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #c0c0c0; font-family: georgia; font-size: 12px; width: 310px; border-radius: 20px; padding: 5px">
<tr>
<td width="20%">
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
</td>
<td>
<div style="overflow: auto; height:60px">testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo</div>
</td>
<td>
<div style="background: #18b1c3; width: 100px; height: 60px">
</div>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
</table>
Ultima Riga: box arancione fatto con i div style.CODICE<div style="background: #f3a061; height: 60px">
</div>
Ed ecco il nostro codice **Link♥
Link♥
Link♥
Link♥
Link♥testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo
Altro esempio:Link♥
Link♥
Link♥
Link♥
Link♥testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testoQualcosa o quello che vuoi~SPOILER (clicca per visualizzare)CODICE<table align="center" style="background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #c0c0c0; font-family: georgia; font-size: 12px; width: 310px; border-radius: 20px; padding: 5px">
<tr>
<td width="20%">[URL=http://" target=]Link♥[/URL]
[URL=http://" target=]Link♥[/URL]
[URL=http://" target=]Link♥[/URL]
[URL=http://" target=]Link♥[/URL]
[URL=http://" target=]Link♥[/URL]</td>
<td><div style="overflow: auto; height:60px">testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo</div></td>
<td rowspan="2"><div style="letter-spacing: 2px; color: #404040; font-family: georgia; font-size: 18px; margin: 3px; font-style: italic; line-height: 120%">Qualcosa o quello che vuoi~</div></td>
</tr>
<tr>
<td colspan="2" align="center"><div style="background: #f3a061; height: 60px">
</div></td>
</tr>
</table>
Ho unito le due colonne della seconda riga, e la terza colonna delle 2 due righe.
Quindi c'è un colspan="2" e un rowspan="2".
Edited by -spiker - 16/11/2011, 18:45.
ABC del HTML♥ {secondo -spiki}per realizzare codici, firme e molto altro. |
Web