5568 sujets

Sémantique web et HTML

Bonjour.

En utilisant les CSS, et en utilisant d'une façon judicieuse des pourcentages pour les propriétés width et height.
Modifié par GeorgesM (02 Sep 2005 - 17:10)
tu aurais un petit exemple de mesures? parcque je pourrais trouver au hasard mais si je déformes tout... enfin voila merci
Voici mon code css si sa peut vous etre utile Smiley langue
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 :

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)