Informatica 3 Liceo Scientifico Scienze Applicate/CSS pag1 Progetto

Indice del libro

CSS intestazione pagina

modifica

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