28173 sujets

CSS et mise en forme, CSS3

::: Petit problème Menu CSS :::

Bonjour,
J'ai intégré mon menu en css du site suivant: http://www.mezaweb.info/ (mon futur portfolio)

Mon petit problème: Si vous cliquez sur un lien du menu sous FF, une page 404 s'affiche, faite précédent et maintenant vous voyez que la zone de sélection (actif sur la rubrique cliqué: pointillés noirs) s'étend jusqu'au bout à gauche de la page... Uniquement sous FF...

Cela vient de ma propriété text-indent:-9000px; appliqué sur les ul de mon menu.

Quelqu'un aurait une solution pour éviter cela??? Merci à vous!! [biggrin

Voici le code css complet:


body{
background-image:url(../images/philippe_metzger_fond.jpg);
background-repeat:repeat;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

#conteneur{
width:788px;
height:487px;
margin: 0 auto;
}

#gauche{
height:342px;
width:183px;
background-color:#d4d3d3;
float:left;
background-image:url(../images/philippe_metzger_left_1.jpg);
background-position:left;
background-repeat:no-repeat;
}

#centre{
height:342px;
width:605px;
float:right;
background-color:#ebebeb;
background-image:url(../images/philippe_metzger_left_2.jpg);
background-position:left;
background-repeat:no-repeat;
}

#menu{
padding-left:22px;
padding-top:20px;
}

#texte{
padding-left: 27px;
padding-top:10px;
padding-right:10px;
}

#top_texte{
padding-left: 27px;
height:15px;
padding-top:5px;
font-weight:bold;
}

#langue{
padding-left:370px;
padding-right:5px;
}

#langue2{
padding-left:5px;
padding-right:5px;
}

#menu1{
margin:0px;
padding:0px;
}

#menu1 li a, #menu1 li a:hover{
	display: block;
	border: 0px;
	text-decoration: none;
}

ul#menu1{
list-style-type:none;
/*text-indent:-9000px;*/
display: block;
margin:8px;

}


#m_identite{
background-image:url(../images/boutons/carte_identite_off.jpg);
height:25px;
width:106px;
background-repeat:no-repeat;
}

#m_identite a:hover{
background-image:url(../images/boutons/carte_identite_on.jpg);
height:25px;
width:106px;
background-repeat:no-repeat;
}

#m_formation{
background-image:url(../images/boutons/formation_off.jpg);
height:25px;
width:106px;
background-repeat:no-repeat;
}

#m_formation a:hover{
background-image:url(../images/boutons/formation_on.jpg);
height:25px;
width:106px;
background-repeat:no-repeat;
}

#m_experience{
background-image:url(../images/boutons/experience_off.jpg);
height:25px;
width:106px;
background-repeat:no-repeat;
}

#m_experience a:hover{
background-image:url(../images/boutons/experience_on.jpg);
height:25px;
width:106px;
background-repeat:no-repeat;
}

#m_derriere{
background-image:url(../images/boutons/derriere_off.jpg);
height:25px;
width:106px;
background-repeat:no-repeat;
}

#m_derriere a:hover{
background-image:url(../images/boutons/derriere_on.jpg);
height:25px;
width:106px;
background-repeat:no-repeat;
}

#m_sites_web{
background-image:url(../images/boutons/philippe_metzger_web_off.jpg);
height:25px;
width:106px;
background-repeat:no-repeat;
}

#m_sites_web a:hover{
background-image:url(../images/boutons/philippe_metzger_web_on.jpg);
height:25px;
width:106px;
background-repeat:no-repeat;
}

#m_infographie{
background-image:url(../images/boutons/infographie_off.jpg);
height:25px;
width:106px;
background-repeat:no-repeat;
}

#m_infographie a:hover{
background-image:url(../images/boutons/infographie_on.jpg);
height:25px;
width:106px;
background-repeat:no-repeat;
}

#m_3d_audiovisuel{
background-image:url(../images/boutons/3D_audiovisuel_off.jpg);
height:25px;
width:106px;
background-repeat:no-repeat;
}

#m_3d_audiovisuel a:hover{
background-image:url(../images/boutons/3D_audiovisuel_on.jpg);
height:25px;
width:106px;
background-repeat:no-repeat;
}

