Discussion :

[Pill_S]

Bonjour,

j'ai un petit problème avec les feuilles de style CSS.

Le principe que j'emploie est le suivant:
- pour tout les positionnements horizontaux, je donne les positions en % (afin d'être dynamique selon la résolution d'écran du client)
- pour les verticaux, je donne des tailles fixes en pixels (afin d'être compatible IE 6, car les pourcentages verticaux buggent sous IE)

Le problème est que le positionnement horizontal n'est pas très joli, il y a des décalages d'un pixel ou deux par rapport à ce que je voudrais.

Voici le code CSS de la partie critique:

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
37
38
 
#banniere {
    background-position:           center 0px;	
    left:                          5%;
    top:                           40px;
    height:                        110px;
    width:                         90%;
    position:                      absolute;
}
 
#menuhaut {
    left:                          5%;
    top:                           150px;
    height:                        20px;
    width:                         90%;
    position:                      absolute;
}
 
#menugauche {
    background-image:              url(images/menugauche.jpg);
    background-repeat:             no-repeat;
    background-position:           center 0px;	
    top:                           170px;
    left:                          5%;
    height:                        421px;
    width:                         15%;
}
 
#contenu {
    top:                           170px;
    left:                          20%;
    height:                        411px;
    width:                         71%;
    padding-top:                   10px;
    padding-left:                  2%;
    padding-right:                 2%;
    position:                      absolute;
}

Le résultat visible:
=> http://tek.no-ip.biz/hmc/index.php
La feuille de style complète
=> http://tek.no-ip.biz/hmc/style.css

Comment faîtes-vous pour faire du CSS vraiment nickel ? Quels sont vos astuces ?

Merci de votre aide !

[O-Zone]

je te conseillerais plutot de faire :
horizontal : taille fixe
et
vertical taille fixe ou non renseignée

[Pill_S]

horizontal : taille fixe

le problème de la taille fixe horizontale est de ne pas s'adapter à la résolution d'écran (et ce serait un plus d'après moi)

comment codez-vous la majorité de vos sites ? taille fixe ? taille relative en % ? autre chose ?

le but étant bien entendu d'avoir une qualité maximum (confort d'utilisation + compatibilité avec les navigateurs)

[Pill_S]

C'est bon j'arrive à m'arranger en imbriquant les balises <div> les unes dans les autres

[PlainsofPain]

Moi généralement c'est 750 px de large centré, ou 100% de la largeur, dans les deux cas avec les propriétés qui vont bien pour s'afficher de la meme facon sous la plupart des naviagteurs et résolutions ...

Avec une mise en page XHTML1.0/CSS bien sur

[Pill_S]

merci pour ta réponse !

j'ai changé mon principe, et maintenant je positionne tout en relatif (ça mache beaucoup mieux)
en fait je rencontre d'autres problèmes

j'ai une div "content" (qui contient tout le contenu du site)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
#content{
    background-color:              #0000CC;
    background-position:           center 0px;
    width:                         90%;
    height:                        100%;
    margin:                        auto;
    border:                        1px solid #000077; 
    text-align:                    left;
    overflow:                      auto;
}

Le resultat sous IE correspond à ce que je voudrais. Par contre, sous Firefox, ça me met une scrollBar dans le bord de gauche (voir http://tek.no-ip.biz/hmc ). Je pense que cela vient de ma clause "overflow:auto;"... mais si je l'enlève alors toute la mise en page se casse la G !

Est-ce que quelqu'un peut m'aider ?

[SpaceFrog]

overflow:hidden ?

[Pill_S]

overflow:hidden ?

en effet, c'est beaucoup mieux comme ça, merci !

dernier problème, sous IE : lorsque je passe la souris sur le dernier lien au fond de mon menu de gauche, la bordure du bas est annulée (il n'y a plus de 'margin' en bas)

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
 
#menugauche {
    background-color:              inherit;
    text-transform:                capitalize;
    font-variant:                  small-caps;
    color:                         #0000CC;
    font-size:                     12px;
    font-weight:                   bold;
    width:                         20%;
    position:                      relative;
    float:                         left;
}
#menugauche div{
    background-image :             url(images/menugauche.jpg);
    margin:                        5px;
    padding:                       10px;
    background-color:              #999999;
}
#menugauche div ul, #menugauche div li {
    text-align:                    center;
    display:                       block;
    list-style-type:               none;
    list-style-image:              none;
    margin:                        0;
    padding:                       0;
}
#menugauche a:link, #menugauche a:visited, #menugauche a:active  {
    color:                         #0000CC;
    text-decoration:               none;                
}
#menugauche a:hover {
    background-color:              #BBBBBB;
    color:                         #0000CC;
}

une idée ?

[Pill_S]

en fait cela vient du tag

#menugauche a:hover {
background-color: #BBBBBB;
color: #0000CC;
}

IE à l'air de ne pas trop l'aimer celui-là.....