Informatica 3 Liceo Scientifico Scienze Applicate/CSS pag1 Progetto

CSS intestazione pagina

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:

intestazione