Lez.12 - Corso Avanzato Css

Layout Fluido - Layout Responsive

in un foglio di stile Css

Layout Fluido o Layout Responsive (che reagisce)

Con questa tipo di layout ogni singola pagina che compone il nostro sito si adatta alle dimensioni della finestra del nostro dispositivo.

Perciò, la grandezza della finestra del nostro dispositivo determina la larghezza della nostra pagina web.

La pagina si adatta alla larghezza del nostro dispositivo perché tutte le dimensioni degli elementi, che sono contenuti in essa, sono espresse in percentuali.

La larghezza della pagina reagisce in maniera proporzionale al variare della grandezza del dispositivo usato, perciò dobbiamo avere la massima attenzione a dare le giuste dimensioni, espresse in percentuali, ad ogni singolo contenitore e ad ogni singolo elemento contenuto in esso.

Può esserci di aiuto usare una grid system (sistema di griglia) considerando che la larghezza della pagina è il 100% possiamo dividere la pagina nelle numero di colonne che desideriamo e calcolare con precisione le percentuali da assegnare ad ogni singolo elemento.

E' bene fare tutti questi calcoli prima, in fase di progettazione della pagina, perché avendo queste misure a portata di mano sarà facile posizionare i nostri elementi nella pagina.
IMPORTANTE:
Per le immagini, per aver un lavoro fatto per bene, dobbiamo impostare una larghezza massima e una larghezza minima per avere sempre sotto controlla la dimensione dell'immagine.

Per fare questo dichiariamo:
max-width: 100%;
questa dichiarazione vuol dire che la larghezza massima dell'immagine sarà al massimo il 100% della grandezza del suo contenitore, quindi l'immagine non sarà mai più grande del suo contenitore.

Se vogliamo che l'immagine non sia troppo piccola quando l'utente stringe la finestra del browser, dichiariamo:
min-width: 50%;
questa dichiarazione vuol dire che la larghezza minima dell'immagine sarà sempre grande almeno quanto la metà del suo contenitore.
Un'altro metodo per controllare la larghezza, e quindi la grandezza, dell'immagine è quello di inserirla in un contenitore tutto suo il quale si può abbellire utilizzando dei bordi, delle cornici colorate oppure inserire una didascalia sotto l'immagine e tutto quello che la vostra fantasia e enventiva vi suggerisce.

Layout Fluido o Layout Responsive.

Il Codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Layout Fluido o Layout Responsive</title>
  <meta charset="utf-8">
  <style type="text/css">
    body {
	    background-color: #323232;
	    margin: 0;
    }
    #container {
	    width: 90%;
	    max-width: 960px;
	    margin: 0 auto;
	    background-color: #B8BAC6;
    }
    header {
	    background-color: darkseagreen;
	    padding: 6.25%;
    }
    nav {
	    background-color: #A6A29F;
	    padding: 16px;
	    text-align: center;
    }
    section {
	    background-color: white;
	    padding: 16px 6.25%;
	    width: 56.25%;
	    float: left;
    }
    section p {
	    text-align: justify;
    }
    section .fotonegozio {
	    margin-top: 50;
    }
    aside {
	    width: 18.75%;
	    float: right;
	    padding: 60px 6.25%;
    }
    footer {
	    background-color: darkseagreen;
	    text-align: right;
	    padding: 16px 6.25%;
	    clear: both;
    }
    .fotonegozio {
	    float: left;
	    margin-right: 5%;
	    min-width: 50%;
	    position: relative;
    }
    .fotonegozio img {
	    width: 100%;
	    border: 1px solid red;
    }
    .didascaliafotonegozio {
	    position: absolute;
	    top: 2%;;
	    left: 2%;
	    font-size: 70%;
	    font-style: italic;
    }
  </style>
 </head>
 <body>
  <div id="container">
	<header>
	    <h1>Layout Fluido o Layout Responsive</h1>
	</header>
	<nav>
		Link 1  |  Link 2  |  Link 3
	</nav>
	<section>
		<h2>Titolo della section</h2>
		<h3>Sottoto titolo 1 della section</h3>
	  <div class="fotonegozio">
	  
<!-- 200X200px.jpg è un file di dell'immagine di un negozio che ho sul mio computer. Voi usate il file di un'immagine a vostra scelta.-->
	<img src="200X200px.jpg" alt="Foto negozio 2">
		  <span class="didascaliafotonegozio">
		  	<strong>Foto negozio</strong>
			  <br>Scaffali negozio Lecce
		  </span>
	  </div>
		<p>Questo è un paragrafo che serve come contento della sezione. Questo è un paragrafo che serve come contento della sezione. Questo è un paragrafo che serve come contento della sezione. </p>
		<p>Questo è un paragrafo che serve come contento della sezione. Questo è un paragrafo che serve come contento della sezione. Questo è un paragrafo che serve come contento della sezione. Questo è un paragrafo che serve come contento della sezione.</p>
		<h3>Sottoto titolo 2 della section</h3>
		<p>Questo è un paragrafo che serve come contento della sezione. Questo è un paragrafo che serve come contento della sezione. Questo è un paragrafo che serve come contento della sezione. Questo è un paragrafo che serve come contento della sezione.</p>
	</section>
	<aside>
		<p>Testo di Aside.</p>
		<p>Testo di Aside.</p>
		<p>Testo di Aside.</p>
		<p>Testo di Aside.</p>
		<p>Testo di Aside.</p>
		<p>Testo di Aside.</p>
		<p>Testo di Aside.</p>
	 
	</aside>
	<footer>
		Questa pagina è stata realizzato da Antonio
	</footer>
  </div>
 </body>               
</html>