18041 sujets

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

Astuce de Raphael-Faire un lien vers un endroit précis de la page ?

Bonjour,

Je me présente, Pharoas, 71 ans, sexe féminin, passion : l'informatique (mais je suis très débutante !!! Smiley lol )

Pour notre site (http://f1adc.perso.sfr.fr)ma fille (50 ans) et moi) je désire mettre des ancres car nous avons des pages très grandes, pas seulement de texte mais surtout d'images.

J'ai utilisé l'astuce de Raphael qui marche parfaitement, mais voilà mon problème : j'aimerais changer la taille du texte des ancres....je cherche, je cherche...je n'y arrive pas...je me perds dans les HTML, XHMTL et autres.

Votre aide me serait bien utile et je vous en remercie d'avance.
Modérateur
Bonjour Pharoas,

Pour implémanter un lien ancré, c'est très simple à mettre en place. Cependant, il faut que ta page soit suffisamment grande (en hauteur) pour que ça fonctionne.

Je t'invite à tester mon code ci-dessous :

<!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="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
        #grandeDiv{min-height:2000px;}
    </style>
</head>
<body>
    <p><a href="#uneAncre">un lien ancré</a></p>
    <div id="grandeDiv">&nbsp;</div>
    <div id="uneAncre">les texte du lien ancré</div>
</body>
</html>

Modifié par niuxe (17 Mar 2012 - 13:28)
Merci niuxe pour ta réponse,

Je crois que je me suis mal expliquée sur ce que je cherche à faire :

Le mot ou groupe de mot qui sert d'ancre est en taille normale, moyenne
Mon but : rendre ce mot plus grand, c'est seulement une histoire de <FONT size> que je n'arrive pas à résoudre.

J'ai testé, bien sur, ton code que je vais garder car un texte sous une grande image et Dieu sait que sur notre site des grandes il y en a beaucoup ! Smiley lol

Comme je n'ai pas une formation en programmation d'aujourd'hui (dernier langage apprit avec mon cher époux parti pour un monde "dit" meilleur : le basic) je lis et relis tous les scripts trouvés pour les essayer (dans mon logiciel de creation de site : WebsiteX evolution 9) et surtout essayer de les comprendre.

De toutes façons, grand merci à toi.....ton code me servira très certainement et c'est très sympa de l'avoir répondu. Smiley ravi
Je ne suis pas persuadé d'avoir compris la question, mais essayons :


<!--ton code serait :-->

<a href="#tonancre">ton texte à grossir ?</a>

<!-- si c'est bien ça ta question -->

<a href="#tonancre" style="font-size:15px;">ton texte est grossi</a>


C'est l'une des solutions, tu peux également mettre une class (class="textePlusGros") et dans un fichier .css mettre .textePlusGros { font-size:15px; }
Modérateur
j'ai toujours pas saisie ce que tu veux.


Si c'est juste augmenter la taille du texte, il te suffit de créer une classe générique et de spécifier les règles css qui vont bien dans ta feuille de style (interne (moins bien) ou externe (nettement mieux) :


<a href="#" class="miseEnExergue">une ancre</a>




.miseEnExergue{font-size:30px;}


dans une page html, ça donne ceci :

<!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="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
        .miseEnExergue{font-size:30px;}
    </style>
</head>
<body>
    <p><a href="#" class="miseEnExergue">une ancre</a></p>
</body>
</html>


Pa contre, si tu veux qu'au clique le texte de ton ancre ou d'une partie de ta page soit mis en avant, il va falloir utiliser le JS :

<!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="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
        .miseEnExergue{font-size:30px;}
    </style>
</head>
<body>
    <p><a href="#">une ancre</a></p>
    
    <p>lorem ipsum</p>
    <script type="text/javascript">
        window.onload = function(){
            var ancre = document.getElementsByTagName('a')[0];
            
            var paragrapheEnAvant = document.getElementsByTagName('p')[1];
            
            ancre.onclick = function(){
                paragrapheEnAvant.setAttribute('class','miseEnExergue');
                return false;
            }
        }
    </script>
</body>
</html>


Le dernier exemple est à adapter selon le contexte.

@kenor : il y a de l'idée, mais d'une part ton exemple ne servira à rien puisque la taille de base d'un texte dans une page est de 16px soit 1em et d'autre part, mettre des styles dans une balise, c'est pas propre (séparation du contenu de la mise en forme).
Modifié par niuxe (18 Mar 2012 - 06:27)
Bonjour,

Merci niuxe pour ton aide.

Pour faire simple voilà le code de raphael :

<a href="#Cartes de Strasbourg">Cartes de Strasbourg</a></br>
<a href="#Cartes de Sélestat">Cartes de Sélestat</a>

et l'ancre :
<div id="Cartes de Strasbourg">Strasbourg</div>

c'est pour mettre dans notre galerie des cartes postale d'Alsace-Lorraine (berceau de notre famille) qui est très longue et qu'ainsi le visiteur puisse aller directement à la vile qui l'intéresse.

ce que j'aimerais c'est que ex : Strasbourg et Sélestat s'affichent comme des titres, c'est à dire en gras et surtout, toujours par ex : en Verdana 16 et non pas Verdana 12.

Cela peut vous paraitre simpliste, mais je n'arrive pas à faire cela.

Suis-je un peu plus claire dans ma demande ? et est-ce possible ?
Je l'espère car je ne veux pas déranger inutilement pour une question sans intérêt.

Encore merci et bonne journée à tous Smiley smile
Excusez-moi, c'est encore moi....

Je devais être fatiguée hier au soir, j'ai sauté la réponse de kenor.

Je viens d'essayer et ça marche :

<div id="Cartes de Strasbourg" style="font-size:20px;">Strasbourg</div>

le mot Strasbourg est vraiment un titre.

Merci beaucoup à vous pour votre aide et votre patience.

Il ne me reste plus qu'à continuer de travailler.

Bonne journée à tous Smiley ravi
Modifié par pharoas (18 Mar 2012 - 09:52)
niuxe a écrit :

@kenor : il y a de l'idée, mais d'une part ton exemple ne servira à rien puisque la taille de base d'un texte dans une page est de 16px soit 1em et d'autre part, mettre des styles dans une balise, c'est pas propre (séparation du contenu de la mise en forme).

Je pense quand même qu'il était suffisamment intelligent pour comprendre que le 16px était paramétrable selon ses besoins ...

Et je suis au courant pour l'histoire de séparation, je lui en parle en dessous d'ailleurs ... (si tu m'avais lu jusqu'au bout ...) Seulement, quand on est à un niveau où on cherche juste à faire grossir un texte, il me parait inutile de lui expliquer l'histoire de la sémantique, les règles d'accessibilités et la validation HTML en premier lieu.
pharoas a écrit :
Bonjour,

Merci niuxe pour ton aide.

Pour faire simple voilà le code de raphael :

&lt;a href=&quot;#Cartes de Strasbourg&quot;&gt;Cartes de Strasbourg&lt;/a&gt;&lt;/br&gt;
&lt;a href=&quot;#Cartes de Sélestat&quot;&gt;Cartes de Sélestat&lt;/a&gt;

et l'ancre :
&lt;div id=&quot;Cartes de Strasbourg&quot;&gt;Strasbourg&lt;/div&gt;

c'est pour mettre dans notre galerie des cartes postale d'Alsace-Lorraine (berceau de notre famille) qui est très longue et qu'ainsi le visiteur puisse aller directement à la vile qui l'intéresse.

ce que j'aimerais c'est que ex : Strasbourg et Sélestat s'affichent comme des titres, c'est à dire en gras et surtout, toujours par ex : en Verdana 16 et non pas Verdana 12.

Cela peut vous paraitre simpliste, mais je n'arrive pas à faire cela.

Suis-je un peu plus claire dans ma demande ? et est-ce possible ?
Je l'espère car je ne veux pas déranger inutilement pour une question sans intérêt.

Encore merci et bonne journée à tous Smiley smile

Si c'est pour en faire des titres, le mieux c'est de leur appliquer une balise de titre, ce à quoi sert H1.

Ce qui donnerait chez toi :
<div id='nom-de-l-ancre'><h1>Ton titre</h1></div>


Tu peux faire de même avec des sous-titres, grâce à H2 (et ça va jusqu'à H6, mais c'est rare qu'on en utilise autant).

De base l'HTML va mettre ton titre H1 en plus gros, après, tu pourras apprendre à lui faire une jolie bouille grâce au CSS. (voire les collègues plus haut)
Lothindil a écrit :

Ce qui donnerait chez toi :
<div id='nom-de-l-ancre'><h1>Ton titre</h1></div>



Pour rendre un peu moins lourd cet exemple qui fonctionne très bien, on peut très bien mettre l'id directement sur la balise d'entête :
<h1 id="tonAncre">Le titre</h1>

Modifié par Apoooo (19 Mar 2012 - 20:26)
Sujet clos
Aller à