Discussion :

[stefsas]

Bonjour,

J'ai intégré une sorte de menu dans ma page sur la gauche avec le code suivant :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#navigation
{
 background: url(Images_Projet/Images/gris_350.jpg)  ;
 width: 7%;
 float:left;
 padding: 8px;
 border-right: solid 2px #AFBAB8; 
 height: 38.5em;  
 
 }

Mon problème est que j'ai adapté à l'œil la longueur de ma bordure de droite avec height: 38.5em, mais cela varie d'un écran à l'autre et je me demandais si il y avait un moyen pour que la bordure arrive bien au bas de la page sans dépasser ni être trop court si je change d'écran.

Merci.

[Dionyzos]

Salut stefsas,

Pourrais-tu nous fournir le code HTML et CSS complet de ta page afin de mieux comprendre d'où vient ton problème, car avec aussi peu de code, c'est chaud de t'aider

Le seul info que je peux te donner pour l'instant, est que l'unité em est proportionnelle aux éléments parents et enfants de la page. Donc d'une résolution à une autre il est normal que tu obtiennes un affiche différent, et parfois disproportionné en hauteur et/ou largeur.

[stefsas]

Voilà le code html :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="ZoneCentre"> 
 
 
    <div id="navigation"> 
        <p class="boutonNav">
        <input type="image" name="MenuNavigation1$BoutonAccueil" id="MenuNavigation1_BoutonAccueil" class="bout" src="/Images_Projet/Images/accueil.png" style="height:35px;width:35px;border-width:0px;" /> </p>
      <p class="TexteNav">   Accueil  </p>  <hr />
 
      <p class="boutonNav">
      <input type="image" name="MenuNavigation1$BoutonDeconnexion" id="MenuNavigation1_BoutonDeconnexion" class="bout" src="/Images_Projet/Images/Deconnexion.png" style="height:35px;width:35px;border-width:0px;" /></p>
      <p class="TexteNav">  Déconnexion  </p>  
      <hr />
   </div>  </div>

et le code css associé:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
#ZoneCentre
{
 position:absolute;
 float:left;
 width:100%;  
} 
 
#navigation
{
 background: url(Images_Projet/Images/gris_350.jpg)  ;
 position:absolute;
 float:left;
 width: 100px;
 padding: 8px;
 border-right: solid 2px #AFBAB8; 
 height: 38.5em; 
 }
 
 /*Images de navigation*/
.boutonNav
{
 margin-left: 30%;   
}     
 
/*Texte associé aux images de navigation*/
.TexteNav
{
 color: #32639A; 
 text-align:center;  
}

Le truc, c'est que j'ai utilisé height: 38.5em; pour que la bordure de droite de mon menu aille jusqu'en bas de ma page, mais si je prend un écran de taille différente, cela dépasse où est trop court.
Quelle est l'unité que je dois utiliser ?

Merci.

[Dionyzos]

Ok, je comprends mieux ce que tu veux maintenant.

En fait il faut savoir que par défaut un DIV ne prend pas de hauteur en % par rapport à son conteneur mais par rapport à son contenu.

Pour contourner ce petit inconvénient il faut passer aux balises HTML et BODY une hauteur de 100% et à ce moment les sous DIV avec la propriété height: 100% prendrons bien la hauteur de leur conteneur.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <div id="ZoneCentre">
        <div id="navigation">
            <p class="boutonNav">
                <input type="image" name="MenuNavigation1$BoutonAccueil" id="MenuNavigation1_BoutonAccueil" class="bout" src="/Images_Projet/Images/accueil.png" style="height:35px;width:35px;border-width:0px;" />
            </p>
            <p class="TexteNav">Accueil</p>
            <hr />
 
            <p class="boutonNav">
                <input type="image" name="MenuNavigation1$BoutonDeconnexion" id="MenuNavigation1_BoutonDeconnexion" class="bout" src="/Images_Projet/Images/Deconnexion.png" style="height:35px;width:35px;border-width:0px;" />
            </p>
            <p class="TexteNav">Déconnexion</p>
          <hr />
       </div>
    </div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    BODY, HTML { height: 100%; margin: 0; padding: 0; }
    #ZoneCentre {
        position: absolute;
        float: left;
        width: 100%;
        height: 100%;
    }
 
    #navigation {
        background: url(Images_Projet/Images/gris_350.jpg);
        background-color: #eee;
        float: left;
        width: 100px;
        padding: 0 8px;
        border-right: solid 2px #AFBAB8;
        height: 100%;
    }
 
    /*Images de navigation*/
    .boutonNav { margin-left: 30%; }
 
    /*Texte associé aux images de navigation*/
    .TexteNav { color: #32639A; text-align: center; }