menu css

ok sous ie explorer mais pas opera

1 décembre 2005 à 10:13:14

Salut à tous
J'ai un menu horizontal et un menu vertical sur mon site. Chaque menu est constitué d'images lesquelles contiennent des liens vers les autres pages. Ces liens sont définis dans des blocs css.

Tout marchait pas trop mal et là depuis 1 journée (j'ai basculé sur un serveur dédié) je me rends compte que çà ne marche plus sous Opera mais toujours sous IE Explorer...

Est-ce que vous avez une idée pourquoi et surtout ce que je dois changer. Voici l'adresse du site : http://www.archipar.fr

Merci.

~Lysberg~

1 décembre 2005 à 10:17:32

Ouai, ca marche sous IE, mais ca marche pas non plus sous Firefox.
Fait voir le code source pour qu'on puisse t'aider.

moom

1 décembre 2005 à 10:23:06

la page css

#global {
position:absolute;
top: -2px;
left: 1px;
}
#arriere {
/*l'image occupe tte la page*/
height : 100%;
width : 100%;
}
.bloclogo {
width:620px;
background-image:url('/images/LOGO.gif');
height: 129px;
border: ;
}
.blocpetitlogo {
width:310px;
background-image:url('/images/PETITLOGO.gif');
height: 65px;
border: ;
}
#accueil { /* ONGLETS zone cliquable */
float: left;
width : 87px;
height: 23px;
margin-left: 20px;
margin-top: 12px;
}
#services { /* ONGLETS zone cliquable */
float: left;
width : 97px;
height: 23px;
margin-left: 13px;
margin-top: 12px;
}
#moncompte { /* ONGLETS zone cliquable */
float: left;
width : 113px;
height: 23px;
margin-left: 17px;
margin-top: 12px;
}
#charte { /* ONGLETS zone cliquable */
float: left;
width : 87px;
height: 23px;
margin-left: 14px;
margin-top: 12px;
}
#faq { /* ONGLETS zone cliquable */
float: left;
width : 60px;
height: 23px;
margin-left: 16px;
margin-top: 12px;
}
#contacts { /* ONGLETS zone cliquable */
float: left;
width : 100px;
height: 23px;
margin-left: 13px;
margin-top: 12px;
}

#objetdelacharte { /* MENUGAUCHE zone cliquable */
float: left;
width : 95px;
height: ;
margin-left: 35px;
margin-top: 19px;
font-size:12px;
}
#article10 { /* MENUGAUCHE zone cliquable */
float: left;
width : 82px;
height: 25px;
margin-left: 35px;
margin-top: 7px;
font-size:12px;
}
#article11 { /* MENUGAUCHE zone cliquable */
float: left;
width : 49px;
height: 25px;
margin-left: 35px;
margin-top: 9px;
font-size:12px;
}
#conditionsgenerales { /* MENUGAUCHE zone cliquable */
float: left;
width : 96px;
height: 25px;
margin-left: 35px;
margin-top: 10px;
font-size:12px;
}
#touteslesfaq { /* MENUGAUCHE zone cliquable */
float: left;
width : 69px;
height: ;
margin-left: 35px;
margin-top: 19px;
font-size:12px;
}
#rechercher { /* MENUGAUCHE zone cliquable */
float: left;
width : 53px;
height: ;
margin-left: 35px;
margin-top: 7px;
font-size:12px;
}
#nosconseils { /* MENUGAUCHE zone cliquable */
float: left;
width : 58px;
height: ;
margin-left: 35px;
margin-top: 7px;
font-size:12px;
}
#societe { /* MENUGAUCHE zone cliquable */
float: left;
width : 52px;
height: ;
margin-left: 35px;
margin-top: 19px;
font-size:12px;
}
#partenaires { /* MENUGAUCHE zone cliquable */
float: left;
width : 59px;
height: ;
margin-left: 35px;
margin-top: 7px;
font-size:12px;
}
#menu { /* MENUGAUCHE zone cliquable */
float: left;
width : 60px;
height: 45px;
margin-left: 35px;
margin-top: 9px;
font-size:12px;
}
.bloccontenu {
margin-top:10px;
margin-left:191px;
width: 450px;
height: 200px; /* cette ligne indique la hauteur du bloc contenu */
}
.texte {
font-family:Arial, Helvetica, sans-serif;
text-align: left;
height:450px;
overflow:auto;
padding-left:;
padding-right:;
} a {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}

la page html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="design.css" rel="stylesheet" type="text/css" />
<title>Archipar l'archivage pour les particuliers, enregistrement classement numérisation stockage</title>
<meta name="description" content="Archipar effectue à votre place l'enregistrement, le classement, et la numérisation de tous vos documents papier. Consulter vos documents en ligne et expédiez-les au destinataire de votre choix.">
<meta name="keywords" content="">
<meta name="author" content="Maurice Marzloff">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>

