[Tutorial] Container con barre laterali

« Older   Newer »
  Share  
~shadow~
view post Posted on 28/6/2009, 13:43




Esempio di container con barre laterali: http://yesterdayafternooskin.forumcommunity.net/

E' la tabella dietro al forum che lo racchiude da due lati: destra e sinistra.
Le immagini da creare sono quindi due:
barra destra image e barra sinistra image

In gestione codice HTML, in cima al forum, dovete inserire questo codice:
CODICE
<div id="container">
<div id="contentleft">
<div id="contentright">


In gestione codice HTML, in fondo al forum, dovete inserire questo codice:
CODICE
</div></div></div>


In modifica colori e stili, dovete aggiungere questo:
CODICE
/* CONTAINER */
#container {background-color: #COLORE; margin-left: auto; margin-right: auto; width: XX%}
#contentleft {background: url(URL BARRA SINISTRA) left repeat-y}
#contentright {background: url(URL BARRA DESTRA) right repeat-y}

alla voce "width", al posto delle XX, dovete mettere la percentuale della larghezza del container.

Se all'interno delle due barre anziché un colore di sfondo volete mettere un'immagine, dovete sostituire questa parte di CSS:
CODICE
#container {background-color: #COLORE; margin-left: auto; margin-right: auto; width: XX%}

con questa:
CODICE
#container {background: url(URL IMMAGINE); margin-left: auto; margin-right: auto; width: XX%}

alla voce "width", al posto delle XX, dovete mettere la percentuale della larghezza del container.
 
Top
view post Posted on 28/6/2009, 14:00

Senior Member

Group:
Member
Posts:
20,011
Location:
Bergamo

Status:


grazie <3 spesso preferisco questo che quello quadrato °_°
 
Top
~shadow~
view post Posted on 28/6/2009, 14:00




anch'io ^^
 
Top
Scandalous,
view post Posted on 28/6/2009, 14:17




Stavo per fare io il tutorial °A°
:riotflower:
 
Top
~shadow~
view post Posted on 28/6/2009, 14:54




io son stata più veloce, yesss :riot:
 
Top
°Spartano_Romano.!
view post Posted on 28/6/2009, 16:17




proprio oggi che mi serviva :asd:
 
Top
• erin;
view post Posted on 28/6/2009, 16:19




Che fiQo, grazie per il tutorial *_*
 
Top
~shadow~
view post Posted on 29/6/2009, 08:30




CITAZIONE (°Spartano_Romano.! @ 28/6/2009, 17:17)
proprio oggi che mi serviva :asd:

proprio oggi che ti serviva mi sono accorta che non c'era :asd:
 
Top
view post Posted on 4/8/2009, 21:12
Avatar

Valar Morghulis

Group:
I <3 Skinning!
Posts:
14,700
Location:
•Westeros~

Status:


Ho seguito tutte le istruzioni, però non mi compaiono le barre laterali ç_ç che c'è che non va??!?

CODICE
/* CONTAINER */
#container {background-color: #2F2F31; margin-left: auto; margin-right: auto; width: 80%}
#contentleft {background: http://i28.tinypic.com/14mrms2.jpg left repeat-y}
#contentright {background: http://i28.tinypic.com/2m6lmds.jpg right repeat-y}
 
Web  Top
~Requiem
view post Posted on 4/8/2009, 21:28




hai dimenticato le parentesi e parte del codice:
CODICE
/* CONTAINER */
#container {background-color: #2F2F31; margin-left: auto; margin-right: auto; width: 80%}
#contentleft {background: url(http://i28.tinypic.com/14mrms2.jpg) left repeat-y}
#contentright {background: url(http://i28.tinypic.com/2m6lmds.jpg) right repeat-y}
 
Top
view post Posted on 4/8/2009, 21:32
Avatar

Valar Morghulis

Group:
I <3 Skinning!
Posts:
14,700
Location:
•Westeros~

Status:


ç_ç ma che impedita!! Grazie!
 
Web  Top
~Requiem
view post Posted on 4/8/2009, 22:15




di nulla^^
 
Top
Selyn
view post Posted on 2/10/2009, 16:27




Stavo cercando un altro tutorial, ma il tuo mi ha illuminato e mi ha fatto capire senza bisogno di fare ricerche xD grazie mille!
 
Top
view post Posted on 2/10/2009, 20:37

aka exodus
Have a cigar!

Group:
Member
Posts:
186

Status:


Grazie, utilissimo.
Lo preferisco di gran lunga a quello quadrato. :fifi:
 
Top
13 replies since 28/6/2009, 13:43   1092 views
  Share