Informatica 3 Liceo Scientifico Scienze Applicate/CSS pag1 Progetto
Aspetto
CSS intestazione pagina
[modifica | modifica sorgente]L’elemento che contiene l’intestazione del nostro sito web si adatta alla risoluzione massima della finestra nel browser, inoltre si comporterà come un vero e proprio elemento <table>
, prendendo le sembianze di una tabella.
html, body{
height: 100%;
}
html {
display: table;
margin: auto;
}
body {
background-color: #2CBBBB;
font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
display: table-cell;
vertical-align:middle;
}
div.intestazione{
background: #4D4D4D;
color: white;
text-align: center;
border: 3px solid white;
padding:right: 10px;
padding:left: 10px;
width:100%;
}
I blocchi che esibiscono il nome di “messaggio” e “contenuto” presentano un colore bianco, testo allineato al centro, raggruppato in un riquadro che presenta un bordo di 1 px.
div.messaggio, div.contenuto{
color: white;
text-align: center;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
}
table {
width:100%;
color: white;
font-family: Helvetica, Arial, sans-serif; /* Nicer font */
border-collapse:
collapse; border-spacing: 0;
}
td, th { border: 1px solid white; height: 30px; }
th {
background: #4D4D4D;
font-weight: bold;
}
td {
background: #797979;
text-align: center;
}
Questo è il risultato ottenuto: