Bonjour,

Je souhaiterais alléger visuellement ma page en créant un lien "lire la suite" qui afficherait le texte supplémentaire lorsque l'on cliquerait dessus puis un autre lien s'afficherait "masquer le texte" afin de retrouver la page initiale.

J'ai plusieurs questions... est-il possible de faire cela juste en css?

Et est-il possible d'organiser les textes "cachés" en mettant certains mots en gras... en centrant le texte... ?

J'avais trouvé une base de code pour "lire la suite" mais je ne trouve pas de css pour "masquer le texte"

css

#lirelasuite {display:none;}

html

<p><a href="#nogo" onclick="document.getElementById('lirelasuite').style.display = 'block'; this.style.display = 'none';">Lire la suite...</a></p>
<p id="lirelasuite">VOTRE TEXTE</p>

je ne sais pas si c'est possible en css uniquement...

Merci de votre aide

novis

-
Edité par NovisCanvas 5 décembre 2017 à 11:04:13

Hello,

Oui c'est assez simple en JS...

En HTML exemple rapide: https://jsfiddle.net/Lpxw46xv/ 

Plus d'infos : https://www.alsacreations.com/article/lire/1335-html5-details-summary.html 

Avec CSS : il y a la pseudo-class :target : https://www.w3schools.com/cssref/sel_target.asp 

Exemple : https://jsfiddle.net/ukmwef9c/ 

Lire la suite... est un lien qui pointe vers une ancre (id), au clic on passe l'élément HTML (ancre) en display: block 

-
Edité par Lucky13 5 décembre 2017 à 12:16:16

 Merci beaucoup Lucky pour votre aide!

Je suis en train de modifier le css afin de l'adapter à mes envies. Ceci dit, je me demande si il est possible de faire des exceptions sur certaines parties de texte.

Là j'ai

p {font-family:sans-serif;
  text-align: center;  
}

#suite{
  display: none;
}

#suite:target {
  display: block;
}

j'ai donc centré le texte.

Comment faire pour mettre par exemple un sous-titre 1h3 aligné à gauche?

Et par contre si j'ai bien compris dans ce que j'ai pu lire, si on veut un lien "masquer le texte" qui s'affiche avec le texte au complet il faut utiliser du js? c'est bien ça?

merci de vos lumières

novis

NovisCanvas a écrit:

Comment faire pour mettre par exemple un sous-titre 1h3 aligné à gauche?

La par contre vas voir le cours tout est dedans. c'est les bases du CSS...

Bonjour,

J'ai réussi à attribuer un sous-titre . Seulement, ce dont je n'avais pas pensé, c'est que cela s'attribue à tous les sous titre. Et moi je souhaite que cela soit actif seulement pour cet article.

J'ai donc essayé d'insérer une div mais je ne comprends pas mon erreur. Pouvez-vous m'expliquer?

<h4><strong>mon sous titre</strong></h4>

h4 {
  text-align: center;
font-weight: bold;
}

Ce code s'affiche correctement

moi j'ai essayé:

<h3>
<div id="soustitre">
- mon sous titre
</div></h3>

div#soustitre {
  text-align: left;
  font-weight: bold;
  
}

merci beaucoup

novis

Un titre n'est pas censé contenir d'autres balises, donc tu vires le strong inutile ainsi que le div. Les balises de titres sont des bloques en CSS, tout comme les divs, travaille avec eux ainsi comme si c'était des divs dans ton CSS

h4 est un niveau de titre, strong permet de donner du "poids" à un mot dans un paragraphe (entre autre). Il n'a donc rien à faire dans un titre hx... cela n'a aucun sens.

Donc oui, la mise en forme est en CSS. Déjà on construit la structure HTML, valide et sémantique (raconter une histoire, être cohérent) sans ce soucier du Design, puis on passe à la forme via le CSS.

N'oublie pas que ton moteur de recherche attache la plus grande importance au HTML pour le référencement, même si de nos jours il analyse la mise en page et les fonctionnalités de navigation depuis l'importance du monde des mobiles/tablettes.

EDIT : RamechYT vient de le dire 

-
Edité par Lucky13 6 décembre 2017 à 14:02:17

Excuse moi de le dire comme ça mais tu ne maitrises pas une once des bases. Ce que tu nous demande c'est de répéter le cours qui est pourtant très bien fait. Donc je me pose cette question l'as tu au moins lu ?

Voici le lien du cours

Voici un index complet sur toute les balises (ce que tu peut et ne peut pas faire et dans quelles conditions les utiliser).