Container a Cornice #2
Oggi vi spiegherò come fare un altro tipo di container a cornice, a differenza di quello che già ho postato da moltissimo tempo, questo codice va inserito sia sul css che nell'html, tuttavia io lo preferisco di gran lunga.
Codice da
inserire in Modifica colori e Stili, posizionatelo dove volete:
CODICE
/*CONTAINER BY SY*/
#wrapper {background: #COLORE SFONDO;
border: 0;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width: 80%}
/*LATI CONTAINER*/
#leftborder {background-image: url(LINK - IMG LATO SINISTRO);
background-repeat: repeat-y; background-position: left}
#rightborder {background-image: url(LINK - IMG LATO DESTRO);
background-position: right; background-repeat: repeat-y}
#topborder {background-image: url(LINK - IMG LATO SUPERIORE/TOP);
background-position: top; background-repeat: repeat-x}
#bottomborder {background-image: url(LINK - IMG LATO INFERIORE/BOTTOM);
background-position: bottom; background-repeat: repeat-x}
/*ANGOLI DEL CONTAINER*/
#ang1 {background-image: url(LINK - ANGOLO SINISTRO IN ALTO);
background-position: left top; background-repeat: no-repeat}
#ang2 {background-image: url(LINK - ANGOLO DESTRO IN ALTO);
background-position: right top; background-repeat: no-repeat}
#ang3 {background-image: url(LINK - ANGOLO DESTRO IN BASSO);
background-position: right bottom; background-repeat: no-repeat}
#ang4 {background-image: url(LINK - ANGOLO SINISTRO IN BASSO);
background-position: left bottom; background-repeat: no-repeat}
Sostituite le immagini come è descritto all'interno del codice, se volete regolarne l'altezza vi basterà regolare nel "#wrapper" il "width: NUMERO%".
Infine passiamo all'HTML -
andate in codici html ed inserite questo
in cima al forum:
CODICE
<div id="wrapper"><div id="leftborder"><div id="rightborder"> <div id="topborder"><div id="bottomborder"><div id="ang1"><div id="ang2"><div id="ang3"><div id="ang4"><br>
Poi inserite
in fondo al forum, questo codice, che chiuderà tutti i div:
CODICE
</div></div></div></div></div></div></div></div></div>
