P1. Conoscere CSS - Esempio di layout Mobile-First

Ecco un esempio di documento formattato secondo l'approccio mobile first, un po più complesso del precedente. Gli oggetti progettati con il criterio mobile first sono solo quelli direttamente discendenti dal body e sono stati colorati al solo fine di evidenziarli.

Ecco la pagina con identica struttura ma senza i colori di background dei contenitori principali:

Esempio_3

P2. Riferimenti

Parte Prima

CSS 2.2

HTML 5.3

Parte_Terza

Contenuto:

Dopo aver strutturato "mobile-first" il layout della pagina posizionando i contenitori di primo livello secondo il layout desiderato, i contenitori stessi possono essere formattati al di fuori dell'approccio mobile first come se fossero documenti autonomi. L'unica accortezza da seguire è quella di utilizzare per eventuali dimensionamenti unita di misura percentuali o relative come nel paragrafo che segue.

goletta Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, leo ut eleifend pharetra, diam arcu consectetur lacus, dignissim ornare ex augue eget eros. Donec semper, metus at egestas condimentum, lorem nisl porttitor nisi, non dictum est ex vitae ex. Quisque aliquam vitae nisi et placerat. Nulla dapibus purus ac tellus hendrerit, vitae pellentesque ipsum scelerisque. Sed interdum tortor varius maximus tempor. manichino Etiam ac diam vel lectus rutrum convallis. Aenean sed elit lacus. Vestibulum quis condimentum ante. Nulla erat est, convallis et congue vel, auctor non augue.

P3

Il layout di questa pagina è stato realizzato in modalità Mobile-First.

Tutti i contenuti del documento sono stati inseriti in quattro contenitori, evidenziati da colori diversi (rosso, giallo, verde, arancio), che sullo schermo di un mobile, o comunque su uno schermo di larghezza inferiore a 800px, vengono disposti verticalmente uno dopo l'altro occupando tutto lo spazio disponibile. Su schermi di larghezza superiore a 800px i contenitori sono ancora disposti verticalmente, ma occupano solo l'80% dell'ampiezza dello schermo. Inoltre il secondo e terzo contenitore sono affiancati occupando rispettivamente il 30% e il 50% dell'ampiezza disponibile.

Tutti e quattro i contenitori sono posizionati in maniera relativa rispetto al body. Questo per poter utilizzare la property left.
Le aree gialla e verde sono flottanti. L'area arancio non è flottante ed inoltre resetta la property left ereditata dall'elemento che la precede.

In questo modo sia l'area gialla che quella verde possono ricevere contenuti crescendo in altezza. L'area arancio si sposterà senza sovrapporsi alle aree che la precedono.

Ecco il codice css del documento

body{
   font-size:10pt;
}
h1 {text-align:center;}
pre{
   background-color:black;
   color:white;
   font-family:sanserif;
   padding:1em;
}
/* Classi */
.button{
   display:inline;
   margin-right:1em;
}
.button a{
   background-color:lightgray; 
   border:1px solid green;
   border-radius:5px;
   line-height:2em;
   padding:5px;
}
.navBottom{
   background-color:lightgray;
   color:black;
   text-align:center;
}
.navTop{
   background-color:lightgray;
   color:black;
}
.navTop li{
text-align:left;
}
.navTop h2{
   left:2%;
   position:relative;
}
#d1{
   background-color:red; 
   height:15hv;
   position:relative;
}
#d2{background-color:yellow; position:relative;}
#d3{background-color:green; position:relative;}
#d4{background-color:orange; position:relative;}
#Logo{
   float:left;
   margin:0.5%;
   width:14hv;
}
#goletta{
  float:right; 
  padding:1%;
  width:50%;
}
#manichino{
   float:left;
   padding:1%;
   width:40%;
}
@media (min-width:800px){
   #d1{
      left:10%;
      font-size:12pt;
      width:80%;
   }
   #d2{
      clear:left;
      left:10%;
      float:left;
      font-size:12pt;
      width:30%;
   }
   #d3{
      left:10%;
      float:left;
      font-size:12pt;
      width:50%;
   }
   #d4{
      clear:left;
      left:10%;
      font-size:12pt;
      width:80%;
   }
}

P4