</head>
<img id="arriere" alt="" src="/images/FOND.jpg" />
<body>
<div id="global" >
<div class="bloclogo"></div>
<div class="bloconglets"><a id="accueil" href="index.php" title=""></a><a id="services" href="services.html" title=""></a><a id="moncompte" href="mon_compte.php" title=""></a><a id="charte" href="charte.html" title=""></a><a id="faq" href="faq.php" title=""></a><a id="contacts" href="contacts.html" title=""></a></div>
<div class="blocmenu"><a href="contacts.html" title="" id="menu"></a><a href="contacts.html" title="" id="societe"></a><a id="partenaires" href="contacts2.html" title=""></a></div>
<div class="bloccontenu Style1">

<div align="center" class="Style6">
</div>
</div>
</div>
</body>
</html>

ce qui est bizarre c'est que sur une seule page (charte) j'ai des liens qui apparaissent avec Opera, mais pas sur les autres pages...

Merci.

Gamer_man

1 décembre 2005 à 10:31:57

Déja, pour l'acceccibilité, tu devrais rajouter dans tes <a> vide des <span> que tu rendrais invisible en CSS (display: none;).

De plus, tu n'as pas du comprendre à quoi sert une liste a puce, vu comment tu les utilises (tu crée une liste par item !!)

Quoi qu'il en soit, je ne vois pas ton problème, quelque soit le butineur.

Bisous

~Lysberg~

1 décembre 2005 à 10:42:55

Dans ta source je ne vois pas un seul lien du menu vertical o_O

moom

1 décembre 2005 à 10:54:23

voilà le lien ds le bloc menu gauche :
<a id="partenaires" href="contacts2.html" title=""></a>

pourquoi çà marche avec ie explorer et pas avec opera ?
pourquoi çà marchait avec opera il ya encore quelques semaines et plus maintenant ?
merci.

moom

2 décembre 2005 à 12:54:51

up.(déolé)
je ne trouve pas...

Merci.

jp949

2 décembre 2005 à 13:27:05

.blocmenu a
{display:block;}

moom

5 décembre 2005 à 11:46:51

Désolé çà ne change rien...

ce qui est bizarre non seulement çà marche pas sous Opera alors qu'auparavant çà marchait mais en plus les liens sur le menu horizontal fonctionnent alors que sur le menu vertical non...

Merci.

Raphael

5 décembre 2005 à 11:54:05

Citation : Gamer_man

Déja, pour l'acceccibilité, tu devrais rajouter dans tes <a> vide des <span> que tu rendrais invisible en CSS (display: none;).

Malheureusement, la méthode du display none (FIR) est à éviter absolument pour des raisons d'accessibilité justement : certains outils vocaux interprètent cette propriété à la lettre alors qu'ils ne devraient pas. Du coup, le span restera "invisible" pour eux aussi

Lire cet excellent billet : http://blog-and-blues.org/weblog/2004/08/19/277-mettre-un-titre-en-image

Par contre, il existe d'autres moyens d'avoir un contenu masqué aux navigateurs graphiques.

Ensuite, pour un minimum d'accessibilité, il faudrait au moins renseigner l'attribut "title" du lien. Les lecteurs vocaux pourront alors avoir ce contenu.

Cependant, il faudrait revoir toute la structure de ce menu car l'imbrication de baluses sans sens comme <div> est un gros écueuil à l'accessibilité : le mieux serait de structurer ta liste de liens... avec une liste, qui sera bien mieux interprétée.
... Et en plus, ça facilitera le débuggage

PS : en général, les problèmes sur Opera viennent du fait que le conteneur n'a pas reçu de largeur définie... mais là, avec ton nombre important de div, il m'est impossible de dire qui contient qui

moom

5 décembre 2005 à 12:38:01

oh la la je n'y comprends plus rien
çà fait un pti moment que j'avais ces pages et là c'est loin...
bref le plus simple si je comprends bien c'est de laisser tel quel ou de refaire tout au propre...

Merci.

Raphael

5 décembre 2005 à 13:27:40

Citation : moom

bref le plus simple si je comprends bien c'est de laisser tel quel ou de refaire tout au propre...

Oui

Je pense que les cours du SDZ devraient beaucoup t'aider, sinon voilà pour toi :
- un PDF qui contient tous les cours Alsacréations sur la création de menus en CSS : http://css.alsacreations.com/Construction-de-menus-en-CSS/Telechargez-tous-les-tutoriels-de-menus-au-format-PDF
- la galerie des menus CSS d'Alsa : http://css.alsacreations.com/Galeries-de-menus-en-CSS (pour inspiration)

Bonne lecture et bonne chance

menu css

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

menu css

ok sous ie explorer mais pas opera

menu css

Supprimer

Modérer

Signaler le message aux modérateurs