[CSS] Changement d'image de fond de cellule avec une css ?

Changement d'image de fond de cellule avec une css ? [CSS] - HTML/CSS - Programmation

Marsh Posté le 23-11-2004 à 14:10:13    

Edit : voir plus bas. :D

Au passage de la souris sur un lien (en rollover kwa), je voudrais faire changer le fond de la cellule dans laquelle le lien se trouve. Est-ce faisable avec une feuille de style (j'imagine que oui ?) Et si oui, comment ? Note : 'faut que ce soit compatible IE. :D  
 
Merci. :)
 


Message édité par parappa le 23-11-2004 à 17:07:35

---------------
DU LINO DE BATARD IMITATION CARREAUX DE CIMENTS ILLEGITIMES§§§
Reply

Marsh Posté le 23-11-2004 à 14:10:13   

Reply

Marsh Posté le 23-11-2004 à 14:11:42    

tonDiv tonLien:hover { background-image...}

Reply

Marsh Posté le 23-11-2004 à 14:13:41    

pour que ca soit compatible avec IE, il faut coller l'image au lien (lien en display:block) et faire le hover sur lui
 
et accessoirement, je vois marqué cellule > tableau > mise en page tableau?
http://rulzofpunk.free.fr/smileys/batte_fou.gif


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 23-11-2004 à 14:16:26    

Masklinn a écrit :


et accessoirement, je vois marqué cellule > tableau > mise en page tableau?
http://rulzofpunk.free.fr/smileys/batte_fou.gif


 
C'est ce qu'on me demande de faire. [:spamafote]
 
Je comprends pas tellement ton histoire de lien en display:block, je vais voir ça. :D


Message édité par parappa le 23-11-2004 à 15:11:02

---------------
DU LINO DE BATARD IMITATION CARREAUX DE CIMENTS ILLEGITIMES§§§
Reply

Marsh Posté le 23-11-2004 à 14:20:39    

parappa a écrit :

Je suis contraint/forcé/tousketuveux par mon boss. [:spamafote]


ca va vous coûter cher mon gaillard http://rulzofpunk.free.fr/smileys/batte_fou.gif

Citation :

Je comprends pas tellement ton histoire de lien en display:block, je vais voir ça. :D


 

<td>
    <a class="lien_machin">blabla</a>
</td>


/* fichier CSS */
td a.lien_machin {
    display: block;
    background: url(image_de_base) no-repeat;
    width: w_image;
    height: h_image;
    padding: 0px;
    margin: 0px;
    border: 0px;
}
 
td a.lien_machin:hover {
    background-image: url(image_rollover);
}


Message édité par masklinn le 23-11-2004 à 14:21:29

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 23-11-2004 à 14:33:43    

Très fort (je risquais pas de trouver :d) ! Merci beaucoup. :)


---------------
DU LINO DE BATARD IMITATION CARREAUX DE CIMENTS ILLEGITIMES§§§
Reply

Marsh Posté le 23-11-2004 à 14:42:05    

Une question supplémentaire tout de même (en fait, 2) :  
 
1. pourquoi utilises-tu pour le td a.lien_machin la balise background, et pour le td a.lien_machin:hover la balise background-image ?  
 
2. Je ne comprends pas pourquoi mon texte se colle en haut de la cellule depuis que j'ai rajouté tout ça (même en ajoutant des vertical-align: middle.) Une idée ?


---------------
DU LINO DE BATARD IMITATION CARREAUX DE CIMENTS ILLEGITIMES§§§
Reply

Marsh Posté le 23-11-2004 à 14:54:20    

En fait 'y a quelques soucis. :D
 
Au lieu d'avoir ceci :
 
http://www.cineria.com/tmp/orig.gif
 
...j'obtiens ceci :  
 
http://www.cineria.com/tmp/modif.gif
 
Quelqu'un comprend pourquoi ? :D
 
Edit :  
 
En modifiant width: w_image et en mettant la largeur de la case, ça fonctionne déjà mieux :
 
http://www.cineria.com/tmp/modif2.gif
 
Par contre ça m'oblige à avoir la même largeur pour toutes les cases, et ça c'est impossible. Et faire un style pour chaque case, c'est lourd. :/
 
Edit 2 :
 
En virant le param width: w_image, ça fonctionne déjà beaucoup mieux :
 
