Casella testo con bordo ed angolino

Un testo delimitato da una casella, magari con un determinato colore ed un angolino di un altro colore, può rendere più simpatico il layout di una pagina.

Per effettuare ciò servono 2 container CSS. Il container esterno determina la larghezza ed il colore di sfondo della casella, così come la formattazione, la scrittura ed altro.

Il secondo container (interno) contiene le istruzioni per l’angolino della casella come la dimensione, il colore ed il posizionamento della stessa all’interno della casella. Con "float" si posiziona la casella a destra ("right").

Per fare in modo che il contenuto (testo) non tocchi il margine destro e sinistro della casella utilizzo "padding" (margine interno). Ma attenzione, se metto "padding" questa istruzione vale anche per il container dell’angolino e quindi mi sposterebbe l’angolino con il valore del margine interno. Per evitare ciò introduco un ulteriore container che contiene le istruzioni del "padding" per il container interno e non per quello esterno.

<div style="width: 260px; border: 1px solid black; background-color: #DEDEDE;font-family: verdana;font-size: 12px;">
<div style="border: 0px solid black;width: 16px; height: 16px;background-color: #FFCC00;float: right;"> </div>

<div style="padding: 10px;">CONTENUTO</div>
</div>
 
CONTENUTO

La casella con testo bordo ed angolino viene visualizzata correttamente da tutti i browser.

Comments are Disabled