28173 sujets

CSS et mise en forme, CSS3

Rollover en css dans un tableau pour éviter javascript

Bonjour,

J'essaie de résoudre un soucis similiaire : faire un menu rollover dans une cellule tableau (sic). Pensez-vous cela possible ?

Je m'explique : dans la partie haute où y'a les menus, j'aimerai que le menu soit du texte et non une image. Après, quand on passe la souris dessus, y'a le fond de la cellule ou le fond du bloc css peu importe qui change.

Est-ce possible ? Cela m'éviterai d'utiliser du javascript en fait...

Pages trouvées sur le web :
- http://www.search-this.com/website_design/css_rollover_buttons.aspx
- http://mammouthland.free.fr/cours/css/cours7.php

ps: j'ai posté - par erreur - le même message dans le topic dédié au javascript vu qu'ici c'est pour CSS. Merci de me répondre ici ! Smiley cligne
Bonjour stefhan,

1. Le "rollover" est faisable sur n'importe quel élément, en utilisant la pseudo-classe :hover dans une CSS.

Appliquée à une cellule de tableau, cela donne, dans ta css :
td
{
   /* propriétés CSS de ta cellule à l'état normal */
}

td:hover
{
   /* propriétés CSS de ta cellule quand elle est survolée */
}


Cependant, il te faut savoir qu'il y a toujours une "tare" dedans. En effent, tous les navigateurs modernes (Firefox, Opera, Netscape, Safari, ...) savent appliquer les propriétés de la pseudo-classe :hover à n'importe quel élément, MAIS MSIE ne sait pas le faire puisqu'il ne reconnait :hover que sur les liens <a> !

Pour que ça fonctionne sur MSIE, tu vas devoir employer javascript en conjonction avec CSS.
Voilà la partie CSS :
td
{
   /* propriétés CSS de ta cellule à l'état normal */
}

td:hover, td.hover
{
   /* propriétés CSS de ta cellule quand elle est survolée */
}

Voilà la partie (X)HTML :
<td onmouseover="applyClass(this,'hover') onmouseout="applyClass(this,'')"">blabla</td>

Et voilà la partie DOM/Javascript (à insérer dans le <head> de ta page) :

<script type="text/javascript">
<!--
function applyClass(oElement,sCSSClass)
{
     oElement.className = sCSSClass;
}
-->
</script>


2. Pour aligner ton menu "horizontalement", donc faire un menu horizontal, si tu utilises une liste <ol> ou <ul>, te suffit de déclarer les éléménts <li> comme étant des éléments "en ligne". En CSS :
li
{
    display: inline;
}

Dans le cas d'un tableau (ce qui n'est PAS recommandé, puisqu'un menu est structurellement une liste), tu peux adopter la structure (X)HTML suivante :
<table>
    <tr>
        <td>option 1</td><td>option2</td><td>etc ...</td>
    </tr>
</table>

Et voilà, ton menu est horizontal !

Voilà, j'espère que ça t'aura aidé Smiley cligne

Je te suggère néanmoins de consulter ce petit article sur OpenWeb à propos de l'importance de la sémantique et de la structuration des pages web Smiley lol
Modifié par Ladytron (18 May 2006 - 15:46)
Merci à toi Ladytron !! Smiley cligne

Une amie m'a aussi aidée (merci à elle !!) pour l'alignement et vous allez pas me croire : il a juste suffit d'un float: left; et un display: inline; bien placé dans le .css !

Dingue... et casse-tête quand même !! Smiley biggol

Vive le CSS Smiley lol
Hello,

Voilà le code final que j'ai utilisé :

.espace {
	display: inline;
	list-style-type: none;
	color: #000000;
	clear: both;
	text-indent: 1px;
}

.espace form {
	text-align: left;
}

ul.espace li {
	width: 144px;
	float: left;
	height: 25px;
	display: block;
}

ul.espace li a {
	color: #000000;
	display: block;
	height: 25px;
	font: bold 16px arial, helvetica, sans-serif;
	text-decoration: none;
	padding: 5px 0 0 0;
	voice-family: "\"}\"";
	voice-family:inherit;
	height:20px;
}

html>body ul.espace li a {
	height: 20px;
	text-decoration: none;
}

ul.espace a:hover {
	color: #000000;
	background-image: url(../images/espaceON.jpg);
	clear: both;
	text-decoration: none;
}

#espaceActif {
	background-image: url(../images/espaceON.jpg);
}


C'est visible sur le site de salonmicroentreprises.com, le CSS interface.css.

Petites explications supplémentaires :


	voice-family: "\"}\"";
	voice-family:inherit;

html>body ul.espace li a {
	height: 20px;
	text-decoration: none;
}

--> ce sont les petites 'déviations' pour IE

.espace form {
	text-align: left;
}

--> c'est pour forcer mon formulaire 'menu-popup' à se positionner à gauche

#espaceActif

--> dans le code html il suffit de rajouter id="espaceActif" quand tu es dans la rubrique en question.

Voilà Smiley smile
Modifié par stefhan (09 Feb 2007 - 15:02)
Sujet clos
Aller à