Discussion :

[bob633]

Bonjour, je suis en train de créer une interface web, sauf que j'ai un petit problème.

La page est composer en 4 zones :
- zoneBoutons qui prend toute la largeur de la page en haut
- zoneTexte qui sera juste en dessous et qui prendra aussi la largeur de la page
- zoneMilieuGauche et zoneMilieuDroite qui seront sur la même ligne côte à côte

Le problème vient au zoneMilieu, si je met le même heigth aux deux, une est plus grande que l'autre.

Je met width: 25% à l'une et width: 75% à l'autre (sans margin-left pour qu'elles soient collé), la zone de droite est trop grande et se met en dessous .. je suis obligé de réduire et mettre une valeur "batarde" pour à peu près aligner le tout ..

.css :

Code :

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
32
33
34
35
36
#zoneBoutons
{
height: 30px ;
}
 
#zoneTexte
{
height: 55px ;
margin-top: 5% ;
border: black 2px solid;
background-image:url("../images/arrierePlan.jpg");
overflow:scroll ;
}
 
#zoneMilieuGauche
{
width: 25% ;
height: 270px;
border: black 2px solid;
overflow:scroll ;
float: left ;
position:relative ;
background-image:url("../images/arrierePlan.jpg");
}
#zoneMilieuDroite
{
border: black 2px solid;
overflow:scroll ;
width: 72.546% ;
height: 270px ;
background-image:url("../images/arrierePlan.jpg");
padding-left: 2% ;
padding-top: 2% ;
float: left ;
position:relative ;
}

Voilà une capture du résultat :



Merci

[Erwan31]

Bonjour,
une page en ligne faciliterait les choses.
Pour les largeurs en %, il faut savoir qu'il s'y ajoute les margin (voire padding) par défaut du navigateur (s'il n'ont pas été mis à 0), les padding horizontaux des cellules de table, les bordures, etc. Donc au final tu dépasses nettement les 100%.