Nouveau sur le forum ? Voici votre case départ pour bien débuter.

Liens contextuels :

Forum Alsacréations : CSS et Standards Web · Salon spécifique aux Tutoriels et articles Alsacréations · Suite au tuto "Afficher / Masquer des éléments sans javascript&am
Rechercher dans le sujet :
Auteur
Chocolate
# 22 Apr 2008 - 22:57:38
Citer
4 Posts
 Bonsoir !

Ce fut une joie de trouver ce tuto, c'était exactement ce que j'recherchais 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 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? 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)
^
6l20
# 23 Apr 2008 - 15:50:10
Citer
Chasseur de 1/2 Kiwiz
651 Posts
 Bonjour Chocolate,

Je ne comprends pas très bien ta question... 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
XHTML: structure. CSS: présentation. Javascript: comportement.
^
Chocolate
# 23 Apr 2008 - 18:03:08
Citer
4 Posts
 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">



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

^
6l20
# 23 Apr 2008 - 18:27:26
Citer
Chasseur de 1/2 Kiwiz
651 Posts
 Hum... sweatdrop

Une petite révision s'impose 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 ohwell

Une petite page en ligne ?

Cdt,
Sylvain
XHTML: structure. CSS: présentation. Javascript: comportement.
^
Chocolate
# 23 Apr 2008 - 20:15:41
Citer
4 Posts
 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... bawling

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

Peut être que j'dois mettre d'autre noms ? genre à la place de <span> j'met "<span2"? lol
Modifié par Chocolate (08 May 2008 - 12:35)
^
6l20
# 24 Apr 2008 - 02:33:11
Citer
Chasseur de 1/2 Kiwiz
651 Posts
 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 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> A définir

<html>

  <head>

    <meta />

    <title></title>

+ feuille de style s'il y a lieu...

  </head>

  <body>

+ Contenu

  </body>

</html>

-Ton code se présente ainsi :
<body style="cursor:crosshair;"> 

<title>CELINE'S RANDOM THINGS - v.3</title>

<head>

blablabla

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

-Tes balises images ne sont pas fermées...
<a href="index2.php"><img src="cross1.gif" border="0"/>

<span><img src="blog.gif" border="0"/></span></a>

-border="0" devrait se trouver... avec les styles 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... 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... lol
(en passant, penses "aux vieux" (pour le format par exemple...) oublies les popup...et mets de la couleur boudiou !!! 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é 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
XHTML: structure. CSS: présentation. Javascript: comportement.
^
Chocolate
# 24 Apr 2008 - 17:25:12
Citer
4 Posts
 Oulalala merci bien pour tout ça confused

Je vais analyser ce que t'a dis et et me corriger 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 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... 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é 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 langue )
Modifié par Chocolate (24 Apr 2008 - 20:27)
^
Prévenir un modérateur
Répondre au sujet
Aller à

référencesLes références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles - Location vacances France - Location vacances Europe

Nikozen : Hébergement - Réalisation : Alsacreations.fr

Powered by Phedio v3.8 beta © dew
Contacter l'administrateur - 13.3 ms - Charte