CSS >> Image de background et lien

gcvoiron · 4 Décembre 2006

Bonjour,

Le header de mon site (l'image) est affiché en background par mon css :

HTML :

Code:

<tr>
<td width="762" height="133" class="header">&nbsp;</td>
</tr>

CSS :

Code:

.header
{
background:url(images/design/index_05.jpg);
}

Comment faire un lien sur ce header, qui est affiché en css?

Merci.

nadinem · 4 Décembre 2006

Bonsoir,

Tu as essyé d'accorder a .header les attributs d'un lien ?

A+

Nadinem.

gcvoiron · 4 Décembre 2006

Je ne comprends pas ce que tu veux me dire...

Vincent1975 · 4 Décembre 2006

Tu as sûrement essayé, et je suppose que ça ne marche pas, mais au cas où :

Code:

<tr>
<a href=""><td width="762" height="133" class="header">&nbsp;</td></a>
</tr>

On sait jamais :wink:

gcvoiron · 4 Décembre 2006

Non, ça ne marche pas.
Merci quand même.

Dan_A · 4 Décembre 2006

background est destiné à la décoration, rien de plus (pour préserver l'accessibilité).
Les dimensions ne devraient pas apparaître.
On peut toujours tricher et mettre un lien dans la cellule mais ce n'est pas une bonne idée.

narayana · 4 Décembre 2006

Cela devrait fonctionner
voici le code

Code:

<a href="...." class="lien"></a>

fichier css
a.lien{
display:block;
width:100px;
height:100px;
background:url("xxxxx.jpg") no-repeat;
}

s2n · 4 Décembre 2006

J'ai pas le temps de tester, mais essaies quelque chose comme ça:

Code:

<tr>
<td width="762" height="133"><a class="header">&nbsp;</a></td>
</tr>

CSS :

Code:

.header
{
display:block;
width:100%;
height:100%;
background:url(images/design/index_05.jpg);
}

gcvoiron · 4 Décembre 2006

Ca a marché parfaitement avec la méthode de narayana!

Merci beaucoup.

narayana · 5 Décembre 2006

pas de quoi ;-)
Ca fonctionne car il faut mettre un display:block car les liens sont inligne d'habitude.
Mais bon tu ne pourras pas référencer ton image...

Vincent1975 · 5 Décembre 2006

Que veux-tu dire par

tu ne pourras pas référencer ton image

?

e-kiwi · 5 Décembre 2006

>> ?

dans google image

Vincent1975 · 5 Décembre 2006

Ah, parce que l'image est sur la feuille de style ? Ok, je ne voyais pas pourquoi le principe de faire un lien pouvait le pénaliser. Merci :wink: .

rednekk · 26 Septembre 2009

Salut à tous !

Super déterrage !

Je voudrais faire la même chose, à quelque conditions prêt... Je m'explique.

J'ai essayé la méthode de narayana qui fonctionne :

Code:

a.lien1{
display:block;
width:200px;
height:100px;
background:url(images/img1-2.JPG) no-repeat;

Mais je voudrais savoir s'il est possible de faire changer l'image quand la souris passe dessus, tout en conservant la fonction de lien.

Me suis-je bien expliqué ?

UsagiYojimbo · 26 Septembre 2009

Oui mais pour cette partie-là de ton besoin c'est davantage vers le javascript que tu devrais te tourner, pour, lors du survol de la souris sur le lien, changer l'image de background. Avec prototype ça se fait assez simplement.

rednekk · 26 Septembre 2009

Je m'en doutais un peu malheureusement

Mais justement j'aimerais essayer de le faire en CSS... c'est vraiment trop compliqué ou impossible ?

Prototype c'est ce logiciel ?... http://www.prototypejs.org/
Je n'y connais absolument rien en Javascript et j'aurais voulu apprendre bien le CSS avant de passer à autre chose.

UsagiYojimbo · 27 Septembre 2009

Sinon oui en css tu devrais pouvoir le faire via un a.lien1:hover, dans lequel tu changerais le background.

calouu · 27 Septembre 2009

UsagiYojimbo a dit:
Oui mais pour cette partie-là de ton besoin c'est davantage vers le javascript que tu devrais te tourner, pour, lors du survol de la souris sur le lien, changer l'image de background. Avec prototype ça se fait assez simplement.

Non, pas besoin de javascript. Du CSS suffit largement, et c'est bien plus simple et accessible !
Il faut utiliser la pseudo-classe :hover.

Code:

a.lien1:hover {
background:url(images/autre-image.jpg) no-repeat;
}

rednekk · 27 Septembre 2009

Wahou ca marche

Merci beaucoup vraiment !

Je commence à comprendre de mieux en mieux les raccourcis, etc. Merci encore

math95430 · 27 Octobre 2009

Bonjour,

moi sa marchait...mais sa marche plus !

CSS

body
{
color: #000000;
width: 100%;
margin: auto;
background:url(../leplusavancer/retro-blue-abstract-design2.jpg);
background-attachment: fixed;
}

a.lien
{
margin-top:178px;
margin-right:50px;
margin-left:545px;
margin-bottom: ;
display:block;
width:218px;
height:52px;
background:url(../leplusavancer/boutonstreaming.bmp);
}

a.lien:hover
{
margin-top: 178px;
margin-right: 50px;
margin-left: 545px;
margin-bottom: ;
width:218px;
height:52px;
background:url(../leplusavancer/boutonstreaminghover.bmp);
}

a.lien1
{
margin-top: 135px;
margin-right: ;
margin-left: 238px;
margin-bottom: ;
display:block;
width:161px;
height:49px;
background:url(../leplusavancer/boutonupload.bmp);
}

a.lien1:hover
{
margin-top: 135px;
margin-right: ;
margin-left: 238px;
margin-bottom: ;
width:161px;
height:49px;
background:url(../leplusavancer/boutonuploadhover.bmp);
}

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Portail | http://www.every-streaming.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="style" href="design.css">
<base href="file:///C:/Users/math/Desktop/leplusavancer/portail.html"><style xml:base="/C:/Users/math/Desktop/leplusavancer/" type="text/css">
</head>
<body>


<a href="http://streaming.every-streaming.com/" class="lien"></a>
<a href="http://upload.every-streaming.com/" class="lien1"></a>







</body></html>

C'est pour un portail. Et je ne vois pas ou est le problème, les image le CSS et l'HTML sont ds le meme dossier "leplusavancer".
Le fond s'affiche (body) mais pas les boutons !

Cordialement.

calouu · 27 Octobre 2009

Le format .bmp est inadapté ! il faut prendre uniquement des .jpg, des .png ou des .gif

math95430 · 27 Octobre 2009

Sa ne fonctionne pas. A mon avis le problème vien du HTML.(ce qui aurait des répercutions sur le CSS)

PS: Les boutons fonctionnaient en bmp.

calouu · 27 Octobre 2009

Le format bmp n'est pas adapté au web, je persiste et signe ! (lourd et moche)

Sinon, pourquoi utiliser un doctype xhtml 1.1 ? Aucun intérêt dans ton cas, voire problématique avec IE. Prends du xhtml 1.0 ou du html 4.01.. et vu que tu as tendance à oublier la fermeture des balises, le html 4.01 me parait plus adapté.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">

Vire le

Code:

<base href="file:///C:/Users/math/Desktop/leplusavancer/portail.html"><style xml:base="/C:/Users/math/Desktop/leplusavancer/" type="text/css">

Ca ne sert à rien non plus, d'autant que le chemin est relatif à ton arborescence...

Ne laisse pas des propriétés vides dans ta CSS (margin-bottom: ; par exemple). Efface les ou mets-les en commentaire.

Et surtout, mets quelque chose en lien !

Code:

<p><a href="http://streaming.every-streaming.com/" class="lien">toto</a></p>
<p><a href="http://upload.every-streaming.com/" class="lien1">tutu</a></p>

math95430 · 27 Octobre 2009

8O Respect !Je m'incline, et en plus sa fonctionne ! :mrgreen:

Merci énormement ! Jretiendrai la lecon ! ^^

Cordialement.

calouu · 27 Octobre 2009

Y'a pas de quoi

Cela dit, d'un seul coup, j'ai un doute : vu ton pseudo et les chemins /math/ ; aurais-tu l'intention de faire du MathML par hasard ? Car dans ce cas, c'est effectivement du xhtml 1.1 qu'il faut utiliser.

Mais est-ce le cas pour ce site ?

math95430 · 27 Octobre 2009

MathML? qu'est-ce?

calouu · 27 Octobre 2009

Math Markup Language, qui permet d'écrire des formules mathématiques lisibles par le navigateur (enfin... sauf IE bien entendu qui ne l'implémente pas).

Bon, donc ce n'est pas le cas... tu peux fermer la discussion et reprendre une vie normale

bon courage.