CSS >> Image de background et lien

le Sam Sep 26, 2009 18:01

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.

le Dim Sep 27, 2009 9:33

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

le Dim Sep 27, 2009 10:06

UsagiYojimbo a écrit: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: Tout sélectionner: a.lien1:hover { background:url(images/autre-image.jpg) no-repeat; }

le Dim Sep 27, 2009 11:06

Wahou ca marche

Merci beaucoup vraiment !

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

le Mar Oct 27, 2009 13:41

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.

le Mar Oct 27, 2009 13:54

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

le Mar Oct 27, 2009 14:02

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.

le Mar Oct 27, 2009 14:46

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: Tout sélectionner: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Vire le

Code: Tout sélectionner: <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: Tout sélectionner: <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>

le Mar Oct 27, 2009 14:56

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

Merci énormement ! Jretiendrai la lecon ! ^^

Cordialement.

le Mar Oct 27, 2009 15:06

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 ?

le Mar Oct 27, 2009 15:24

MathML? qu'est-ce?

le Mar Oct 27, 2009 15:39

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.

CSS >> Image de background et lien

Re: CSS >> Image de background et lien

Re: CSS >> Image de background et lien

Re: CSS >> Image de background et lien

Re: CSS >> Image de background et lien

Re: CSS >> Image de background et lien

Re: CSS >> Image de background et lien

Re: CSS >> Image de background et lien

Re: CSS >> Image de background et lien

Re: CSS >> Image de background et lien

Re: CSS >> Image de background et lien

Re: CSS >> Image de background et lien

Re: CSS >> Image de background et lien

Formation recommandée sur ce thème :

Lectures recommandées sur ce thème :

Qui est en ligne