LAYUOT A 3 colonne per pagine personalizzata!
Inviato: 27/04/2009, 21:17
COME CREARE 3 COLONNE NELLA PAGINA PERSONALIZZATA CHE TROVATE qui
ci sono 2 modi:
la prima cosa da fare è questa. prendere questo codice e creare un nuovo documento ( con qualsiasi editor di testo ad es. blocconote). dunque. dopo aver creato il documento CSS ( ad ES. prova.css) [segue sotto la tabella del codice]
dunque dopo che avete creato questo foglio lo carica nella cartella tame del vostro stile. dopo di che aprite il file che si trova nella cartella teme e che si chiama stylesheet.css trovate l'ultima riga e ci aggiungete questa riga di codice:
fatto qeusto non ci resta che aprire il nostro file del template... io nell'esempio l'ho chiamato prova.html
trovate questa riga di codice..
trovate Qui il contenuto e sotituiitelo con questo codice:
e pi dovete sotituire i valori [contenuto della colonna destra nota ... contenuto della colonna sinsitra nota .... contenuto della colonna centrale. ..] con i costri scritti o tutto quello che volete!
Creazione di un Layout a 3 colonne con una tabella...
se non avete troppo tempo e voglia di sbattimenti troppo lunghi .. provate qesto metodo a parere mio meno bello ma piu veloce.. una semprlice tabella cosi decce fare??
1. si prende il file template nel nostro caso prova.html ( che noi abbiamo gia posizionato nella cartella template del nostro style)
2. si prende cerca la stessa zoa che stavamo cercando prima
3. trovare Qui il contenuto sostituitelo con questo codice:
come nel caso di prima si trova [Contentuto colla di sinistra..Contentuto colla di centrale...Contentuto colla di destra...e li si storituice con quello che si vuole !!
ci sono 2 modi:
- Usare i CSS
- Usare una semplice tabella di html
la prima cosa da fare è questa. prendere questo codice e creare un nuovo documento ( con qualsiasi editor di testo ad es. blocconote). dunque. dopo aver creato il documento CSS ( ad ES. prova.css) [segue sotto la tabella del codice]
Codice: Seleziona tutto
/* <!-- */
/* General styles */
/* 'widths' sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* holy grail 3 column settings */
.holygrail {
background:#CDEAFF; /* Right column background colour */
}
.holygrail .colmid {
float:left;
width:200%;
margin-left:-12em; /* Width of right column */
position:relative;
right:100%;
background:#fff; /* Centre column background colour */
}
.holygrail .colleft {
float:left;
width:100%;
margin-left:-50%;
position:relative;
left:24em; /* Left column width + right column width */
background:#cfc; /* Left column background colour */
}
.holygrail .col1wrap {
float:left;
width:50%;
position:relative;
right:12em; /* Width of left column */
padding-bottom:1em; /* Centre column bottom padding. Leave it out if it's zero */
}
.holygrail .col1 {
margin:0 13em; /* Centre column side padding:
Left padding = left column width + centre column left padding width
Right padding = right column width + centre column right padding width */
position:relative;
left:200%;
overflow:hidden;
}
.holygrail .col2 {
float:left;
float:right; /* This overrides the float:left above */
width:10em; /* Width of left column content (left column width minus left and right padding) */
position:relative;
right:1em; /* Width of the left-had side padding on the left column */
}
.holygrail .col3 {
float:left;
float:right; /* This overrides the float:left above */
width:10em; /* Width of right column content (right column width minus left and right padding) */
margin-right:3em; /* Width of right column right-hand padding + left column left and right padding */
position:relative;
left:50%;
}
/* --> */
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
.col1 {
width:100%;
}
Codice: Seleziona tutto
@import url("prova.css");trovate questa riga di codice..
Codice: Seleziona tutto
<div class="panel">
<div class="inner"><span class="corners-top"><span></span></span>
<div class="content">
<p>
Qui il contenuto
</p>
</div>
Codice: Seleziona tutto
<div class="colmask holygrail">
<div class="colmid">
<div class="colleft">
<div class="col1wrap">
<div class="col1"><!-- Column 1 start -->
contenuto della colonna Centrale <!-- Column 1 end --> </div>
</div>
<div class="col2">
<!-- Column 2 start -->contenuto della colonna sinistra nota èfissa al 21%<!-- Column 2 end -->
</div>
<div class="col3">
<!-- Column 3 start -->contenuto della colonna destra nota è fissa al 21%<!-- Column 3 end -->
</div>
</div>
</div>
</div>
Creazione di un Layout a 3 colonne con una tabella...
se non avete troppo tempo e voglia di sbattimenti troppo lunghi .. provate qesto metodo a parere mio meno bello ma piu veloce.. una semprlice tabella cosi decce fare??
1. si prende il file template nel nostro caso prova.html ( che noi abbiamo gia posizionato nella cartella template del nostro style)
2. si prende cerca la stessa zoa che stavamo cercando prima
Codice: Seleziona tutto
<div class="panel">
<div class="inner"><span class="corners-top"><span></span></span>
<div class="content">
<p>
Qui il contenuto
</p>
</div>
Codice: Seleziona tutto
<table style="text-align: left; width: 100%;" border="0"
cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td style="width: 21%;">Contentuto colla di sinistra</td>
<td>Contentuo collona centrale</td>
<td style="width: 21%;">Contenuto colonna di destra</td>
</tr>
</tbody>
</table>