http://www.cineria.com/tmp/modif3.gif
 
Mais pourquoi diable le texte va-t-il se caler en haut ? :o


Message édité par parappa le 23-11-2004 à 15:04:54

---------------
DU LINO DE BATARD IMITATION CARREAUX DE CIMENTS ILLEGITIMES§§§
Reply

Marsh Posté le 23-11-2004 à 15:16:51    

parappa a écrit :


Mais pourquoi diable le texte va-t-il se caler en haut ? :o


Essaies d'ajouter dans ton CSS
td a.lien_machin {
    vertical-align: middle;
}
 
pour les width et height, après réflexion enlève les tous les deux (le a s'étendra tout seul pour prendre tout le <td>, c'était stupide de ma part de fixer la taille :pfff: ), et w_image et h_image fallait les remplacer par la hauteur et la largeur de ton image :o
 
par contre tu peux utiliser min-width et min-height avec les tailles d'image pour être sur que les cases ne seront pas plus petites que les images (pas obligé non plus, si les images sont plus grandes elles s'afficheront pas)
 
 
Initialement j'utilise background pour mettre l'image de fond en no-repeat (ca permet aussi de préciser une couleur), dans le :hover j'ai juste a changer l'image, le no-repeat est hérité (et donc reste en place)
 
 
et on parle de propriétés en CSS, les balises et attributs c'est en html [:mmmfff]
(PS: si on pouvait avoir la page ca serait plus simple [:cupra] )


Message édité par masklinn le 23-11-2004 à 15:18:56

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 23-11-2004 à 15:33:11    

Masklinn a écrit :

Essaies d'ajouter dans ton CSS
td a.lien_machin {
    vertical-align: middle;
}


 
Ça fonctionne pas (j'ai essayé tu penses bien. :D)
 

Masklinn a écrit :


pour les width et height, après réflexion enlève les tous les deux (le a s'étendra tout seul pour prendre tout le <td>, c'était stupide de ma part de fixer la taille :pfff: ), et w_image et h_image fallait les remplacer par la hauteur et la largeur de ton image :o


 
Lorsque j'ai viré le width il a bien pris la largeur définie de la case. Si je met une valeur fixe (c'est ce que j'avais fait au début, j'avais bien compris que w_image c'était la largeur de l'image :D) ça donne modif2.gif (post au dessus) : toutes les cases ont la largeur que j'entre. Ça vient peut-être du fait que l'image que j'utilise en background est repété sur x.  
Si je vire le height, le tableau ne fait plus que quelques px de haut (le minimum vital pour faire rentrer le texte.)  
 

Masklinn a écrit :


par contre tu peux utiliser min-width et min-height avec les tailles d'image pour être sur que les cases ne seront pas plus petites que les images (pas obligé non plus, si les images sont plus grandes elles s'afficheront pas)


 
Je pense pas en avoir besoin dans ce cas-là.
 

Masklinn a écrit :


Initialement j'utilise background pour mettre l'image de fond en no-repeat (ca permet aussi de préciser une couleur), dans le :hover j'ai juste a changer l'image, le no-repeat est hérité (et donc reste en place)


 
Mon image de background est repétée sur x, je peux peut-être utiliser background-image dans les 2 cas à ce moment-là.
 

Masklinn a écrit :


et on parle de propriétés en CSS, les balises et attributs c'est en html [:mmmfff]
(PS: si on pouvait avoir la page ca serait plus simple [:cupra] )


 
J'en prends bonne note. :D
 
Alors le code c'est ça (je peux pas filer la page tu penses :D) :
 

  • css :

.menu {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #151515;
 text-align: center;
 text-decoration: none;
 vertical-align: middle;
}
 
td a.menu {
    display: block;
    background: url(../images_interface/menu_fond.gif) repeat-x;
    height: 29px;
    vertical-align: middle;  
}
 
td a.menu:hover {
    background-image: url(../images_interface/fond_rollover.gif);
    background-repeat: repeat-x;
}


 

  • page html :

<table width="498" height="29" border="0" cellpadding="0" cellspacing="0">
                                <tr>  
                                  <td width="90" height="29"><a href="#" class="menu">Pr&eacute;sentation</a></td>
                                  <td width="120" height="29"><a href="#" class="menu">Gamme classique</a></td>
                                  <td width="121" height="29"><a href="#" class="menu">Gamme utilitaire</a></td>
                                  <td width="109" height="29"><a href="#" class="menu">Gamme prestige</a></td>
                                  <td width="58" height="29"><a href="#" class="menu">Contact</a></td>
                                </tr>
                              </table>


