18073 sujets

Questions générales et questions de débutants

[Résolu] Rollover css

Je cherche à aligner 3 images (onglets qui bouge au rollover) horizontalement.
Lorsque je change display:block en display:inline, les 3 images disparaissent de l'écran (écran blanc, les images sont-elles hors de la zone visible?) aussi bien avec Ie que FireFox. J'ai essayé de jouer un peu avec les margin ou background-position pour faire revenir les images en zone visible mais marche pas. L'image fait 215px sur 27px. Tout fonctionne bien en mode block. Etrange...


<head>
<style type="text/css" media="screen">
a#button1a {
    display: inline;
    width: 215px;
    height: 27px;
    background-image: url(l3-l2.gif);
    background-position: 0 0;
    margin: 0 auto;
}
a#button1a:hover {
    background-position: 0 -215px;
    background-image: url(l3-ro.gif);
}
a .alt {display: none;}

 </style>
</head>
---
<body>
<a id="button1a" href="#"><span class="alt"></span></a>
<a id="button1a" href="#"><span class="alt"></span></a>
<a id="button1a" href="#"><span class="alt"></span></a>
</body>
upload/2771-tabstest.gif
Modifié par cedric07 (01 Aug 2005 - 16:42)
Bonjour,

Plusieurs choses :
* Tu utilises le même id pour plusieurs éléments différents ce qui n'est pas autorisé. Remplace id par class ce qui est adapté, ou mieux, utilise un conteneur pour tes liens auquel tu attribues un id et ensuite tu peux gérer tes liens par le selecteur tonconteneur#tonid a (cf mon 3eme point pour le conteneur plus adapté)

* Selon le doctype de ta page (que nous ne connaissons pas), il est interdit de placer directement des liens (éléments en ligne) directement dans le body

* Pour les menus, il est généralement conseillé d'utiliser une liste non ordonnée pour le balisage, ce qui permet par ailleurs plus de souplesse dans la mise en forme.

* Ce lien devrait t'en apprendre plus sur la mise en forme des menus en onglets par exemple : http://css.maxdesign.com.au/
the_penguin a écrit :
essaie float: left; dans a#button1a...


Ok, j'ai rajpouté float: left; et ca marche nickel dans Ie et FireFox. Big thanks (comment j'indique [RESOLU]?)
Olivier a écrit :
Bonjour,

Plusieurs choses :
* Tu utilises le même id pour plusieurs éléments différents ce qui n'est pas autorisé. Remplace id par class ce qui est adapté, ou mieux, utilise un conteneur pour tes liens auquel tu attribues un id et ensuite tu peux gérer tes liens par le selecteur tonconteneur#tonid a (cf mon 3eme point pour le conteneur plus adapté)

* Selon le doctype de ta page (que nous ne connaissons pas), il est interdit de placer directement des liens (éléments en ligne) directement dans le body

* Pour les menus, il est généralement conseillé d'utiliser une liste non ordonnée pour le balisage, ce qui permet par ailleurs plus de souplesse dans la mise en forme.

* Ce lien devrait t'en apprendre plus sur la mise en forme des menus en onglets par exemple : http://css.maxdesign.com.au/


-Ah tiens pour l'id, je pensais que l'id était limité à la balise dans lequel on l'utilise, or tu sembles me dire que c'est encore plus restrictif, seulement une fois dans cette balise (ici <a>)?

- Mon doctype est transitional

Big merci pour la pertinence de tes remarques... ca sent l'expert Smiley lol
Pour l'id, dans l'ensemble d'une page, tu ne peux utiliser qu'une seule fois la même valeur.

Et tu ne peux par ailleurs indiquer qu'un seul id par balise.

<a id="machin" id="bidul"> est interdit !
Olivier a écrit :
Pour l'id, dans l'ensemble d'une page, tu ne peux utiliser qu'une seule fois la même valeur.

Et tu ne peux par ailleurs indiquer qu'un seul id par balise.

<a id="machin" id="bidul"> est interdit !


juste d'ailleurs, j'ai mis le même id pour la demo mais en réalité les 3 images seront différentes et l'id sera different aussi
Tiens je viens de me rendre que les images n'apparraîssent pas à l'impression ni dans IE ni dans FireFox, serait-ce parce qu'il n'y a pas de css pour l'impression? ...
Tes images sont en background, par défaut les images de fond ne sont pas imprimées.

Par ailleurs, dans ton menu, il n'y a même pas texte pour le menu justement pour l'impression mais aussi pour les navigateur texte, navigateur sans CSS etc pour les moteurs...

C'est en fait un menu totalement inutilisable Smiley cligne
Effectivement, je m'étais concentré sur la tech en premier et tu as raison de rappeler cela

J'ai rajouté du texte alternatif pour l'impression et l'accessibilité sans css

dans la feuille de style pour l'impression
a .alt {display: inline;}

et le texte "Niveau x" apparaît à l'impression

<a id="button1a" href="#"><span class="alt">Niveau1</span></a>
<a href="#" id="button2a"><span class="alt">Niveau2</span></a>
<a href="#" id="button3a"><span class="alt">Niveau3</span></a>
cedric07 a écrit :
Effectivement, je m'étais concentré sur la tech en premier et tu as raison de rappeler cela

J'ai rajouté du texte alternatif pour l'impression et l'accessibilité sans css


Ce n'est hélas pas aussi simple pour l'accessibilité :
- Ton texte ayant un style display="none" à l'affichage, il ne sera pas lu par de nombreux lecteurs d'écran,
- Rien n'apparaîtra dans IE si l'utilisateur a coché l'option d'accessibilité "Ignorer les couleurs spécifiées dans les pages Web" (qui agit aussi sur les images d'arrière-plan CSS).

Les seuls "onglets" réellement accessibles sont ceux qui affichent vraiment le texte du lien, et se contente de faire un effet sur la couleur ou l'image à l'arrière-plan de celui-ci.
Modifié par Laurent Denis (02 Aug 2005 - 08:22)
Sujet clos
Aller à