1 - 8 Novembre 2020 Coding Creativo 1

Lezione precedente: float e clear nei CSS

Layout con float

da Cristina | Nov 8, 2020 | CSS, Web

In questa lezione creiamo un layout utilizzando i float in modo da comprenderne meglio il funzionamento.

Fino a qualche anno fa i layout con i float erano ampiamente utilizzati e tutt’ora se ne continua a fare uso in molte strutture.

In particolar modo impareremo ad allineare gli elementi utilizzando float left e right e ad utilizzare correttamente l’elemento clearfix, necessario per ripulire da eventuali elementi flottanti a destra e a sinistra.

Layout di esempio con float

Di seguito il layout di esempio che andremo a sviluppare.

Quindi partiamo dalla struttura html del layout da realizzare utilizzando i float.

Abbiamo un elemento header, dove andremo ad inserire due div.

Al primo div, dove inseriamo l’immagine del logo, assegniamo un float left in modo da posizionarlo sulla sinistra. Mentre al secondo div assegniamo un float right per posizionarlo sul lato destro e all’interno inseriamo un elenco con il nostro menù di navigazione.

Dopo nel main creiamo due sezioni.

Nella prima sezione che caratterizza la colonna sinistra inseriamo del semplice testo e assegniamo un float left per allinearla a sinistra.

Anche alla seconda sezione assegniamo un float left per metterla a fianco della prima. All’interno inseriamo dei contenitori per l’immagine ed il testo a cui assegniamo sempre un float left per posizionarle affiancate.

Nel footer infine inseriamo semplicemente le informazioni per il copyright.

Ecco di seguito il codice html di esempio per creare il layout utilizzando i float:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Esempio di layout con i float</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <header>
      <div class="logo float-left">
         <img src="img/logo" alt="logo">
      </div>

      <div class="menu float-right">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Coding nelle scuole</a></li>
          <li><a href="">Giochi di coding</a></li>
        </ul>
      </div>
    </header>

    <main>
      <div class="col-left float-left">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatum magni minus ullam odio, excepturi accusantium. Autem eum recusandae vitae quisquam dolores, cupiditate, eaque molestiae dicta placeat cumque quaerat natus!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatum magni minus ullam odio, excepturi accusantium. Autem eum recusandae vitae quisquam dolores, cupiditate, eaque molestiae dicta placeat cumque quaerat natus!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatum magni minus ullam odio, excepturi accusantium. Autem eum recusandae vitae quisquam dolores, cupiditate, eaque molestiae dicta placeat cumque quaerat natus!</p>
      </div>

      <section class="main-section float-left"">
        <!-- prima scheda -->
        <div class="scheda">
          <div class="immagine float-left">
            <img src="img/primoprogramma-scratch.jpg" alt="scratch">
          </div>
          <div class="descrizione float-left">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias odio sint reprehenderit reiciendis aperiam aut debitis quam in distinctio officia, ratione dolores, maiores dignissimos, magnam soluta nihil, enim quo numquam.
          </div>
        </div>
        <!-- /prima scheda -->


        <!-- seconda scheda -->
        <div class="scheda">
          <div class="immagine float-left">
            <img src="img/primoprogramma-scratch.jpg" alt="scratch">
          </div>
          <div class="descrizione float-left">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias odio sint reprehenderit reiciendis aperiam aut debitis quam in distinctio officia, ratione dolores, maiores dignissimos, magnam soluta nihil, enim quo numquam.
          </div>
        </div>
        <!-- /seconda scheda -->

        <!-- terza scheda -->
        <div class="scheda">
          <div class="immagine float-left">
            <img src="https://www.codingcreativo.it/wp-content/uploads/2019/06/primoprogramma-scratch.jpg" alt="scratch">
          </div>
          <div class="descrizione float-left">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias odio sint reprehenderit reiciendis aperiam aut debitis quam in distinctio officia, ratione dolores, maiores dignissimos, magnam soluta nihil, enim quo numquam.
          </div>
        </div>
        <!-- /terza scheda -->

        <!-- quarta scheda -->
        <div class="scheda">
          <div class="immagine float-left">
            <img src="img/primoprogramma-scratch.jpg" alt="scratch">
          </div>
          <div class="descrizione float-left">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias odio sint reprehenderit reiciendis aperiam aut debitis quam in distinctio officia, ratione dolores, maiores dignissimos, magnam soluta nihil, enim quo numquam.
          </div>
        </div>
        <!-- /quarta scheda -->

      </section>
    </main>

    <footer>
      powered by Coding Creativo &hearts;
    </footer>

