1 1 1 1 1 1 1 1 1 1 (0 Votes)

Esempio 60: div ripristina il normale flusso html e posiziona il contenuto correttamente - ma stesso risultato ottenuto con pseudo classe :after su testo vedi esempio 61.  Risultato

<!DOCTYPE html>

<html lang="it">

<head>

<meta charset="UTF-8">

<title>Titolo del documento</title>

<style>

.wrapper {
padding:20px;
max-width:960px;
margin:0 auto;
}

.testo {
float:left;
background:#6F9;
width:29%;
margin:1%;
padding:1%;
height:140px;
}

.testo h2, .testo p {
color:#039;
text-align:center;
margin:10px 0;
}

/* il margine si vede grazie al div clear both */

.contenuto {
padding:10px;
background:#999;
clear:both;
margin-top:50px;
}

</style>

</head>

<!-- esempio utile per vedere il funzionamento del float -->

<body>

<div class="wrapper">


<div class="pulisci">


<div class="testo">

<h2>Intestazione h2</h2>
<p>Testo in un paragrafo</p>

</div>

<div class="testo">
<h2>Intestazione h2</h2>
<p>Testo in un paragrafo</p>
</div>

<div class="testo">
<h2>Intestazione h2</h2>
<p>Testo in un paragrafo</p>
</div>

</div>


<!-- questo div ripristina il normale flusso html e posizionare il contenuto correttamente - ma stesso risultato ottenuto con pseudo classe :after su testo vedi esempio 61 -->

<div style="clear:both;"></div>   

<div class="contenuto">

<p>C'è un colpo di scena per quanto riguarda l'ABOLIZIONE del Cambio tra Ora Solare e Ora Legale: è infatti arrivata da poco la DECISIONE dell'ITALIA, e sta già facendo discutere. L’Italia ha detto NO! Nel nostro Paese infatti resterà ancora in vigore il doppio orario: il governo italiano ha depositato a Bruxelles una richiesta formale per mantenere intatta la situazione attuale, senza variazioni. Il governo Conte bis non ha presentato modifiche al documento. Questo significa che tutto rimane inalterato.</p>

</div>



</div>

</body>

<!-- esempio realizzato o adattato per il corso gratuito Html/Css di https://www.guideinformaticagratis.it/ -->

</html>

Risultato  






Commenti (0)

There are no comments posted here yet

Lascia i tuoi commenti

  1. Posting comment as a guest.
Allegati (0 / 3)
Share Your Location