-
. F r e e .
| .
|
|
|
|
Te l'ho un pò ordinato così, le prime volte, ci si confonde di meno tra una misura e l'altra =)
Ecco il codice:
CODICE .mback {height: 56px; border-bottom: 1px solid #ADBAC6; background-image: none}
.mback_center {background-image: url(http://img251.imageshack.us/img251/4302/mbackcenter.png); background-repeat: repeat-x; background-position: bottom}
.mback_left {width: 108px; background-image: url(http://img835.imageshack.us/img835/4402/mbackleftg.png); background-repeat: no-repeat; background-position: bottom}
.mleft_top {width: 9px; background-image: url(http://img651.imageshack.us/img651/9438/mleft.png); background-repeat: no-repeat; background-position: bottom}
.mleft, .sep_left {width: 9px; background-image: url(http://img59.imageshack.us/img59/453/mseptleft.png); background-repeat: repeat-y}
.mleft_bottom {width: 9px; background-image: url(http://img829.imageshack.us/img829/3028/mrighbot.png); background-repeat: no-repeat}
.mback_right {width: 99px; height: 58px; background-image: url(http://img709.imageshack.us/img709/6536/mbackrightq.png); background-repeat: no-repeat; background-position: bottom}
.mright_top {width: 11px; height: 56px; background-image: url(http://img64.imageshack.us/img64/9186/mrightbo.png); background-repeat: repeat-y; background-position: bottom}
.mright, .sep_right {width: 11px; background-image: url(http://img835.imageshack.us/img835/5002/mseptright.png); background-repeat: repeat-y}
.mright_bottom {width: 11px; background-image: url(http://img339.imageshack.us/img339/7636/mleftbot.png); background-repeat: no-repeat}
.msub {height: 30px; font-size: 3px}
.msub_left {height: 29px; width: 108px; background-image: url(http://img251.imageshack.us/img251/1585/msubleftu.png); background-repeat: no-repeat}
.msub_center {background-image: url(http://img26.imageshack.us/img26/2731/msubcenter.png); background-repeat: repeat-x}
.msub_right {width: 99px; height: 30px; background-image: url(http://img823.imageshack.us/img823/4429/msubright.png); background-repeat: no-repeat}
Gli errori erano:
L'altezza del .mback era di 25px, quando in realtà dovrebbe seguire quella dell'immagine ossia 56px (secondo quelle che hai usato come .mback_left e .mback_center).
L'immagine che hai usato come .mback_right però ha un'altezza di 58px (per visualizzare la skin correttamente le immagini dell'.mback devono avere tutte la stessa altezza >> qui è spiegato meglio).
Nel .mleft_top e .mright_top ci va un background-repeat: no-repeat. In .mleft, .sep_left; in .mleft_bottom; in .mright, .sep_right e in .mright_bottom ti conviene specificare la width.
Infine il .mright_bottom e il .mleft_bottom devono avere la stessa altezza delle immagini che hai messo come .sub (gli errori qua erano che avevi specificato un'altezza di 3px nel selettore .msub // e un'altezza di 29px nel selettore .msub_right).
Nei selettori .mleft, .sep_left e .mright, .sep_right ci va un background-repeat: repeat-y (inoltre il background-repeat: repeat-none non esiste come scrittura). E nei selettori .mleft_bottom e .mright_bottom ci va un background-repeat: no-repeat).
Se adesso si vede male è perchè alcune immagini sono tagliate in maniera errata (per esempio il .mright, .sep_right e il .mleft_top).
Visto che sei alle prime armi ti consiglio di dare un'occhiata al nostro Skinning for Dummies dove insegna tutti i passaggi per creare una skin più qualche utile trucco per non incappare in questi errori ^^
|
|
|
| .
|
2 replies since 30/8/2010, 12:42 52 views
.
.
