Mise en page menu

[pierrick]

Bonjour,

Apres quelque test dans komposer, je me permet de poster mon message car honnetement j'ai du mal à suivre. Voici le lien de la page qui me pose probleme http://pingpongfalaise.free.fr/championnats.html j'ai utilisé les fonction link et hover dans cascades et uniquement la fonction hover fonctionne et pas la link?(du moins sous ie7). Merci d'avance pour vos réponse et encore bravo pour votre forum (pour l'avoir déja utilisé).


Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)

[Fabrice.Tres.Net]

Précise mieux ton problème.

En attendant ton menu vertical n'est pas suffisamment bien défini pour être correctement positionné sur les navigateurs respectant les standards comme firefox.Rapidos, je te propose,( j'ai viré le float gauche) :

#menu2 {
position: absolute;
top:145px;
border-style: groove none none;
border-top: 10px groove #cc0000;
height: 100%;
font-weight: bold;
font-size: 1.2em;
line-height: 1.5em;
width: 215px;
text-decoration: none;
}

à vérifier tout de même

[Mongo Bob]

Bonsoir
http://www.yoyodesign.org/doc/w3c/css2/ ... do-classes
"a:link" est la pseudo-classe pour le lien non visité, je ne l'utilise jamais parce que je n'en ai jamais compris l'utilité. Je style le lien non visité en créant une règle pour "a" et pis c'est tout, ça revient au même. Il doit bien y avoir un avantage, puisque ça existe, mais moi, j'ai pas encore compris.
Pour ton 1er menu, l'horizontal, tu as ça comme règle pour "a:link" dans la feuille externe :

Code : Tout sélectionner

div#menu a:link {
  float: left;
  text-decoration: none;
  color: white;
}

et bien, les liens du menu en question bénéficient bien des 3 propriétés css en question. En quoi est-ce que ça marche pas? Bref! Qu'attends-tu de "a:link"?
Par contre, je vois pas comment tu obtiens la couleur violette pour les "visited" du menu2. Ca pouvait (peut-être?) être l'effet de deux couleurs superposées, mais faut quand même un "a:visited" et j'en vois pas ni dans les styles internes, ni dans la feuille externe

[pierrick]

Bonjour,
Pour fabrice : merci de l'info je vais tester ce positionnement.

Pour Mongo bob : J'ai du mal m'expliquer mais cela n'est pas grave tu m'as dépanné avec juste la règle "a", c'etait exactement ce que je souhaitais.

Merci pour votre rapidité et les excellents conseils.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)

[pierrick]

Bonsoir,

Merci Fabrice je viens d'essayer ton code et sauf erreur de ma part cela n'est pas tres chouette sous IE mon menu de gauche apparait sur ma zone de texte, cela donne quoi sous firefox?


Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)

[chinon37]

Bonjour,
Sous Firefox, c'est bon. J'y jette un coup d'œil.

edit: le problème vient de la règle de style #menu2 où il est fait un positionnement absolu. en mettant une position non défini, le menu s'affiche correctement et sous firefox et sous ie.
Les bordures ne s'affichent pas correctement sous IE. il faut peut être choisir des bordures plus simples et plus fines qui seront plus élégantes (mais c'est un avis personnel).
Pourquoi avoir fait deux feuilles de styles: une interne et une liée? tu devrais les regrouper et tout mettre dans la feuille liée:
pour ce faire, tu ouvres ta feuille externe avec un éditeur de texte (Notepad++ par exemple), tu ouvres aussi dans l'éditeur de texte ta page html et tu fais un copié-collé des styles de la page html vers la feuille de style style_index.css. Ensuite, tu peux supprimer les styles inclus dans la page html pour ne garder que

Code : Tout sélectionner

<link rel="stylesheet" href="championnats_fichiers/style_index.css" type="text/css">

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12

[pierrick]

Merci Chinon pour l'info, je vais tester avec des bordures plus simples. J'ai utiliser une feuille externe et une interne car l'externe me sert a répéter mon menu principal plus le 1er pavé avec les gifs de pongistes et l'interne pour le contenu de la page, comme j'en ai plusieurs (http://lepingafalaise.free.fr/) Voila cela me paraissait logique non?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)

[Fabrice.Tres.Net]

Rapidos, tu peux avoir 2 fichiers css...
soit par 2 fois la ligne link
soit avec la balise @import css!