CSS – Creare un layout elastico

Ho trovato questo articolo che spiega in dettaglio come creare un layout elastico. Cos’è un “layout elastico”? Un layout elastico è sostanzialmente un layout che si adatta alle dimensioni del testo del browser senza “sballare” la posizione degli elementi contenuti nella pagna.

CSS – Em, Px, Pt

Leggendo codice css, si possono trovare le dimensioni espresse in “px”, “pt”, “em” ecc..Vediamo cosa significano queste coppie di lettere: px (pixel – relativo alla risoluzione dello schermo) ex (rappresenta la grandezza della lettera x) em (rappresenta la grandezza della lettera m) cm (centimetri) in (inches – 2,54 centimetri) pt (rappresenta un punto, che equivale a 1/72 in) mm (millimetri) … Continua a leggere

CSS – Formattare il testo

p { /*Carattere del testo*/ font-family: Arial /*Dimensione del testo in px o pt*/ font-size: 14px; /*Stile del testo*/ font-style: italic; /*Testo in grassetto o semplice*/ font-weight: bold; /*Attivare o eliminare la sottolineatura nei link*/ text-decoration: overline; /*Allineamento orizzontale del testo*/ text-align: center; /*Colore del testo*/ color: #CC0000; /*Allineamento verticale del testo*/ vertical-align: super; /*Testo indentato*/ text-indent: 10px; /*Imposta lo … Continua a leggere

CSS – Submit con style

<style> .button { font-weight: bold; font-family: ms sans serif,system,arial; font-size: 10pt; color: #ffffff; background-color: #003366; border-style: outset; border-color: #6699ff; cursor: se-resize; BORDER-TOP-WIDTH: 2px; BORDER-LEFT-WIDTH: 2px; BORDER-BOTTOM-WIDTH: 2px; BORDER-RIGHT-WIDTH: 2px HEIGHT: 16px; WIDTH: 100px; background-attachment: fixed; background-image: url(‘smile.gif’); background-repeat: no-repeat; } </style>

CSS – Div centrato rispetto alla pagina

Questo codice CSS, centra un div (o un altro oggetto della pagina) in base alla risoluzione dello schermo. <style> body { margin: 0px; height: 100%; } div.LayerCentrato { text-align: Center; background-color: #EEEEEE; color: #192939; position: Absolute; top: 50%; left: 50%; font-size: 12px; font-family: Verdana; font-weight: Bold; width: 350px; height: 200px; border: Solid 1px #CCCCCC; margin: -100px, -175px; } </style>

HTML & CSS – Tabelle con div e css

E’ possibile creare delle tabelle utilizzando div e css. Questa tecnica di emulare le tabelle, è utilizzata da molti ma io non la consiglio. Se un webmaster deve visualizzare dati “tabellari”, l’ unico strumento per eccellenza (compatibile con tutti i browser), sono le tabelle. <style type=”text/css”> <!– .cella { height: auto; width: 100px; display: inline; position: relative; border: none; } … Continua a leggere