</body>
</html>

Nel css creiamo al solito le regole generali per togliere il margin ed il padding da qualsiasi elemento.

Dopo inseriamo le regole generali per le varie sezioni header, main e footer.

Inseriamo le classi per il float left e il float right.

Poi inseriamo le classi che servono ad effettuare il clearfix utilizzando lo pseudo-elemento ::after. Le utilizziamo su tutti gli elementi che contengono elementi flottanti.

Ecco di seguito il codice CSS per la creazione del nostro layout utilizzando la proprietà float.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body  {
  font-family: 'Verdana', sans-serif;
}

header {
  height: 90px;
  background-color: lightblue;
  line-height: 90px;
}

.logo img{
  vertical-align: middle;
  padding-left: 20px;
}

.float-left {
  float:left;
}

.float-right {
  float:right;
}

.menu ul {
  list-style: none;
  padding-right: 20px;
}

.menu ul li {
  display: inline-block;
  line-height: 50px;
  height: 50px;
}
.menu ul li:hover {
  background-color: white;
}

.menu ul li a{
  text-decoration: none;
  padding: 15px;
  color: rgb(8, 119, 129);
}

main {
  width: 960px;
  margin: auto;
  padding-top: 20px;
}

main::after {
  content: '';
  display: block;
  clear: both;
}

.col-left {
  width: 28%;
}

.col-left p {
  padding-top: 10px;
}

.main-section {
  width: 70%;
}

.scheda {
  padding: 10px;
}

.scheda::after{
  content: '';
  display: block;
  clear: both;
}

.immagine img{
  width: 300px;
}

.immagine {
  width: 50%;
}

.descrizione {
  width: 50%;
}

footer {
  height: 90px;
  background-color: lightgrey;
  line-height: 90px;
  text-align: center;
}

In questa lezione abbiamo sviluppato un semplice layout utilizzando la proprietà float e clear.

Lezione successiva: utilizzo di box shadow

Alcuni link utili

Lezione precedente: position sticky

before e after CSS

da Cristina | Nov 8, 2020 | CSS, Web

In questa lezione studieremo gli pseudo-elementi before e after dei CSS, utilizzati per aggiungere elementi che non sono presenti nel codice html.

In dettaglio before inserisce un contenuto prima dell’elemento individuato dal selettore selezionato, mentre after inserisce un contenuto dopo l’elemento.

Nel selettore individuato da ::before o ::after si specifica la proprietà content che serve ad inserire un contenuto prima o dopo l’elemento selezionato.

Primo esempio con before e after CSS

Creiamo un semplice esempio inserendo un cuore prima del testo e una stella dopo il testo, come nell’esempio sotto:

Nella pagina html inseriamo in un punto qualunque un div con del testo all’interno, come da codice sotto:

<div class="testo">Coding Creativo</div>

Poi nel css andiamo ad inserire le regole per il before e l’after. Ad entrambi assegniamo la proprietà content e per il cuore inseriamo il codice \2665, mentre per la stella inseriamo il codice 2605.

Impostiamo poi il colore rosso per il cuore e giallo per la stella. Impostiamo anche una dimensione del font e un padding opportuno.

Ecco di seguito il codice che utilizza sia before, sia after nei CSS:

.testo::before {
  content: '\2665';
  color: red;
  font-size: 25px;
  padding-right: 5px;
}

.testo::after {
  content: '\2605';
  color: yellow;
  font-size: 25px;
  padding-left: 5px;
}

Chiaramente before e after si possono utilizzare anche singolarmente.

Secondo esempio before e after CSS

In questo secondo esempio inseriamo una freccia prima di un paragrafo.

Quindi questa volta ci sarà bisogno di utilizzare solo lo pseudo-elemento before, pertanto tralasciamo l’after.

Nella pagina html inseriamo un paragrafo, come ad esempio questo:

<p class="paragrafo"> Coding Creativo - il blog per imparare a programmare</p>

