Tag: css

Il posizionamento dei blocchi con html e css

Torniamo sull’argomento del posizionamento dei blocchi <div> in una pagina html, perché è particolarmente sentito. Una volta un layout veniva disegnato facendo ricorso alle tabelle. Adesso con i css tutto è diventato estremamente più potente ed abbiamo strumenti prima assolutamente impensabili. Peccato che con le tabelle tutto fosse anche assolutamente semplice. Oggi, volete due blocchi con la stessa altezza ed allineati orizzontalmente e sotto di essi altri due con le stesse caratteristiche? Benvenuti all’inferno.

Ci è stato insegnato che i <div> sono elementi che per default si posizionano verticalmente così come i <p>, <ul> ecc. e quindi se vogliamo un immagine affiancata ad un altro blocco possiamo, per esempio, utilizzare la proprietà float: per posizionare l’immagine.

Quindi pensiamo di posizionare nella pagina un’immagine afiancata dalla sua descrizione e in una riga successiva un’altra immagine anch’essa affiancata dalla propria descrizione.

Media Queries (Cosa sono e come si usano)

Abbiamo parlato recentemente nell’articolo intitolato “Il Responsive design” della tendenza ormai diventata necessità di tener conto del tipo di dispositivo che l’utente di un sito web utilizza.

L’esplosione dei dispositivi mobili come tablets e soprattutto smartphones impone al web designer di prevedere un layout fruibile da questi dispositivi e, come abbiamo visto, non solo il layout, ma anche i contenuti possono essere in qualche modo differenti (classico l’esempio di Microsoft che è alquanto inutile che proponga il download di service pack, patch e programmi vari per computers a chi si è collegato da uno smartphone).

In quell’articolo abbiamo fatto cenno alla metodologia che oggi permette agli sviluppatori di differenziare il modo di presentare il sito web a seconda del dispositivo usato dall’utente senza dover sviluppare più volte il sito in formati differenti, cosa che rendebbe complicatissimi aggiornamenti ed ordinaria amministrazione, oltre a non mettere al riparo dai progressi della tecnologia. La metodologia è quella basata sull’utilizzo di delle ‘media queries’ nei fogli di stile CSS.

In questo articolo vogliamo quindi affrontare in dettaglio cosa sono e come si usano le media queries.

Continua a leggere…

Lezione 40: Costruiamo un template (Conclusione)

Impariamo a costruire un sito Web

Lezione 40: Costruiamo un template (Conclusione)

Terminiamo la costruzione del nostro template di esempio descrivendo la seconda riga di contenuto ed il footer.

Nell apagina html, come abbiamo visto, il codice sarà:

<div class="ww_contenuto_row">
  <div class="ww_box_content_row">
    <div class="ww_contenuto_item-1" style="width:270px; margin:15px 10px 0 35px; float:left;">
      <ul>
        <li><a href="#">Le ultime notizie da Stintino</a></li>
        <li><a href="#">Il Meteo di Stintino</a></li>
        <li><a href="#">Numeri Utili per i turisti</a></li>
      </ul>
    </div>
    <div class="ww_contenuto_item-1" style="width:400px; margin:5px 5px 0 0"">
      <blockquote style="margin: 10px 0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt condimentum dolor vel fringilla. Vestibulum eros tellus, laoreet nec malesuada a, luctus id velit. Sed at eros eget enim interdum cursus nec interdum ligula. Nunc sed interdum odio. Nulla accumsan, dolor quis fermentum mattis, metus sapien cursus dolor, quis varius felis lacus at metus. Suspendisse venenatis nunc eu dui fermentum luctus.
      </blockquote>
    </div>
  </div>
</div>

 
Continua a leggere…

Lezione 39: Costruiamo un template (Parte 9^)

Impariamo a costruire un sito Web

Lezione 39: Costruiamo un template (Parte 9^)

Per terminare la costruzione del nostro template di esempio manca la descrizione della parte del contenuto ed infine del footer.

Riprendiamo quello che avevamo definito nella lezione 37 come scheletro del corpo centrale del nostro template:

<div class="ww_corpo_wrapper">
    <div class="ww_corpo_row">
      <div class="ww_corpo_cell ww_sidebar1"> ... </div>
      <div class="ww_corpo_cell ww_contenuto"> ... </div>
    </div>
</div>

Continua a leggere…

Lezione 38: Costruiamo un template (Parte 8^)

Impariamo a costruire un sito Web

Lezione 38: Costruiamo un template (Parte 8^)

Per terminare la descrizione della nostra sidebar occorre vedere in dettaglio il contenuto dei blocchi che noi abbiamo inserito nel nostro esempio. Naturalmente si possono mettere quanti blocchi si vuole ed il contenuto andrà deciso in funzione del vostro web site.
Qualcuno per esempio vuole mettere il menu in verticale in un blocco della sidebar, oppure richiami ad altre pagine in evidenza ecc. Noi abbiamo inserito un blocco per il login/registrazione degli utenti ed un altro blocco per la ricerca su Google.
Continua a leggere…

Lezione 37: Costruiamo un template (Parte 7^)

Impariamo a costruire un sito Web

Lezione 37: Costruiamo un template (Parte 7^)

Terminato il menu ci occupiamo adesso del corpo della nostra pagina web. Il corpo che è tutto ciò che sta tra la header ed il footer (vedi l’immagine fornita a proposito alla lezione 31) lo includiamo in un blocco contenitore entro al quale inseriremo la sidebar ed il contenuto. Il codice html è:

<div class="ww_corpo_wrapper">
  <div class="ww_corpo_row">
    <div class="ww_corpo_cell ww_sidebar1"> ... </div>
    <div class="ww_corpo_cell ww_contenuto"> ... </div>
  </div>
</div>

Continua a leggere…

Lezione 36: Costruiamo un template (Parte 6^): Il Menu

Impariamo a costruire un sito Web

Lezione 36: Costruiamo un template (Parte 6^)

Terminiamo con questa lezione la costruzione del nostro menu. Continuiamo con le definizioni necessarie per stilizzare il secondo livello di menu.

Cominciamo con inserire nel CSS le caratteristiche della lista di secondo livello:

#nav ul {
  background: #edf2f6;
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 35px;
  left: 0;
  border: solid 1px #B4B4B4;
  border-radius: 3px;
  box-shadow: 0 1px 3px #B4B4B4;
}

 
Continua a leggere…