-
.Benvenuti a questa nuova lezione dello Skinnin for Dummies dove approfondiremo dei selettori particolarmente ostici, ossia il .mainbg e i suoi diversi componenti.
Come già detto nella seconda lezione:CITAZIONE (Mezmerized @ 17/6/2009, 15:18)la funzione del .mainbg è quella di fare da sfondo ultimo alle nostre sezioni. Solitamente nelle skin complete viene visualizzato come il bordo che racchiude e divide le varie parti come .aa etc.
Ma esistono altri selettori che svolgono un compito molto simile a quello del .mainbg e sono:
.main1: è lo sfondo ultimo al .title, ricopre tutta la sua lunghezza mentre l'altezza può essere stabilita a proprio piacimento. E' allo stesso livello del .main4.
.main2: è lo sfondo inferiore al .title, ricopre la parte sinistra del .main1. E' inoltre inferiore di livello al .main3, al .main5 e al .main6; é superiore al .main1.
.main3: è lo sfondo inferiore al .title, ricopre la parte destra del .main1. E' inoltre inferiore di livello al .main5 e al .main6; é superiore al .main1 e al .main2.
.main4: è lo sfondo ultimo al .foot, ricopre tutta la sua lunghezza mentre l'altezza può essere stabilita a proprio piacimento. E' allo stesso livello del .main1.
.main5: è lo sfondo inferiore al .foot, ricopre la parte sinistra del .main4. E' inoltre inferiore di livello al .main6; é superiore al .main4, al .main2 e al .main3.
.main6: è lo sfondo inferiore al .foot, ricopre la parte destra del .main4. E' inoltre superiore al .main4, al .main5, al .main2 e al .main3.
Ecco una animazione che vi permetterà di capire meglio le posizioni di questi .main:
Importante! Ricordatevi che il .mainbg rimarrà sempre come sfondo ultimo di tutti questi selettori. Ciò con un pò di pratica vi permetterà di creare diversi e complessi effetti.
Affinchè questi selettori si possano visualizzare correttamente, bisogna togliere qualunque sfondo (vietati quindi background-image e background-color) al .title così come al .foot impostando solo l'altezza e gli altri parametri essenziali:.title {height: XXpx; font-size: XXpt; font-weight: bold; color: #HEX}
.foot {height: XXpx; font-size: XXpt; font-weight: bold; color: #HEX}
Fatto ciò si può passare alla personalizzazione dei vari .main:.main1 {background-image: url(IMMAGINE); background-repeat: repeat-x; background-position: top}
.main2 {background-image: url(IMMAGINE); background-repeat: no-repeat; background-position: left top}
.main3 {background-image: url(IMMAGINE); background-repeat: no-repeat; background-position: right top}
.main4 {background-image: url(IMMAGINE); background-repeat: repeat-x; background-position: bottom}
.main5 {background-image: url(IMMAGINE); background-repeat: no-repeat; background-position: left bottom}
.main6 {background-image: url(IMMAGINE); background-repeat: no-repeat; background-position: right bottom}
. -
Shalentir .
User deleted
O_O ma perchè se modifico l'altezza al main1 mi cambia l'altezza della barra?? O_O Cioè il title diventa dell'altezza che voglio? Però la barra sale su e le sezioni rimangono in basso, confondendosi con le statistiche... . -
.
Scusa se rispondo solo adesso xD
Bisogna specificare solo l'altezza del .title e in base a quella dopo costruisci il tuo .main1 (tenendo conto che devi aumentare la altezza di quest'ultimo di due pixel - graficamente parlando - ) =). -
Shalentir .
User deleted
umm....ma perchè l'altezza del title non mi scende sotto i 20 px? . -
Dadz .
User deleted
In realtà, sebbene la guida sia chiara e semplice per i principianti, è parzialmente errata. I vari .main* possono essere usati per realizzare .title fantasiosi, ma in realtà il loro html, nelle sezioni, è questo: HTML<td class="mainbg"><div class="main1"><div class="main2"><div class="main3"><div class="main4"><div class="main5"><table class="main6">
title e le sezioni
</table></div></div></div></div></div></td>
Pertanto quel trick utilizza gli sfondi, ma non possono essere applicate altre proprietà come altezze e larghezze, dato che esse avrebbero effetto in tutto il blocco, che contiene anche le varie sezioni. Spero sia più chiaro per quelli che si chiedono: perchè non mi funziona.
. -
.
C'hai ragione Dadz, forse ho sbagliato a renderlo così semplificato però l'ho voluto incentrare sul .title e .foot anche per rendere più "tangibile" il loro utilizzo ^^
Comunque grazie mille per l'intervento, sarà sicuramente utile per rispondere a dubbi/problemi oltre a definire meglio la loro disposizione =). -
Shalentir .
User deleted
CITAZIONE (Shalentir @ 18/6/2010, 18:53)umm....ma perchè l'altezza del title non mi scende sotto i 20 px?
. -
Dadz .
User deleted
Perchè quello spazio è occupato da padding, line-height e dallo stesso testo (nonchè da una immagine invisibile che sta nella prima cella). . -
Shalentir .
User deleted
e posso, in qualche modo portarlo a 14, o mi conviene rifare l'immagine?
. -
Luke Estasi .
User deleted
Non riesco a capire dove stia il problema °°"
http://lukeestasi.skin.marie.blogfree.net/CODICE/* SEZIONI FORUM */
.skin_tbl_border, .mainbg {background: #CCC}
.title, .title2, .row2 {height: 21px; text-transform: uppercase; color: #7C9438; text-shadow: 1px 1px 0 #9BDB4A}
.foot {height: 2px}
.main1 {background: url(http://digilander.libero.it/LukeEstasi/Skin/Marie/main1.gif) repeat-x}
.main2 {background: url(http://digilander.libero.it/LukeEstasi/Skin/Marie/main2.gif) no-repeat left}
.main3 {background: url(http://digilander.libero.it/LukeEstasi/Skin/Marie/main3.gif) no-repeat right}
.main4 {background: url(http://digilander.libero.it/LukeEstasi/Skin/Marie/main4.gif) repeat-x}
.main5 {background: url(http://digilander.libero.it/LukeEstasi/Skin/Marie/main5.gif) no-repeat left}
.main6 {background: url(http://digilander.libero.it/LukeEstasi/Skin/Marie/main6.gif) no-repeat right}
.ww, .xx, .yy, .zz, .aa, .bb, .cc {background: #EAEAEA; border: 2px solid #FFF; border-bottom: 0}
.web a:link, .web a:visited {font-size: 8.5pt; font-weight: bold; line-height: 150%; color: #64B0F5}
.web a:hover {font-size: 8.5pt; font-weight: bold; line-height: 150%; color: #64B0F5; border-bottom: 1px dashed yellow; background: url(http://www.famfamfam.com/lab/icons/silk/icons/bullet_yellow.png) right no-repeat; padding-right: 15px}
.desc {font-size: 10px; color: #666}
.board .foot {height: 2px}. -
Niruh .
User deleted
I punti e virgola e gli attributi sono importanti CODICE.skin_tbl_border, .mainbg {background: #CCC}
.title, .title2, .row2 {height: 21px; text-transform: uppercase; color: #7C9438; text-shadow: 1px 1px 0 #9BDB4A}
.foot {height: 2px}
.main1 {background-image: url(http://digilander.libero.it/LukeEstasi/Skin/Marie/main1.gif); background-repeat: repeat-x; background-position: top}
.main2 {background-image: url(http://digilander.libero.it/LukeEstasi/Skin/Marie/main2.gif); background-repeat: no-repeat; background-position: left top}
.main3 {background-image: url(http://digilander.libero.it/LukeEstasi/Skin/Marie/main3.gif); background-repeat: no-repeat; background-position: right top}
.main4 {background-image: url(http://digilander.libero.it/LukeEstasi/Skin/Marie/main4.gif); background-repeat: repeat-x; background-position: bottom}
.main5 {background-image: url(http://digilander.libero.it/LukeEstasi/Skin/Marie/main5.gif); background-repeat: no-repeat; background-position:left bottom}
.main6 {background-image: url(http://digilander.libero.it/LukeEstasi/Skin/Marie/main6.gif); background-repeat: no-repeat; background-position:right bottom}
.ww, .xx, .yy, .zz, .aa, .bb, .cc {background: #EAEAEA; border: 2px solid #FFF; border-bottom: 0}
.web a:link, .web a:visited {font-size: 8.5pt; font-weight: bold; line-height: 150%; color: #64B0F5}
.web a:hover {font-size: 8.5pt; font-weight: bold; line-height: 150%; color: #64B0F5; border-bottom: 1px dashed yellow; background: url(http://www.famfamfam.com/lab/icons/silk/icons/bullet_yellow.png) right no-repeat; padding-right: 15px}
.desc {font-size: 10px; color: #666}
.board .foot {height: 2px}
. -
Luke Estasi .
User deleted
Aaaaaaaah io semplifico sempre il codice così >.<
Grazie mille, hai anche riscritto tutto il codice ♥ ^O^.
Skinning For Dummies [lezione 8]Professional Mainbg |
