Bonsoir, Bonjour !

Au plaisir de demander une question, et pouvoir lire votre réponse face à mon problème. En réalité, ce n'est pas dû à un problème de forum, puisque je n'en ai tout simplement pas. C'est plutôt une question vis-à-vis du fonctionnement d'une certaine template que je ne comprends pas.

Avertissement // Étant un véritable nouveau dans le monde de la programmation et plus particulièrement du CSS et du HTML, les mots que je risque d'aborder, ou que j'ai peut-être aborder, seront susceptible de faire criser quelque s'uns, . Je m'excuse d'avance de mon ignorance face à la notion à prendre.

Donc, j'ai pu pianoter sur les nombreux forums anglais, et qui, ô combien, ils sont géniales, (quand on les comprend). Et je suis tombé sur une template qui a beaucoup ravi mes yeux.

Voulant l'utiliser mais ne le pouvant pas puisque cela ne m'appartient pas, je voudrais savoir comment cette personne a-t-elle fait pour donner cet "effet glissant" à une colonne. Voici donc la démonstration et le code.

La Preview : Ici
Et le code source : Ici

En cliquant sur les trois petits points, on peut avoir une deuxième colonne qui apparait. Comment est-ce possible de le faire sous un code CSS dans une balise HTML ?

Merci beaucoup d'avoir lu et de pouvoir répondre, même si vous n'y arrivez pas, ce ne sera pas grave .

Hello

J'ai du mal à comprendre ce passage là :

AndrewvGiggles a écrit:

Comment est-ce possible de le faire sous un code CSS dans une balise HTML ?

Tu parles de l'attribut style ? ^^
Exemple :

Code:

<div style="color:red;">Texte en rouge</div>

Si oui, ce n'est pas possible de le reproduire seulement avec l'attribut style :/

Dans le CSS source, il s'agit de cette partie là :

Code:

.page{
position: fixed;
margin: auto;
left: 0px;
right: 400px;
top: 0px;
bottom: 0px;
width: 342px;
height: 512px;
opacity: 0;
transition: 0.7s;
}
 
.page:target{
left: 400px;
right: 0px;
opacity: 1;
transition: 0.7s;
}

Le premier code est l'apparence de base du bloc :

Code:

.page{
position: fixed;
margin: auto;
left: 0px;
right: 400px;
top: 0px;
bottom: 0px;
width: 342px;
height: 512px;
opacity: 0;
transition: 0.7s;
}

Le second code est ce qui s'applique quand on veut afficher notre bloc :

Code:

.page:target{
left: 400px;
right: 0px;
opacity: 1;
transition: 0.7s;
}

C'est-à-dire, de base le bloc est à gauche et transparent, et quand on veut l'afficher, on le déplace et on met une opacité à 1

You're a GENIUS !

Je devrais dire que tu es une personne rapide (extrêmement rapide), haha, je me disais que j'aurais une réponse dans quelques jours tout au plus, mais y'a pas de mal à ce que je me trompe .

En fait, je pensais qu'il était possible d'avoir un approximation du HTML au CSS (et peut-être vice-versa) parce que comme je n'arrive pas introduire le code CSS dans un message de forum, je pensais qu'il serait possible de le faire dans une balise HTML, et pour tout te dire, je suis incapable d'expliquer mieux ma pensée . De par mon ignorance total de ce monde. Mais je pense que tu as répondu à ma question : qu'il était impossible de le reproduire.

Je comprends mieux pourquoi je n'arrivais pas à le voire (Jeu de mot dit Capello XD !) Excuse moi, je me suis laissé emporter . Tout de même, mon cerveau flambe depuis un bon bout de temps alors que j'essayais de trouver LA solution.

Désolé franchement de t'embêter, mais je suis sûr qu'il y a un moyen et que je n'arrive sûrement pas à me faire comprendre .

En tout cas, tu m'as déjà franchement, beaucoup même, éclairé sur ce codage, qui est pour moi complexe .

Alors, il est possible de le reproduire dans un message néanmoins !
En effet, dans un message, tu peux mettre le CSS comme ceci :

Code:

<style>.test1 { color: red;} .test1:hover { color: blue;}</style>
<div class="test1">Contenu en rouge qui devient bleu au survol</div>

En fait, il faut enlever tout retour à la ligne du CSS, sinon Forumactif écrit une balise br à la place, et ça casse tout

Désolée pour le temps de réponse cette fois >/<