MENU horizontal réactif en CSS

Version imprimable

04/01/2012, 09h52
macbida

1 pièce(s) jointe(s)

MENU horizontal réactif en CSS

Bonjour à tous,

J'ai tenté la conception d'un menu horizontal et réactif en css.
Lorsque je suis sous easyphp, internet explorer, firefox je n'ai aucun souci : en cliquant sur ma barre de menu j'accède rapidement aux pages choisies.

C'est sur chrome que cela pose problème et je ne sais pas :
-comment modifier ma feuille de style uniquement pour chrome
-ce qui cloche au niveau de mes éléments

Je vous joins les éléments (la page en ligne et ici :ma page et je vous joins ma feuille de style associée.
Si quelqu'un peut m'aiguiller un petit peu pour que j'y vois plus clair.:cry:
04/01/2012, 11h46
Emyleen
Bonjour :)

C'est ça qui pose problème :
Code:

1 2 3 4 5 6 7 8 a.menu:active { display:block; float:left; width:24.5%; text-decoration:none; background-color:#000000; color:#FFFFFF; }
Remplace ton width: 24,5%; par width: 100px; ça devrait résoudre ton souci :)
04/01/2012, 12h49
Torgar

Bonjour,

Tu peux même supprimer cette propriété car elle hérite celle de a.menu:link, a#menu:visited { } qui est déjà à 100px.
04/01/2012, 17h33
macbida

C'est bien la partie lien active qui avait une width à 22.5% je l'ai viré et du coup au clic dessus cela ne change plus la largeur donc ca c plutot pas mal.
Merci beaucoup!
Par contre jeme rends compte qu'il y a pas mal de propriétés doublons dans ma feuille car je suis débutante et du coup c un peu fouilli, je m'y perds moi meme et ca donne ca!
En meme temps ce site et à rendre pour un exam donc j'aimerai bien que ma stylesheet soit correcte.
Tu vois des choses qui te choquent sinon?

Par exemple j'aimerais bien avoir ce même menu mais grâce à des listes à puce (liste style type:none, display in line...je connais un peu les bases) mais pour mélanger les styles de liens ac des elements block et les le menu en liste à puce je vois pas comment faire
04/01/2012, 17h47
Torgar

Je regarde ça ce soir plus en détail et te proposerai une version corrigée.

Oui, je vois autre chose mais on peut pas dire que ce soit choquant ^^
04/01/2012, 22h58
macbida

une liste à puce avec les memes effets

En plus il y a un truc qui me tourmente : normalement on crée des menu horizontaux grâce a des li ke l'on passe en en list-style-type none...

Par contre il va falloir que j vire quoi pour avoir mes listes propres avec ce code ?
04/01/2012, 23h15
Torgar

Bonsoir,

Je m'excuse je n'ai pas eu le temps de faire ce que je voulais ce soir :s

Je verrai ça demain. Bonne soirée à demain.
05/01/2012, 10h53
macbida

aucun souci torgar c'est déjà très gentil de vouloir me donner un coup de pouce
bises

Alors voici ce que j'ai pu noter.

Code:

1
2
3
4
5
6
h1 {
    font-size:14px; 
}
h2 { 
    font-size:14px;
}

Peut être combiné en un

Code:

1
2
3
h1, h2 {
    font-size: 14px;
}

Mettre border: none; à la place de border: 0; (pour la class .ligne)

Pour tes définitions de style sur les balises <a></a> pas besoin de répéter les text-decoration: none; vu que tu le fais une fois dans a:link, a:visited {}.

Donc ça devient :

Code:

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
/* Définition du style des liens*/
/* liens par défaut */
a:link, a:visited {
    color:#FD7800; 
    text-decoration:none;
}
 
/* liens du menu */
a.menu:link, a#menu:visited {
    display:block;
    float:left;
    background-color:#FFFFFF;
    color:#000000;
    width: 100px;
    font-size: 13px;
    font-weight: bold;
}
 
a.menu:hover {
    display:block;
    background-color:#FD7800; 
    color:#FFFFFF;
}
 
a.menu:active {
    display:block; 
    float:left; 
    width:24.5%;
    background-color:#000000; 
    color:#FFFFFF;
}

Voir commentaire dans le code

Code:

1
2
3
4
5
6
7
8
9
10
#entete {
    float:left;
    margin:0;
    padding:0; /* A supprimer puisque tu le redéfini en dessous */
    width:100%;
    padding: 15px 20px 10px 20px;
    text-align:left;
    background-image:url(images/header.png);
    background-repeat: no-repeat;
}

Les margin à auto ne servent à rien si ta largeur est de 100%. Il n'y aura donc pas de centrage.

Code:

1
2
3
4
5
6
7
8
.conteneur_col{
    margin-left:auto;
    margin-right:auto;
    width: 100%;
    text-align:center;
    line-height: 12px;
    float:left;
}

Je ne peux pas vérifier, mais est-ce bien utilie ?

Code:

1
2
3
.col1 .col2 .col3 img{
    width: 100%;
}