28172 sujets

CSS et mise en forme, CSS3

2 questions de css

Bonjours a tous,
je me pose une question en css ( enfin non 2 Smiley lol )

- je voudrais écrire du texte sur ma page mais depuis le css
ex :
j'ai un texte dans mon css un peu comme une image de fond qui est "ho bladi ho blada"
Et donc avec un hover je voudrais que lorsque je passe dessus j'ai "yéyéyé"
qui le remplace.

- je voudrais changer deux contenu en même temps par un hover
ex :
j'ai un menu "toto" lorsque je passe il devient bleu
je voudrais qu'au même moment une autre image change au passage sur "toto"

Voilou, si vous avez des sites qui utilises mes questions je veux bien les voir pour comprendre comment ça marche si vous ne voulez pas perdre de temps a m'expliquer.

Merci beaucoup ! Smiley smile
Hello blodiblodi et bienvenue, Smiley smile

blodiblodi a écrit :
- je voudrais écrire du texte sur ma page mais depuis le css
Oui mais non ! Le css ne sert qu'à la présentation : le contenu (le texte) doit se trouver dans le code html. Il faudrait à priori regarder du côté de JavaScript pour afficher/masquer les éléments concernés (qui, en tant que langage client, est justement fait pour gérer les interactions)... et prévoir le cas où JavaScript n'est pas disponible.

blodiblodi a écrit :
- je voudrais changer deux contenu en même temps par un hover
Cela est possible en css si les 2 éléments sont contenus par un même parent et que l'image en question n'est que décorative et donc en background css. Par exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
#parent li {
	background-color: green;
}

#parent p {
	background: url(image1.jpg);
}

#parent:hover li {
	background-color: yellow;
}

#parent:hover p {
	background: url(image2.jpg);
}
</style>
</head>
<body>
<div id="parent">
	<ul>
		<li>BlaBla</li>
		<li>BliBli</li>
		<li>BloBlo</li>
	</ul>
	<p>Lorem Ipsum</p>
</div>
</body>
</html>
Si la réponse à l'une de ces questions est non, il faudra également faire ça en JavaScript.
merci beaucoup pour ces réponses rapides Smiley smile
pour la 2eme question je m'attendais a quelque chose de plus "technique", tu as donc confirmé ma 1er intuition Smiley bawling

je vais chercher un peu a apprendre le js car il me semble indispensable . . .
si vous avez de trés bon site d'apprentissages js je veux bien,

merci encore, a bientôt.
Sujet clos
Aller à