Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
835 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°905517
parappa
taliblanc
Posté le 23-11-2004 à 14:10:13  profilanswer
 

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§§§
mood
Publicité
Posté le 23-11-2004 à 14:10:13  profilanswer
 

n°905525
Profil sup​primé
Posté le 23-11-2004 à 14:11:42  answer
 

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

n°905530
masklinn
í dag viðrar vel til loftárása
Posté le 23-11-2004 à 14:13:41  profilanswer
 

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


---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°905536
parappa
taliblanc
Posté le 23-11-2004 à 14:16:26  profilanswer
 

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§§§
n°905546
masklinn
í dag viðrar vel til loftárása
Posté le 23-11-2004 à 14:20:39  profilanswer
 

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

---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°905566
parappa
taliblanc
Posté le 23-11-2004 à 14:33:43  profilanswer
 

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


---------------
DU LINO DE BATARD IMITATION CARREAUX DE CIMENTS ILLEGITIMES§§§
n°905590
parappa
taliblanc
Posté le 23-11-2004 à 14:42:05  profilanswer
 

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§§§
n°905615
parappa
taliblanc
Posté le 23-11-2004 à 14:54:20  profilanswer
 

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§§§
n°905657
masklinn
í dag viðrar vel til loftárása
Posté le 23-11-2004 à 15:16:51  profilanswer
 

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

---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°905680
parappa
taliblanc
Posté le 23-11-2004 à 15:33:11  profilanswer
 

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§§§
mood
Publicité
Posté le 23-11-2004 à 15:33:11  profilanswer
 

n°905683
masklinn
í dag viðrar vel til loftárása
Posté le 23-11-2004 à 15:35:38  profilanswer
 

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


---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°905696
parappa
taliblanc
Posté le 23-11-2004 à 15:45:41  profilanswer
 

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§§§
n°905905
masklinn
í dag viðrar vel til loftárása
Posté le 23-11-2004 à 18:33:43  profilanswer
 

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

---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°906288
parappa
taliblanc
Posté le 24-11-2004 à 09:26:49  profilanswer
 

[: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§§§
n°906353
masklinn
í dag viðrar vel til loftárása
Posté le 24-11-2004 à 10:24:04  profilanswer
 

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


---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°906377
parappa
taliblanc
Posté le 24-11-2004 à 11:05:11  profilanswer
 

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§§§
n°906623
parappa
taliblanc
Posté le 24-11-2004 à 14:24:16  profilanswer
 

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§§§

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[php/html] bouton submit avec imageGD: get image size qui retourne rien...
"réserver" la zone d'une image en attendant son chargement ?alignement image
taille d'une image[iText]pb avec PdfPTable, PdfPCell et image
[CSS] Définir la taillle de la marque d'une liste ?variable globale et css
image arrière planProbleme pour renommer une image pendant l'upload.
Plus de sujets relatifs à : [CSS] Changement d'image de fond de cellule avec une css ?


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR