Virgonc design - G-Portál

AJÁNLOM AZ OLDALT

Blog-Frissítések-Főoldal

Archívum - 2015.

vízszintes menü3

Bővebben >>

2015.03.28. 20:07, virgonc

Mit szólsz hozzá?

vízszintes menü saját képpel

Bővebben >>

2015.03.28. 20:03, virgonc

Mit szólsz hozzá?

vízszintes menü3

Bővebben >>

2015.03.28. 19:42, virgonc

Mit szólsz hozzá?

ha az egérrel rámész a kódra az egér kimásolja kódja

Bővebben >>

2015.03.28. 19:32, virgonc

Mit szólsz hozzá?

- E ora personalizziamo questo codice base

Inseriamo i parametri base delle table, aggiungiamo quelli per per il bordo esterno
e il font, quindi nei tag delle celle i parametri per il bordo e lo sfondo

<table style="border:3px dotted #9bc5f1; text-align: center; font-family:Tahoma; font-size: 12px; color: #72aae6;margin-left:auto; margin-right:auto;" cellpadding="2" cellspacing="2" width="400">
<tr>
<td style="border:1px solid #9bc5f1;" bgcolor="#eef5fc">Testo</td>
</tr>
<tr>
<td style="border:1px solid #9bc5f1;" bgcolor="#eef5fc" height="70"> Testo</td>
</tr>
<tr>
<td style="border:1px solid #9bc5f1;" bgcolor="#eef5fc">Testo</td>
</tr>
</table>

- Il risultato...

Pensieri...

E qui possiamo scrivere una poesia... una frase a cui siamo
affezionati... una frase scorrevole con il marquee o uno script

Penelope ♥

⇜ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ⇝

diamo uno style al bordo e coloriamo un po' la nostra table...

<table style="background-image:url('images/002.gif'); border:1px solid #ffb7dd; text-align: center; font-family:Tahoma; font-size: 12px; color: #fa96cf; margin-left:auto;margin-right:auto;" cellpadding="84" cellspacing="8" width="400">
<tr>
<td colspan="2" style="border:1px solid #ffb7dd" bgcolor="#fff0f8">Testo</td>
</tr>
<tr>
<td style="border:1px solid #ffb7dd" bgcolor="#fff0f8" width="100">Testo</td>
<td style="border:1px solid #ffb7dd" bgcolor="#fff0f8" width="265">Testo</td>
</tr>
</table>

- Ecco qui...

Titolo box
Spazio gif	..News!

- Ora possiamo inserire una giffetta nella cella piccolina e scrivere le nostre news,

- Ecco come trasformeremo il codice

<table style="background-image:url('images/002.gif'); border:1px solid #ffb7dd; text-align: center; font-family:Tahoma; font-size: 12px; color: #fa96cf; margin-left:auto;margin-right:auto;" cellpadding="8" cellspacing="8" width="400">
<tr>
<td colspan="2" style="border:1px solid #ffb7dd" bgcolor="#fff0f8"><strong>:: News e aggiornamenti ::..</strong></td>
</tr>
<tr>
<td style="border:1px solid #ffb7dd" bgcolor="#fff0f8" width="100"><img border="0" src="images/1228oa6.gif" width="60" height="141" alt="Spero ti sia utile questa guida^^"></td>
<td style="border:1px solid #ffb7dd" bgcolor="#fff0f8" width="265">
<div style="width:265px; height:140px; overflow-y: scroll">
TESTO NEWS
</div></td>
</tr>
</table>

* La nostra table news bella pronta da mettere al lavoro!
- Non ho colorato lo scroll tanto sarebbe visibile solo con IE -

:: News e aggiornamenti ::..

Ecco qui una bella table news per....
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...

⇜ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ⇝

Possiamo realizzare dei box molto elaborati utilizzando più table, una dentro un'altra...

Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla

Penelope ♥

- Ecco il box visto con tutti i bordi delle table colorati

Penelope ♥

- Ecco come realizzarne il codice

<table style="border:2px solid #ffb3ca; margin-left:auto;margin-right:auto; text-align:center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="320">
<tr>
<td style="background-image:url('url immagine')" height="50"> </td>
</tr>
<tr>
<td><table style="border:0px; margin-left:auto;margin-right:auto; text-align:center" cellpadding="0" cellspacing="0" width="80%">
<tr>
<td width="52"> <img border="0" src="images/th_can111.gif" width="52" height="103"></td>
<td style="text-align:center; font-family:Palatino Linotype; font-size: 10pt; color: #ffb3ca">
<div style="width:200px; height:110px; overflow-y: scroll;
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#ffb3ca;
scrollbar-darkshadow-color :#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffb3ca;
scrollbar-shadow-color:#ffb3ca;
scrollbar-track-color:#ffffff">
TESTO QUI</div></td>
</tr>
</table></td>
</tr>
<tr>
<td style="text-align:center; font-family:Palatino Linotype; font-size: 8pt; color: #ffb3ca"><img border="0" src="images/325.gif" width="290" height="7" alt=""><br><br>Tuo nik</td>
</tr>
</table>

TABLE

Prima table

Seconda table

⇜ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ⇝

Un uso molto diffuso delle table sono sicuramente i menu, molto comodi per agevolare
la navigazione in uno spazio web, oltre che renderne l'aspetto elegante e ordinato^^

- Qualche esempio molto semplice da realizzare

Box menu 1

:: Link ::

Box menu 2

:: Link ::
:: Link ::
:: Link ::
:: Link ::

Box menu 3

:: Link ::
:: Link ::
:: Link ::
:: Link ::

# Clicca qui per vedere e prelevare i codici utilizzati

CODICE BOX MENU 1

<table style="border:1px solid #960a10; margin-left:auto;margin-right:auto;" cellpadding="0" cellspacing="3" width="140">
<tr>
<td style="border:1px solid #960a10" align="center">:: Link ::</td>
</tr>
<tr>
<td style="border:1px solid #960a10" align="center">:: Link ::</td>
</tr>
<tr>
<td style="border:1px solid #960a10" align="center">:: Link ::</td>
</tr>
<tr>
<td style="border:1px solid #960a10" align="center">:: Link ::</td>
</tr>
</table>

Preleva il codice qui se può farti comodo

CODICE BOX MENU 2

<table style="border:3px dotted #6b770f; margin-left:auto;margin-right:auto;" cellpadding="3" cellspacing="3" width="140">
<tr>
<td style="border:1px solid #6b770f" width="140" align="center">
:: Link ::<br>
:: Link ::<br>
:: Link ::<br>
:: Link ::</td>
</tr>
</table>

Preleva il codice qui se può farti comodo

CODICE BOX MENU 3

<table style="border:0px; margin-left:auto;margin-right:auto; text-align:center; font-family:Palatino Linotype; font-size: 10pt; color: #c578e0" cellpadding="3" cellspacing="3" width="140">
<tr>
<td style="border:0px" bgcolor="#f3e0fa">Menu</td>
</tr>
<tr>
<td style="border:1px dotted #c578e0; border-top:0px">
:: Link ::<br>
:: Link ::<br>
:: Link ::<br>
:: Link ::</td>
</tr>
</table>

Preleva il codice qui se può farti comodo

Largo alla fantasia amici, ci sono un mare di script da utilizzare e realizzare dei bellissimi lavori ^_^

Bővebben >>

2015.03.28. 19:28, virgonc

Mit szólsz hozzá?

Oldal tetejére