28172 sujets

CSS et mise en forme, CSS3

Mystère d'affichage avec Netscape

Bonjour à tous,
Je suis confrontée à un pb que je n'arrive pas à comprendre.
J'ai un site sous Spip et css (http://www.aaahmi.org/spip.php?page=sommaire).

Mes onglets sont invisibles uniquement sous Netscape, alors qu'ils sont bien présents dans le code source.

Voici le code :


<div id="menu2"><!--debut menu2-->
<ul id="onglets"><!--debut ul onglets-->
	<li id="item1"><a href="#URL_SITE_SPIP/spip.php?rubrique5"> </a></li>
	<li id="item2"><a href="#URL_SITE_SPIP/spip.php?rubrique6"> </a></li>
	<li id="item3"><a href="#URL_SITE_SPIP/spip.php?page=echanger"> </a></li>
</ul><!--fin ul onglets-->
</div><!--fin menu2-->


Et le css :


#menu2{
	float: right;
	margin: 0;
	padding: 0;
	border: 0;
}
#onglets{
	width: 345px;
	list-style: none;
	margin: 18px 0 0 0;
	padding: 0;
	border: 0;
	overflow: hidden ;
}
#onglets li{
	float: left;
	width: 115px;
	text-align:center;
	margin: 0;
	padding: 0;
	border: 0;
}

#item1 a {
	display: block ;
	height:50px;
	background:url(images/onglet2.png) left top no-repeat ;
}

#item1 a:hover, #item1 li a:focus, #item1 li a:active { 
	height:50px;
	background:url(images/onglet2on.png) left top no-repeat ;
}

#item2 a {
	display: block ;
	height:50px;
	background:url(images/onglet3.png) left top no-repeat ;
}

#item2 a:hover, #item2 li a:focus, #item2 li a:active { 
	height:50px;
	background:url(images/onglet3on.png) left top no-repeat ;
}

#item3 a {
	display: block ;
	height:50px;
	background:url(images/onglet1.png) left top no-repeat ;
}

#item3 a:hover, #item3 li a:focus, #item3 li a:active { 
	height:50px;
	background:url(images/onglet1on.png) left top no-repeat ;
}


Si je remplace les onglets par un texte, il apparait bien au bon endroit.
Est-ce qu'il y a un pb avec display:block ? ou à cause du fait que mes images sont en background et que ma balise <li id="itemX"> est vide ?

D'autre part, l'utilisation du menu déroulant ne me satisfait pas (là encore, uniquement avec Netscape) : le bloc qui apparait au survol des textes de droite est caché par l'image de la page d'accueil (il passe en dessous).

Mille merci pour vos réponses.
Modifié par mirobolus (23 Feb 2010 - 12:00)
Bonjour,

Si ça ne te perturbe pas d'avoir des liens vide dans ton code, n'oublie pas que ton visiteur, lui, pourrait se retrouver bloqué sur une page sans menu...

Donc on rappelle la règle :
* Les images porteuse de contenu (généralement du texte) et/ou support de lien DOIVENT se trouver dans le code HTML avec un attribut alt correctement remplis

* Les images purement décorative (qui n'apportent aucune information) peuvent se trouver dans le code HTML (avec un alt vide) mais on préfèrera les mettre dans le CSS.

Et le résumé du résumé :
Contenu = HTML
Mise en forme = CSS
Comportement = JS
Voui Smiley confused je comprends. Merci Laurie-Anne. J'avais opté pour les images en background pour gérer l'effet de rollover en css. Y a-t-il une solution qui satisfasse tous mes besoins ? Je voudrais éviter le javascript.
Et pour le fait que mon menu passe derrière l'image du div contenu ? Tu as une piste ?
mirobolus a écrit :
Y a-t-il une solution qui satisfasse tous mes besoins ? Je voudrais éviter le javascript.

Pourquoi ne pas utiliser du texte HTML pour ces onglets, plutôt que mettre le texte dans les images? Tu devrais pouvoir réaliser le même effect avec seulement le fond vert arrondi en image de fond.

mirobolus a écrit :
Et pour le fait que mon menu passe derrière l'image du div contenu ? Tu as une piste ?

Si ça concerne uniquement Netscape, et étant donné que tu dois être le dernier terrien à utiliser Netscape, ça n'a pas une grande importance.
Maintenant si le problème concerne des navigateurs modernes, ou de vieux navigateurs encore pas mal utilisés (IE7, IE6 dans une certaine mesure), mieux vaut le résoudre effectivement.
Merci à tous pour vos réactions. Effectivement, absolument tous les navigateurs se comportent comme je le souhaite sauf Netscape (j'ai même testé sur Maxthon, Opera et autres ! c'est pour dire !!). Je vais donc suivre vos conseils... et dire une prière pour ce vieux navigateur de ma jeunesse.

Pour répondre à toi, Florent, j'avais essayé la solution que tu proposes avec les onglets. Mais (je pinaille, je sais ..) l'effet ne me convenait pas : le texte ne monte pas avec l'onglet et çà ne faisait pas l'effet 'vrai onglet qu'on tire'... Bon. Je clos le sujet ! Merci encore !

Nath
Sujet clos
Aller à