Modifica dei ruoli

La proprietà display Con questa “pillola” vorremmo rinfrescare un pò la memoria sui valori più importanti della proprietà “display” e […]
Modifica dei ruoli

La proprietà display

Con questa “pillola” vorremmo rinfrescare un pò la memoria sui valori più importanti della proprietà “display” e come la modifica del ruolo di visualizzazione di un elemento possa influire sul layout.

Prendiamo ad esempio il seguente codice:

<div id="navigazione">
    <a href="#">Home</a>
    <a href="#">Prodotti</a>
    <a href="#">Contatti</a>
</div>

Questa sorta di menu verrà visualizzata nei browser come un susseguirsi di link, per renderizzarli come elementi di blocco basterebbe assegnare alle ancore del div navigazione la proprietà “display:block” la quale le renderà elemento blocco. Così facendo possiamo trattare questi elementi inline come se fossero dei div, con il vantaggio che l’intero riquadro elemento diventa parte del link. In questo modo se il puntatore del mouse dell’utente si sposta in qualsiasi punto del riquadro elemento, è possibile fare click sul link.

Natura intrinseca

L’importante è ricordare che si sta modificando il ruolo di visualizzazione dell’elemento e non la sua natura intrinseca, quindi un elemento inline può discendere da un elemento blocco ma non è possibile il contrario. Per esempio un link può essere posizionato all’interno di un paragrafo ma non può essere circondato da esso.

Ecco l’esempio:

<a href="#"><p>Testo di prova</p></a>

Questa regola non è validata, perché come abbiamo appena descritto anche alterando il ruolo di visualizzazione non modifica la natura dell’elemento.

Dal laboratorio è tutto 🙂 Alla prossima.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github