5568 sujets
Sémantique web et HTML
Voici mon code css si sa peut vous etre utile
body
{
width: 76px;
margin-top: 20px;
margin-bottom: 20px;
background-color: darkblue;
}
#en_tete
{
width: 760px;
height: 100px;
background-image: url("EDENBLEU SECURITE a.gif");
background-repeat: no-repeat;
margin-bottom: 10px;
background-position: center
}
#menu
{
float: left;
width: 135px;
}
.element_menu
{
background-color: lightblue;
background-image: url("reflet.gif");
border: 2px solid black;
margin-bottom: 20px;
}
.element_menu h4
{
color: black;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}
.element_menu a
{
color: red;
font-weight: bold;
}
.element_menu a:hover
{
color: yellow;
}
#corps
{
margin-left: 160px;
margin-bottom: 20px;
padding: 5px;
color: black ;
background-color: rgb(16,226,221); /* Une couleur de fond pour le corps */
background-image: url("vaguelettes.gif");
/* Une petite image de fond qui se répètera horizontalement en haut */
border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
}
#corps h1 /* Tous les titres h1 du corps */
{
color: red;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
#corps h2 /* Tous les titres h2 du corps */
{
height: 30px;
background-image: url(""); /* Une petite image de fond sur les titres h2 */
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
background-repeat: center;
padding-left: 30px;
color: brown;
text-align: center;
}
#corps h5
{
text-align: center;
}
#pied_de_page
{
padding: 5px;
text-align: center;
color: red;
font-size: medium;
background-repeat: repeat-x;
background-image: url("reflet.gif");
border: 2px solid black;
font-weight: bold;
}
Une petite remarque préliminaire :
C'est pas très large, 76 pixels. Avec cette règle, on fixe la largeur du bloc principal de la page.
(mais comme 76px c'est pas beaucoup, la rêgle va être ignorée par le navigateur.
Pour que celle-ci se retaille en fonction de la fenêtre, il vaut mieux fixer la largeur de body en pourcentage :
... par exemple, pour que la page s'affiche dans 80% de la largeur de la fenêtre.
Ensuite,
doit correspondre à une boite de la page. En faisant
... le bloc en-tête fera la largeur de body. Et ainsi de suite....
Modifié par GeorgesM (02 Sep 2005 - 17:59)
body
{
width: 76px;
C'est pas très large, 76 pixels. Avec cette règle, on fixe la largeur du bloc principal de la page.
(mais comme 76px c'est pas beaucoup, la rêgle va être ignorée par le navigateur.
Pour que celle-ci se retaille en fonction de la fenêtre, il vaut mieux fixer la largeur de body en pourcentage :
body
{
width: 80%;...
... par exemple, pour que la page s'affiche dans 80% de la largeur de la fenêtre.
Ensuite,
#en_tete
{
width: 760px;...
doit correspondre à une boite de la page. En faisant
#en_tete
{
width: 100%;...
... le bloc en-tête fera la largeur de body. Et ainsi de suite....
Modifié par GeorgesM (02 Sep 2005 - 17:59)