Nel css inseriamo le regole di formattazione per il paragrafo e creiamo un contenuto dinamicamente prima della scritta.

Creiamo un elemento inline-block con delle dimensioni in larghezza ed altezza e centriamo il contenuto, nel nostro caso una freccia, utilizzando line-height e text-align center. Diamo poi uno sfondo, un colore del testo, un grassetto ed un bordo arrotondato.

Ecco dunque il codice css necessario per realizzare quanto detto:


.paragrafo {
  font-size: 26px;
}

.paragrafo::before {
  content: '\21E8';
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  background-color: lightgrey;
  color: white;
  font-weight: bold;
}

In questa lezione abbiamo affrontato gli pseudo-elementi before e after dei CSS, per creare elementi dinamicamente prima o dopo altri elementi. Nelle prossime lezioni vedremo ancora altri esempi.

Lezione successiva: pseudo elementi first-letter e first-line

Alcuni link utili

Lezione precedente: la proprietà overflow dei css

Float CSS

da Cristina | Nov 8, 2020 | CSS, Web

In questa lezione studieremo la proprietà float dei CSS.

Questa proprietà consente di rimuovere un elemento dal suo normale flusso e quindi di poterlo spostare a destra oppure a sinistra.

Se ad un elemento assegniamo la proprietà float, automaticamente diventa un block a cui poter assegnare larghezza, bordi, margini, ecc.

Proprietà float CSS

La proprietà float consente di impostare i seguenti valori: left, right, none, initial, inherit. Dove none è il valore di default.

Primo esempio con float left

Facciamo degli esempi per comprenderne il funzionamento. Supponiamo dunque di avere un elemento contenitore con degli elementi (div) uno accanto all’altro, come da figura sotto:

Uno dei modi per ottenere questo risultato è utilizzare quindi la proprietà float left dei CSS ed assegnarla a ciascun contenitore.

Ecco dunque la pagina html di esempio:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
    <div class="box red">1</div>
    <div class="box blue">2</div>
    <div class="box yellow">3</div>
  </div>

</body>
</html>

Ed il codice CSS necessario per realizzare questo esempio:

.container {
  background-color: lightgrey;
  width: 200px;
  height: 100px;
}

.box {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  float:left;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

Abbiamo scelto, per il momento, di dare un’altezza ed una larghezza fissa al contenitore esterno. Se non facciamo questa operazione il contenitore grigio non sarebbe visibile perché non prendebbe in automatico l’altezza dei contenitori inseriti al suo interno. Nelle prossime lezioni vedremo come risolvere questo problema.

Secondo esempio con float right CSS

In questo secondo esempio ci prefissiamo di ottenere l’effetto come da figura, con gli elementi, a partire dal primo, allineati al margine destro.

Il codice html non cambia rispetto all’esempio precedente, mentre il codice CSS cambia solo per la classe float-right assegnata ai 3 contenitori.

.container {
  background-color: lightgrey;
  width: 200px;
  height: 100px;
}

.box {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  float:right;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

Terzo esempio con float right CSS

In questo terzo esempio allineiamo il primo contenitore ed il secondo sulla destra, mentre il terzo lo posizioniamo sulla sinistra.

Quindi costruiamo la nostra pagina inserendo un contenitore principale e all’interno inseriamo 3 box come nell’esempio precedente.

Poi assegniamo al numero 3 la classe float left mentre agli altri 2 la classe float right.

Ecco dunque il codice di esempio:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
    <div class="box red float-right">1  float-right</div>
    <div class="box blue float-right">2 float-right</div>
    <div class="box yellow float-left">3 float-left</div>
  </div>

</body>
</html>

Nel css inseriamo una classe apposita che consente agli elementi di flottare a sinistra e un’altra che consente agli elementi di flottare a destra.

.container {
  background-color: lightgrey;
  width: 200px;
  height: 100px;
}

.float-left {
  float:left;
}

.float-right {
  float:right;
}

.box {
  width: 50px;
  height: 50px;
  text-align: center;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

In questa lezione abbiamo fatto dei semplici esempi con i float CSS, nella prossima lezione vedremo l’utilizzo di clear.

Lezione successiva: float e clear

Alcuni link utili