ABC del HTML♥ {secondo -spiki}

« Older Newer »

-spiker

Posted on 15/11/2011, 14:44 by: -spiker

EVS

Group: Capa Suprema ♥

Posts: 32,168

Fama: +2

Status: Anonymous

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 esterno

SPOILER (clicca per visualizzare)

CODICE

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

Passo 3: Box Celeste
Solito discorso, va creato un div apposito.

Qualcosa o quello che vuoi~

SPOILER (clicca per visualizzare)

CODICE

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 »

SPOILER (clicca per visualizzare)

CODICE

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

Web

10 replies since 15/11/2011, 14:34 7917 views

ABC del HTML♥ {secondo -spiki}

per realizzare codici, firme e molto altro.