18041 sujets

Questions générales et questions de débutants

Suite au tuto "Afficher / Masquer des éléments sans javascript&am

Bonsoir !

Ce fut une joie de trouver ce tuto, c'était exactement ce que j'recherchais Smiley lol

Par contre, j'ai un petit probleme : je dois placer 5 images de ce type là, et je me retrouve donc avec plusieurs blocs dans mon fichier HTML, et ça en fait fonctionner qu'un Smiley sweatdrop

Qu'est ce que j'peux faire ? :x

Mettre les codes de ce type là dans le fichier CSS ?
Si c'est ça, est ce que quelqu'un peut me le restranscrire sous forme pour fichier CSS? Smiley lol 
<style type="text/css">
<!--
a {
text-decoration: none; /* définition du lien qui affichera le "calque" */
}
a:hover {
background: none; /* correction d'un bug IE */
}
a span { /* définition de la balise <span> inclue dans <a> */
display: none;
}
a:hover span { /* définition de la balise <span> au survol */
display: inline;
position: absolute;
top: 200px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
left: 100px;
width: 200px;
height: 100px;
background: green;
text-align: center;
color: white;
}
-->
</style>



Merci bien ! =)
Modifié par Chocolate (22 Apr 2008 - 22:58)
Bonjour Chocolate,

Je ne comprends pas très bien ta question... Smiley ohwell

Typiquement le tuto sert à afficher au survol d'un lien, un texte une image, etc...
Comme indiquer dans le tutoriel, tu peux (dois) "styler" : le lien lui même et l'élément qui va apparaître (la balise span qui contiendra le texte, l'image, la légende,...) via la feuille de style rattaché à ta page et qui pourra servir pour tout les liens contenant la balise span :

<a href="Un lien si tu le souhaites">Survolez-moi...<span><img src="ton image" alt=""/></span></a>
<a href="#">><img src="ton image" alt=""/><span>Du texte....</span></a>
<a href="#">Survolez-moi...<span><img src="ton image" alt=""/></span></a>
Etcaetera


Peux-tu montrer le code html que tu produits ou une page en ligne ?

Cdt,
Sylvain
Merci de votre réponse =)

Un bout de code de la page HTML :



<div class="icona">
<style type="text/css">
<!--
a {
text-decoration: none; /* définition du lien qui affichera le "calque" */
}
a:hover {
background: none; /* correction d'un bug IE */
}
a span { /* définition de la balise <span> inclue dans <a> */
display: none;
}
a:hover span { /* définition de la balise <span> au survol */
display: inline;
position: absolute;
top: 25px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
left: 20px;
}
-->
</style>


<a href="index2.php"><img src="cross1.gif" border="0"<span><img src="blog.gif" border="0"</span></a></div>