---------------
DU LINO DE BATARD IMITATION CARREAUX DE CIMENTS ILLEGITIMES§§§
Reply

Marsh Posté le 23-11-2004 à 15:33:11   

Reply

Marsh Posté le 23-11-2004 à 15:35:38    

tu peux enlever le background-repeat: repeat-x du hover (il prendra celui qui vient du normal)
publie le tout que je puisse bidouiller (chuis pas encore assez fort pour donner des conseils ultra supaïr comme ca)
les tableaux c'est toujours mal :o


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 23-11-2004 à 15:45:41    

Here it is : http://www.cineria.com/tmp/
 
Merci beaucoup du coup de main en tout cas. :)


---------------
DU LINO DE BATARD IMITATION CARREAUX DE CIMENTS ILLEGITIMES§§§
Reply

Marsh Posté le 23-11-2004 à 18:33:43    

bon, ben tes tables ont fini par me lourder donc j'ai tout refait avec des listes, j'en ai profité pour que ca valide xhtml1.0 strict au passage
 
j'ai refait les images aussi, sont plus légères maintenant


Message édité par masklinn le 23-11-2004 à 18:36:01

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 24-11-2004 à 09:26:49    

[:sealbirman]
 
Ben merci beaucoup (j'y comprends pas grand chose, mais ça viendra, faudrait juste qu'on me laisse le temps de me pencher sur les css...), ça marche très bien sous ff. Le soucis, c'est que sous ie c'est pire qu'avant. :D


---------------
DU LINO DE BATARD IMITATION CARREAUX DE CIMENTS ILLEGITIMES§§§
Reply

Marsh Posté le 24-11-2004 à 10:24:04    

parappa a écrit :

[:sealbirman]
 
Ben merci beaucoup (j'y comprends pas grand chose, mais ça viendra, faudrait juste qu'on me laisse le temps de me pencher sur les css...), ça marche très bien sous ff. Le soucis, c'est que sous ie c'est pire qu'avant. :D


 [:gratgrat]  
bizarre, ca fonctionne très bien sous IE6SP1...
 
Ah oui, faut qu'il soit en quirk mode, si il est en standard mode il fonctionne pas (contrairement aux autres) [:mmmfff]  
 
http://www.quirksmode.org/css/quirksmode.html


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 24-11-2004 à 11:05:11    

Au temps pour moi, ça fonctionne convenablement.  
Enième soucis : lorsque je mets le code dans la table du menu, tout déconne. Ça donne ceci dans ie :
 
http://www.cineria.com/tmp/table_ie.gif
 
...et ceci dans ff :
 
http://www.cineria.com/tmp/table_ff.gif
 
Le code :  
 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
 
<body>
    <table width="520" height="35" border="0" cellpadding="0" cellspacing="0">
                    <tr>  
                      <td valign="top">
       
       <div id="menucontainer">  
        <div id="navcontainer">
       <ul id="navbar">
         <li><a href="#" class="menu">Pr&eacute;sentation</a></li>
         <li><a href="#" class="menu">Gamme classique</a></li>
         <li><a href="#" class="menu">Gamme utilitaire</a></li>
         <li><a href="#" class="menu">Gamme prestige</a></li>
         <li><a href="#" class="menu">Contact</a></li>
       </ul>
                </div>
      </div>
       
       </td>
                    </tr>
                  </table>
</body>
</html>


 
Chuis tout de même en train de regarder ceci : http://mammouthland.free.fr/cours/css/cours3.php pour trouver une autre façon de faire (comprendre : une façon que je pigerais davantage. :D)


---------------
DU LINO DE BATARD IMITATION CARREAUX DE CIMENTS ILLEGITIMES§§§
Reply

Marsh Posté le 24-11-2004 à 14:24:16    

Bon beh avec un simple padding-top:10px j'ai résolu mon problème. Merci beaucoup. :)
Edit : ah merde, ça déconne sous ff. :D


Message édité par parappa le 24-11-2004 à 14:24:50

---------------
DU LINO DE BATARD IMITATION CARREAUX DE CIMENTS ILLEGITIMES§§§
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed