Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

[Résolu] Puce "cliquable"

fantassin-06

Par fantassin-06
dans Programmation

 Partager

Messages recommandés

fantassin-06 Mega Power Member

fantassin-06

Posté(e)
Posté(e) (modifié)

Salut,

 

au départ, j'ouvre ce topic pour arrêter de squatter le topic de Ricou33 (la liberté des uns s'arrête où la mienne commence :P ) et pouvoir répondre à Dylav (ici). Mais au vue de la tâche que représente l'édition d'un site, je pense que reviendrais souvent sur ce topic :P

 

Attention, Fantassin, la balise <center> est dépréciée,

et doit être remplacée par la clause de style text-align:center; dans ta classe frame.

 

Sans savoir que le <center> était déprécier (terme que je sais pas ce que ça veut dire exactement même si je me doute de la signification) je cherchais hier à le faire passer dans le ".css" sans acoir vu le message. Voilà qui est chose faites. :P

 

Merci pour le tuyau tout de même. :P

 

Fantassin, j'attire ton attention sur le fait que l'utilisation des trois seules couleurs noir, bleu et rouge pour un document est strictement réservée aux organisations officielles de l'Etat. J'ignore si cette restriction est également valable pour les pages web. Dans ton cas, peut-être le simple fait que le fond soit bleu pâle (et non pas blanc) suffit-il à faire le distinguo. Mais vu le thème de ta page, je serais toi, je glisserais une petite fantaisie colorée quelque part, par exemple en haut à gauche.

 

Petite remarque annexe : tu devrais mettre une légère marge au-dessus de Marianne, grâce à un margin-top associé soit au <body> soit à l'<img> elle-même (cf. ci-dessous).

 

Je ne savais pas que l'Etat s'était appropriés en exclusivité les couleurs. Mais j'ai modifié légèrement (en rejoutant un menu bien vert :P ). Par contre tu parles d'un fond bleu pâle alors que je le vois vert pâle. Pour la page où se trouve la Marianne, elle ne figure plus en "index.html" je l'ai viré. Par contre le problème du "margin-top" demeure sur les autres pages mais je ferais les modifs plus tard.... :P

 

En matière de message subliminale, je ne savais plus où j'avais croisé :

<a href="http://metal31.podemus.net/Video/un_hongrois_chez_les_gaulois.wmv"> (message #6

dans le topic de ricou33)

 

Attention à l'article 7 de la charte

:P

 

Je ferais un bon modo non? :P

 

Question:

 

Sur le menu j'ai incrusté des boutons (verts) devant les titres des pages:

 

<ul class="on">

<li><a href="texte_officiel/declaration_1789.html">La déclaration des droits de l'homme et du citoyen</a></li>

<li><a href="texte_officiel/constitution.html">La constitution</a></li>

<li><a href="texte_officiel/autorite_parentale.html">Autour de l'autorité parentale</a></li>

<li><a href="">en cours de réalisation</a></li>

 

</ul>

 

Mais je n'arrive pas à faire que ce soit les boutons qui soient cliquables et non le texte.

 

Alors si quelqu'un est a une idée je suis preneur.

 

Merci

Modifié par fantassin-06

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Salut Fantassin, dans ton topic, :P

 

déprécié : excuse-moi, j'ai inconsciemment utilisé la (mauvaise) traduction du terme anglais. C'est bien pratique, parfois, parce que là je ne trouve pas d'autre terme. En fait, ça signifie que la balise <center> ne fait plus faire partie des recommandations strictes, donc n'existera carrément plus à terme.

 

Blanc/noir/bleu/rouge : c'est en particulier pour les placardages (affiches) que j'en avais entendu parler. Je ne mettrais pas ma main à couper que ce soit vrai pour les autres supports d'information.

 

Un Hongrois chez les Gaulois : tu as tout à fait raison, c'est borderline chez Zébulon. Il n'en reste pas moins que c'est un excellent clip, au niveau musical !

 

La puce active : essaie d'englober ta balise <li> par la balise <a> (à la place de l'inverse actuel). Je ne suis pas sûr que ça marche, mais ce ne sera pas entièrement satisfaisant, car le texte sera lui aussi sensible. Ceci dit, tu peux le masquer avec l'attribut text-decoration pour la balise <a>. En feuille de style,

 a {text-decoration:none;}

Autre piste, va voir dans les articles du site pompage.net, il me semble que j'en ai lu un qui parlait longuement des listes à puces.

ricou33 Extrem Member

ricou33

Posté(e)
Posté(e) (modifié)

Ah zut, juste quand j'allais demander des droits de squattage de topic il arrête :P

 

En pour Fantassin j'ai le droit de critiquer ton site ? :P

- oui

- Merci

 

Alors chez moi sur la page d'acceuil, le texte "bonjour bienvenue sur le site..." est par dessus le pied de page "site hébergé par ovh"

Et je ne sais pas si c'est fait exprès mais les vidéos sont au-dessus de tout, et donc le texte et le menu sont en bas, j'aurais plutôt vu l'inverse.

Dernière chose mais ça ne concerne que moi, j'aime pas tellement les vidéos dans un bloc avec une barre de défilement comme ça. Personnellement je préfèrerais donc le texte d'accueil tout en haut, en dessoux les vidéos et le menu en position fixe (qui ne descend pas avec la page) sur la gauche. A la rigueur, tu pourrais aussi mettre le texte d'accueil un peu plus petit et en position fixe avec les vidéos qui défilent en dessous, mais j'aime un peu moins. Enfin c'est ton site, fait comme tu veux. :P

 

Quant à ton image de menu cliquable je ne sais pas si c'est possible dans une liste à puce, la seule solution que je connaisse serait de créer un bloc pour chaque lien avec l'image qui sert de lien en float-left.

Modifié par ricou33
fantassin-06 Mega Power Member

fantassin-06

Posté(e)
  • Auteur
Posté(e)

La critique est facile mais l'art est difficile :P

 

Mais j'aime bien les remises en cause, ça fait progresser. :P

 

Alors sur le principe général, je suis en train d'apprendre donc pour l'instant je m'attache plus à la forme qu'au fond. Pour les vidéos, au départ il ne devait y en avoir qu'une (avec le tête en bleu,blanc,rouge) puis aprés je me suis dit au diable "les varices".... Pour le défilement, je trouve que ça ne surcharge pas la page (car je compte y mettre du texte dans la page ce qui va mener à changer le texte d'accueil) La vidéo fera donc office d'appel.

Pour le menu, je me faisais la même réflexion à savoir le laisser en position fixe.

Pour le pied de page, il ne me semble pas que l'indication "site hébergé par Ovh" soit primordial pour la mettre en haut de la page.

Quant à la liste de puce, effectivement, il semble que je ne peux pas faire grand chose...

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Salut Fantassin (et salut Ricou),

 

Voilà, je l'ai retrouvée, la solution de Dan Cederholm, en pur CSS, Arrière-plans cliquables (traduit par Antoine Cailliau), chez pompage.net. C'est un peu plus compliqué que ce que j'avais retenu, mais c'est maîtrisable et, surtout, d'un effet fort élégant.

 

Comme je te le disais, le texte du choix sera lui aussi cliquable, mais tu peux éviter le soulignement (esthétiquement un peu lourd) grâce à l'attribut text-decoration.

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Mieux encore, je crois que j'ai trouvé la solution ultime à ta requête.

 

Pour que le texte du choix de ton menu ne soit pas cliquable, il suffit que tu le sortes des balises <a>...</a>, mais bien sûr pas des balises <li>...</li>. Ce qui donne, dans l'exemple de Dan Cederholm,

 

<li id="email"><a href="/email/"></a>Envoyer un e-mail</li>

Du coup, la balise <a> ne contient plus rien, et je me disais que plus rien ne serait cliquable : fâcheux !

 

Eh bien si, on peut cliquer sur la puce. En fait, on est sauvé par le padding-left qui, en fixant une marge, donne une dimension à la zone cliquable... dimension dans laquelle se situe justement la puce (en image de fond) ! Trop fort ! Je ne l'ai pas fait exprès... :P

 

Et plus de problème de lien actif souligné et de couleur bleu pisseux ! Tu décris le style des textes de ton menu dans ul li, et tu n'as plus rien à contrecarrer dans ul li a.

ricou33 Extrem Member

ricou33

Posté(e)
Posté(e) (modifié)

La critique est facile mais l'art est difficile :P

Je sais mais c'est à charge de revanche :P

 

Pour le pied de page, il ne me semble pas que l'indication "site hébergé par Ovh" soit primordial pour la mettre en haut de la page.

Je ne parlais pas du pied de page à mettre en haut mais ton texte de bienvenue sur le site..., qui pour l'instant est par dessus le pied de page, à moins que ça ne fasse pas la meme chose chez toi.

Modifié par ricou33
fantassin-06 Mega Power Member

fantassin-06

Posté(e)
  • Auteur
Posté(e) (modifié)

Salut Dylav,

 

Je vais étudier ta solution tout à l'heure (au réveil vu l'heure qu'il est :P ) car aujourd'hui hier c'est c'était un jour sans.... :P Y a des jours comme ça où tout va pas pour le mieux... Des jours où tu sait pas ce que tu as et que tu dis "jsais pas c'que j'aiiiiiiii" (gad Elmaleh) :P

 

Salur Ricou,

 

effectivement en allant dans la famille, je me suis rendu compte du problème (qui n'aparaissait pas chez moi) En fait, je n'avais pas mis de "margin-bottom" dans le "#corps" alors sur les petits écrans le pied de page remontait. Je pense que le problème est résolu :P

 

Du coup, j'ai vu que mon "scrolling" des vidéos ne marchait pas avec opéra :P. La première vidéo ne disparait pas donc les suivantes s'emboîtent dans la première. ça le fait vraiment pas :P Alors je vais me coucher et je verrais ça demain.

 

Bonne nuit

Modifié par fantassin-06
Phantom-X Mega Power Member

Phantom-X

Posté(e)
Posté(e)

Essaie ceci :

 

<ul class="on">
<a href="texte_officiel/declaration_1789.html"> <li>La déclaration des droits de l'homme et du citoyen</li></a>
<a href="texte_officiel/constitution.html"> <li>La constitution</li></a>
<a href="texte_officiel/autorite_parentale.html"> <li>Autour de l'autorité parentale</a></li></a>
<a href=""> <li>en cours de réalisation</li></a>

</ul>

 

 

:P

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Oui, Phamtom-X, ta solution fonctionne, mais je crois que Fantassin voulait aller encore plus loin, et que ce que je lui propose dans les messages 5 et 6 ci-dessus repond exactement a sa question (ne m'en voulez pas pour les accents, je ne suis pas sur un clavier francais). :P

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...