LAYUOT A 3 colonne per pagine personalizzata!

[Gelmo]

COME CREARE 3 COLONNE NELLA PAGINA PERSONALIZZATA CHE TROVATE qui

ci sono 2 modi:

1. Usare i CSS
2. Usare una semplice tabella di html

Usando i css

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%;
}

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:

Codice: Seleziona tutto

@import url("prova.css");

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..

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>

trovate Qui il contenuto e sotituiitelo con questo codice:

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>

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

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>

3. trovare Qui il contenuto sostituitelo con questo codice:

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>

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 !!