#m_applications{
background-image:url(../images/boutons/applications_off.jpg);
height:25px;
width:106px;
background-repeat:no-repeat;
}

#m_applications a:hover{
background-image:url(../images/boutons/applications_on.jpg);
height:25px;
width:106px;
background-repeat:no-repeat;
}
Euh si je peux me permettre, à quoi sert ton text-indent:-9000px ?

Et puis c'est bien gentil de balancer ta css complète mais le bout de code concerné, accompagné du code html correspondants auraient été plus utiles.
Bonjour,

Sauf erreur ou omission, ça le fait sur tous les navigateurs donc pas un problème de css... Peut être un souci de chemin de fichier !
Vide le cache d'IE et ton problème réapparaitra!

<edit> Ah oui c'est vrai le text-indent c'est pourquoi?</edit>
Modifié par ghost (03 Mar 2007 - 16:02)
<coup de gueule passager>
Mais quelle bon dieu de foutue idée de mettre « Portfolio Jean Dupont » dans tous les textes alternatifs de toutes les images ??? Smiley fache Smiley rale
Les textes alternatifs sont importants, ils sont destinés à remplacer l'image pour les utilisateurs qui ne peuvent pas la voir ou dans les contextes d'utilisation où elle ne peut pas être affichée.
Voilà un aperçu de ce que ça donne si on désactive l'affichage des images :
upload/2043-portfolio-n.png
Vraiment pas terrible.
</coup de gueule passager>

Bon, je me calme un peu, et on va essayer d'être un peu plus constructif.

Alors on va faire simple : ne pas utiliser de text-indent: -9000px. Plus généralement : ne pas utiliser de technique de remplacement d'image, où l'on cache un texte de contenu (via un text-indent ou toute autre méthode) pour lui substituer une image de fond appelée via la feuille de style CSS. Ces techniques présenteront toujours des soucis d'accessibilité non négligeables.

Utiliser des images HTML (balise <img />) dotées de texte alternatifs cohérents. Par exemple :
<ul id="menu1">
	<li><a href="carte_identite.html"><img src="..." alt="Carte identite" /></a></li>
	<li><a href="formation.html"><img src="..." alt="Formation" /></a></li>
	[i]etc.[/i]
</ul>

L'effet de survol (apparition d'un petit triangle blanc à gauche du texte) pourra être obtenu avec une image de fond, via la feuille de style. Mais le contenu ne doit pas faire partie de l'image de fond : c'est soit un texte dans le code HTML, soit une image HTML (avec texte alternatif qui va bien).

Autres conseils en vrac :
- Les images qui annoncent les deux menus sont des titres de section (ils annoncent et résument ou définissent le contenu qui les suit), et devraient donc être des titres de section dans le code HTML. Utiliser les balises <h1>, <h2>, etc.
- Le pied de page ne contient pas l'information visuelle « Bottom Portfolio Jean Dupont » (ce que laisse entendre le texte alternatif de l'image qui sert à dessiner ce pied de page), mais l'information « W3C XHTML 1.0, W3C CSS 2 ». Information trompeuse, d'ailleurs :
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.mezaweb.info%2F
(Le validateur HTML du W3C pointe le fait qu'un identifiant (valeur de l'attribut id des balises) devrait être unique, et que l'on ne peut donc pas utiliser deux fois l'identifiant "menu1". Si on veut utiliser deux fois le même style, utiliser une classe (attribut class).
- Un conteneur global ayant une largeur de 788px, c'est obtenir à coup sûr une barre de défilement horizontal inutile pour une résolution en 800x600. De préférence, si on veut faire un site de largeur fixe et prendre en compte cette résolution, ne pas dépasser les 760px. On peut pousser à 770px, à la rigueur. Mais pas plus.


Voilà, ça sera tout. Smiley cligne

Bonne continuation. Smiley smile
<nicolas> a écrit :
Euh si je peux me permettre, à quoi sert ton text-indent:-9000px ?

À réaliser une bêtise séduisante sur le papier. Smiley cligne
Un grand merci pour cette réponse constructive et qui va permettre de prendre du recul et de réflechir à nouveau mon intégration...

Concernant la validation je te rassure, mon objectif était avant tout de faire valider l'ensemble avant même de construire d'autres pages...

Super efficace merci
Smiley biggrin
Sujet clos
Aller à