immagine avatar

Ciao come puoi notare ho dato una bella rinfrescatina al mio blog!
Attendo un tuo feedback, per suggerimenti e ulteriori proposte di miglioramento, ma anche, sperando che non ci siano, segnalazioni di errori o malfunzionamenti del blog. Buona lettura!

Creare una lista a due colonne: fissa + liquida

di MaiNick | 18 Dic 2009 | CSS, Webdesign | Commenta per primo
column-liquid.jpg

Questo tutorial risolverà la maggior parte dei problemi CSS che si hanno in generale quando si vuole realizzare un effetto come da titolo: una lista a due colonne di cui la prima di larghezza fissa e la seconda che occupa tutta la parte rimanente nel browser.

Si crea prima la lista, di cui ogni elemento è costituito da due div che rappresenteranno le colonne.
Il primo div sarà la colonna fissa, che, secondo l’esempio qui riportato, conterrà un’immagine e la sua didascalia. Il secondo div rappresenterà la colonna liquida, permettendo al contenuto di essere flessibilein larghezza – in base alla risoluzione del browser.

Ecco il codice html dell’esempio:

<ul class="column">
  <li>
    <div class="imgblock">
      <img src="http://upload.wikimedia.org/wikipedia/it/b/bc/Wiki.png" alt="" />
    </div>
    <div class="detail">
      <h2>Cosa è Wikipedia</h2>
      <p>Wikipedia è un'enciclopedia multilingue liberamente consultabile sul Web, fondata sulla certezza che ciascuno possiede delle conoscenze che può condividere con gli altri. L'ambizioso progetto, che prende il via il 15 gennaio 2001 in lingua inglese, nell'arco di soli quattro mesi ha visto nascere altre 13 edizioni, tra cui quella in italiano.</p>
    </div>
  </li>
</ul>

Diamo uno stile alla lista tramite codice CSS:

ul.column {
  float: left;
  width: 100%;
  margin: 10px 0;
  padding: 0;
  border-top: 1px solid #ddd;
  font-size: 1.2em;
  list-style: none;
}
ul.column li {
  float: left;
  width: 100%;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  background: #f0f0f0;
}

Il seguente è il codice CSS che rende l’effetto:

ul.column li .imgblock {
  float: left;
  width: 150px;
  padding: 0 10px;
  font-weight: bold;
  text-align: center;
}
ul.column li .imgblock img {
  margin-bottom: 5px;
  padding: 5px;
  border: 1px solid #ccc;
  background: #fff;
}
ul.column li .detail{
  padding-left: 170px;
}

specifichiamo una larghezza fissa per il primo div, quindi per la prima colonna, e niente alla seconda in modo che sia larga quando tutto la finestra del browser (width: 100%).
Dunque il testo si adatterà per tutto lo spazio di destra, dando, nello stesso momento, spazio alla prima colonna a sinistra.

Tags: ,

Lascia un Commento

^ Torna su