<div class="iconb">
[#red]
<style type="text/css">
<!--
a {
text-decoration: none; /* définition du lien qui affichera le "calque" */
}
a:hover {
background: none; /* correction d'un bug IE */
}
a span { /* définition de la balise <span> inclue dans <a> */
display: none;
}
a:hover span { /* définition de la balise <span> au survol */
display: inline;
position: absolute;
top: 45px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
left: 222px;
color: white;
}
-->
</style>[/#]

<a href="me.php"><img src="cross2.gif" border="0"<span><img src="me.gif" border="0"</span></a>
</div>


Donc en fait je dois placer plusieurs images ou l'on peut surligner, mais l'image qui apparait quand on passe dessus ne se situe pas au même endroit dans chaque cas...
Et la dans mon code c'est que les propriétés du bloc rouge qui s'appliquent sur chaque image Smiley sweatdrop
Hum... Smiley sweatdrop

Une petite révision s'impose Smiley cligne

Tes styles css doivent se trouver dans une feuille de style externe que tu appelles dans ton entête de document :
<head>
<meta http-equiv="Content-Type" content="text/html; charset= " />
<title></title>
etc...
<link rel="stylesheet" type="text/css" href="fichier.css">
</head>
et la suite...


Ou, comme tu l'as fait, mais toujours dans l'entête :

<head>
<meta http-equiv="Content-Type" content="text/html; charset= " />
<title></title>
etc...
<style type="text/css">
tes styles
</style>
</head>
et la suite...


Ensuite, il faudra peut-être définir un id pour chaque élément à afficher...mais je t'avoue avoir un peu de mal à saisir ce que tu souhaites faire Smiley ohwell

Une petite page en ligne ?

Cdt,
Sylvain
Passe le curseur sur les deux premières croix =)

Le titre de la 2e est placé comme il faut, mais pas celui de la 2e... Smiley bawling

ca suit les même propriétés que j'ai mis pour la 2e croix Smiley sweatdrop

Peut être que j'dois mettre d'autre noms ? genre à la place de <span> j'met "<span2"? Smiley lol
Modifié par Chocolate (08 May 2008 - 12:35)
Bonsoir Chocolate,

Je réitère mon invitation à réviser les bases.

Soit tu fais des includes PHP et ce n'est pas au point, soit tu as quelques lacunes (nous en avons tous Smiley cligne ) qu'il faudrait combler :
-Tu n'as pas de Doctype... Et ce n'est pas bien
La structure d'un document html se présente classiquement comme ceci :

<!DOCTYPE> [#red]A définir[/#]
<html>
  <head>
    <meta />
    <title></title>
[#black]+ feuille de style s'il y a lieu...[/#]
  </head>
  <body>
[#black]+ Contenu[/#]
  </body>
</html>

-Ton code se présente ainsi :
[#red][b]<body[/b][/#] style="cursor:crosshair;"> 
<title>CELINE'S RANDOM THINGS - v.3</title>
[#red][b]<head>[/b][/#]
blablabla

Je te laisse chercher l'(es)erreur(s) Smiley cligne

-Tes balises images ne sont pas fermées...
<a href="index2.php"><img src="cross1.gif" border="0"[#red][b]/>[/b][/#]
<span><img src="blog.gif" border="0"[#red][b]/>[/b][/#]</span></a>

-border="0" devrait se trouver... avec les styles Smiley smile
-Il manque les balises alternatives : alt=""
-Une div se ferme en fin de document sans avoir été ouverte...
-La balise <body> n'est pas fermée...
-La balise <html> est parti en vacance... Smiley sweatdrop

-A quoi te sert cross1.gif ? Faire un rollover ? En ce cas, utilises la même image (cross2, cross3, etc...ne sont pas utiles)
Tu peux par exemple mettre cette image en background de ton lien survolé (a:hover)...à étudier...

Bref, je vois que tu es en plein "recodage", cela laisse de l'espoir... Smiley lol
(en passant, penses "aux vieux" (pour le format par exemple...) oublies les popup...et mets de la couleur boudiou !!! Smiley cligne )

A part cela, il semble que tu veuilles afficher tes éléments en fonction de ton design (me, blog, etc) :

1/ inutile de répéter les styles communs (a, a:hover, a span ) ils fonctionneront pour tous les liens de ta page.
2/c'est effectivement au niveau de a:hover span qu'il va falloir intervenir :
"<span2>"?
Tu n'es pas loin de la vérité Smiley cligne
Tu vas devoir définir un identifiant spécifique pour chaque élément que tu souhaites afficher :
Basiquement :
css :

a:hover span#me {
display: inline;
position: absolute;
top: 25px; 
left: 20px;
}
a:hover span#blog { 
display: inline;
position: absolute;
top: 45px;
left: 222px;
color: white;
}
etc...

html :
<a href="index2.php"><img src="cross1.gif" alt=""/><span id="me"><img src="me.gif" alt=""/></span></a>
<a href="index2.php"><img src="cross1.gif" alt=""/><span id="blog"><img src="blog.gif" alt=""/></span></a>
Etcaetera


Voilà, je crois avoir mérité d'aller faire un petit dodo.
Bon courage et bonne continuation,
Cdt,
Sylvain
Oulalala merci bien pour tout ça Smiley confused

Je vais analyser ce que t'a dis et et me corriger Smiley cligne

J'ai fais de différentes cross parce que j'ai pas réussi à la mettre en transparent... 'Fin ça a manger tous les pixels sur le côtés quoi Smiley ohwell
Je vais peut être reessayer en enlevant pixel par pixel u_u'

(La pop up c'est la solution pour faire plus simple car je savais pas comment faire pour faire un version sur toute une page adaptable à n'importe quelle taille de pc... Smiley sweatdrop Enfin j'peux trouver ça sur le code de Blogger

La prochaine version sera sur une page entière et colorée pour le printemps/été Smiley lol )

Merci merci !


EDIT: Ca y'est, tout fonctionne comme il faut 8D (bon les images un peu à la newbie avec le font collé et bidouillé, m'enfin bon Smiley langue )
Modifié par Chocolate (24 Apr 2008 - 20:27)
Sujet clos
Aller à