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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] Changement d'image de fond de cellule avec une css ?

parappa

taliblanc

Edit : voir plus bas.

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.

Merci.

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

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

Publicité

Profil supprimé

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

masklinn

í dag viðrar vel til loftárása

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?

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

parappa

taliblanc

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.

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

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

masklinn

í dag viðrar vel til loftárása

parappa a écrit :

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

ca va vous coûter cher mon gaillard

Citation :

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

<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

parappa

taliblanc

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

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

parappa

taliblanc

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

parappa

taliblanc

En fait 'y a quelques soucis.

Au lieu d'avoir ceci :

...j'obtiens ceci :

Quelqu'un comprend pourquoi ?

Edit :

En modifiant width: w_image et en mettant la largeur de la case, ça fonctionne déjà mieux :

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 :

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

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

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

masklinn

í dag viðrar vel til loftárása

parappa a écrit :

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

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

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

parappa

taliblanc

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. )

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

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 ) ç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.

Alors le code c'est ça (je peux pas filer la page tu penses ) :

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

Publicité

masklinn

í dag viðrar vel til loftárása

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

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

parappa

taliblanc

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

masklinn

í dag viðrar vel til loftárása

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

parappa

taliblanc

[: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.

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

masklinn

í dag viðrar vel til loftárása

parappa a écrit :

[: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

parappa

taliblanc

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 :

...et ceci dans ff :

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é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. )

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

parappa

taliblanc

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.

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

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
[php/html] bouton submit avec image	GD: 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 plan	Probleme pour renommer une image pendant l'upload.
Plus de sujets relatifs à : [CSS] Changement d'image de fond de cellule avec une css ?

Page générée en 0.072 secondes