div

Mattepuffo's logo
Posizionare un DIV al centro assoluto della pagina

Posizionare un DIV al centro assoluto della pagina

Questa operazione a rigor di logica è facile, da applicare non lo è sempre e spesso ci si impicca.
Vediamo se riusciamo a spiegarlo in maniera facile
Partiamo da una pagina HTML di base:


<html>
 <head>
  <title>Centro Assoluto del DIV</title>
  <link media="screen" rel="stylesheet" href="style.css" />
 </head>
 <body>
  <div id="top"></div>
  <div id="centroassoluto">
   IL TUO CONTENUTO
  </div>
 </body>
</html>


Il div centroassoluto è quello da posizionare a centro pagina.

Mattepuffo's logo
Ridimensionare le immagini con i CSS

Ridimensionare le immagini con i CSS

In genere, quado si mette su un sistema di upload, si fa anche in modo che le immagini vengano ridimensionate durante il caricamento.
Questa soluzione potrebbe, però, non essere abbastanza flessibile per tutti i casi.
Potremmo anche far caricare l'immagine per intero e poi simulare un cripping con i CSS.
Così facendo mostreremo solo la parte della foto che ci interessa, ma l'immagine sarà sempre disponibile per intero.
Cominciamo con la parte HTML:


<div class="cornice-foto">
  <img src="immagine.jpg" alt="Immagine croppata" />
</div>


Codice basilare.

Mattepuffo's logo
Lista orizzontale centrata con i CSS

Lista orizzontale centrata con i CSS

Dopo vari tentativi e guide seguite sono riuscito finalmente ad ottenere quello che volevo: una lista orizzontale centrata dentro a un div.

Cominciamo dall'HTML:

<div id="menu-ita">
<ul>
<li><a href="index.php?lang=it">Home</a></li>
<li><a href="storia.php?lang=it">Storia</a></li>
<li><a href="collezioni.php?lang=it">Collezioni</a></li>
<li><a href="pv.php?lang=it">Punti vendita</a></li>
<li><a href="contatti.php?lang=it">Contatti</a></li>
<li><a href="contatti.php?lang=it">Registrati</a></li>
<li><a href="backstage.php?lang=it">Backstage</a></li>
</ul>

</div>

L'esempio ve lo prendo direttamente da un sito che mi è stato commissionato e che sta per essere messo online.

Come vedete ho un div con dentro una lista non ordinata; ogni voce della lista è un link.

In sostanza è un classico menu orizzontale.