Le Deal du moment :
Réassort du coffret Pokémon 151 ...
Voir le deal

Partagez | 
 

 Le HTML pour tous ? =D

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage

Indigo Yashima
Indigo Yashima
Lazy Admin ~ Observer


Messages : 1006
Date d'inscription : 28/10/2009
Age : 32
Localisation : N'importe où, en train de prendre des photos

Le HTML pour tous ? =D _
MessageSujet: Le HTML pour tous ? =D   Le HTML pour tous ? =D EmptySam 30 Oct - 15:05

    Comme vous avez put le constater au niveau des présentations, fiches de liens ou récapitulatif de RP, il est possible de faire de zouuuuuuli présentation pour vos textes. Je vous ait proposer des exemples, mais vous pouvez tout aussi bien personnaliser vous même ! =D Et pour ça, je vais vous donner quelques codes de base pour que même ceux ne connaissant pas le HTML puisse tenter leur propre présentation ! =D Je sais qu'on n'est pas sur un forum spécialisé, mais peu importe ! =D

    ___&Background

    Ou les fonds, parlons en français =D Pour les fond, on peut choisir une couleur, ou même une image ! Mais pour ça, ce qu'on écrit est différent ! =D

    __Couleur


    Code:
    <div style ="Background-color : red;">Quelque chose</div>

    Et voilà comment utiliser le fond couleur ! On peut y ajouter des "modifications", mais nous verrons ça après ! =3 Couleurs disponibles ici

    --> Les fonds ! =3


    Code:
    <div style ="background: url(adresse de l'image)">Ce que vous voulez xD</div>

    Et voilà les deux types de fonds existant ! =D Après, on peut y mettre plusieurs modifications ! Ici je l'ai laissé comme une bande, mais si vous écrivez tout un texte entre les balises, vous obtiendrez un "pavé de texte" ! =D Quelque chose que ce qui suis quoi...

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pretium feugiat quam, eu faucibus justo ultrices non. Cras quis nibh tempor velit accumsan sodales. In at ante eros, eget tincidunt tortor. Nam ut erat eros, id ultrices ante. Sed augue magna, venenatis sed elementum a, consectetur non lectus. Integer turpis felis, varius non fringilla vitae, hendrerit eget leo. Vivamus dui dui, volutpat sed consequat id, porta eget lectus. Morbi viverra, ipsum a venenatis rutrum, magna libero sagittis lacus, et pellentesque urna lorem vitae neque. Curabitur lobortis porttitor volutpat. Sed tortor turpis, convallis vel porta non, malesuada sit amet urna. Morbi condimentum justo nec orci rhoncus suscipit.


    Et voilà La balise de base ! =D Oui, je sais que comme ça, ça fait très... Enfin, pas forcement très joli... Mais ne vous en faites pas, on va pouvoir personnaliser tout ça ! =D

    ___&Arrondis

    Ce paramètre sera très rapide ! =3

    Avant de vous donner le code, un peu de "compatibilité". Il faut savoir qu'il n'y a aucune balise arrondi pour Internet Explorer. Il y en a cependant pour Firefox, Chrome et Safari. Mais, malheur, ce sont trois codes différent, ce n'est pas pour nous simplifier la vie... N'ayant jamais utilisé ce dernier et connaissant peu de personne l'utilisant, je ne connais pas le code, vous ne l'aurez donc malheureusement pas... Mais bon, deux navigateurs c'est déjà ça ! =D

    >Pour Mozilla Firefox
    -moz-border-radius:0px 0px 0px 0px;
    Le premier : en haut à gauche, le deuxième en haut à droite, le troisième en bas à droite et le quatrième en bas à gauche =D Petit exemple~

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pretium feugiat quam, eu faucibus justo ultrices non. Cras quis nibh tempor velit accumsan sodales. In at ante eros, eget tincidunt tortor. Nam ut erat eros, id ultrices ante. Sed augue magna, venenatis sed elementum a, consectetur non lectus. Integer turpis felis, varius non fringilla vitae, hendrerit eget leo. Vivamus dui dui, volutpat sed consequat id, porta eget lectus. Morbi viverra, ipsum a venenatis rutrum, magna libero sagittis lacus, et pellentesque urna lorem vitae neque. Curabitur lobortis porttitor volutpat. Sed tortor turpis, convallis vel porta non, malesuada sit amet urna. Morbi condimentum justo nec orci rhoncus suscipit.

    Et comment on l'utilise ? =D On l'intègre dans la balise précédente ! =D

    Code:
    <div style ="Background-color : red; -moz-border-radius:5px 5px 5px 5px;">Quelque chose x3</div>
    Bien sûr les valeurs ne sont que des exemples, à vous de voir ce que vous préférez ! =D

    >Pour Google Chrome
    -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 0px;
    Et oui, ça fait beaucoup, mais il n'y a pas de balise "raccourci" pour Chrome... Mais au moins, on est sûr de pas se tromper au niveau de la position des arrondis ! =D On l'utilise de la même manière~

    Code:
    <div style ="Background-color : red; -webkit-border-top-left-radius: 5px;  -webkit-border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px;">Quelque chose x3</div>

    Et bien sûr, vous pouvez optimiser votre code pour que les arrondis soient visibles sur les deux navigateurs ! =D Il suffit donc de combiner les deux codes, regardez-donc~

    Code:
    <div style ="Background-color : red; -moz-border-radius:5px 5px 5px 5px; -webkit-border-top-left-radius: 5px;  -webkit-border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px;">Quelque chose x3</div>

    Nous en avons donc finis avec les arrondis ! =D Que vous les utilisiez pour des bandes ou des pavés, à vous de choisir le résultat~

    ___&Contours

    Le dernier paramètre de personnalisation que je connaisse... Mais pour lequel il y a plusieurs "paramètres ! =D Allons-y petit à petit~

    La balise de base porte le le nom "border". Vous pouvez donc l'utiliser directement si vous voulez Le même contour partout ! =D Mais après, vous pouvez aussi la décomposer ! Ce qui donne border-left, border-right, border-top et border-bottom =3

    A cette balise on attribut une épaisseur en pixel et une couleur...
    border : 3px white
    Par exemple... Vous pouvez aussi remplacer la couleur par le code hexagonal, vous savez, ce truc qui fait #FFFFFF ?

    Mais ce n'est pas fini, car il faut aussi lui attribuer un style !
    Solid : un simple contour, un simple trait =D
    Double : Un contour "double", avec deux traits quoi... A savoir que l'épaisseur minimum pour l'utiliser est 3px
    Dashed : Des tirets ! =D
    Dotted : Pointillés...

    Et comme un exemple vaut mieux que miles mots ! =D Je vais donc mettre le simple à droite, le double à gauche, le dashed en haut et le dotted en bas ! =D

    Ce que vous voulez x3


    Code:
    <div style ="Background-color : red; border-left : double 3px white; border-right : solid 2px white; border-top : dashed 1px white; border-bottom : dotted 2px white;">[color=white]Ce que vous voulez x3[/color]</div>

    Bon, voilà la base ! =D Vous n'êtes bien sûr pas obligé de mettre un contour partout, à vous de voir ! =D

    Après; vous pouvez très bien utiliser les contours tout seul ! Pour souligner un texte, par exemple, comme ce qui suis =D

    Ce que vous voulez x3


    Code:
    <div style ="border-bottom : dotted 2px white;">[color=white]Ce que vous voulez x3[/color]</div>
    Bon, voilà tout ce qu'il faut savoir sur les contours, ou du moins tout ce que je sais =D

    On en a donc fini avec ce qu'on peut faire pour personnaliser l'apparence de vos backgrounds... Il est peut-être possible de faire une ombre, mais je n'en sais rien, désolée...

    ___&Textes

    Je vais être bref et précise ! Je vous épargnerai les mises en pages bateaux de base de forumactif que vous connaissez surement tous... Il doit y avoir beaucoup de choses que j'ignore bien sûr...

    Tout d'abord, point esthétique...

    > Comme vous l'avez vu, vos textes sont collés aux bords de vos fonds... Ce qui n'est parfois pas très lisible. La solution ? Le padding ! =D A écrire de la forme padding : Xpx; la balise peut, tout comme la balise border, être séparée selon les quatre directions =D

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pretium feugiat quam, eu faucibus justo ultrices non. Cras quis nibh tempor velit accumsan sodales. In at ante eros, eget tincidunt tortor. Nam ut erat eros, id ultrices ante. Sed augue magna, venenatis sed elementum a, consectetur non lectus. Integer turpis felis, varius non fringilla vitae, hendrerit eget leo. Vivamus dui dui, volutpat sed consequat id, porta eget lectus. Morbi viverra, ipsum a venenatis rutrum, magna libero sagittis lacus, et pellentesque urna lorem vitae neque. Curabitur lobortis porttitor volutpat. Sed tortor turpis, convallis vel porta non, malesuada sit amet urna. Morbi condimentum justo nec orci rhoncus suscipit.


    Code:
    <div style ="Background-color : red; -moz-border-radius:5px 5px 5px 5px; -webkit-border-top-left-radius: 5px;  -webkit-border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; padding : 5px;"></div>

    C'est mieux, non ? =D

    >L'écart des lettres. Et oui, il est possible de jouer dessus, grâce à la balise letter-spacing, présentée sous la forme letter-spacing : Xpx. Il faut savoir qu'un chiffre négatif rapprochera les lettres, et qu'un chiffre positif les éloignes.

    Votre Texte~


    Code:
    <div style="letter-spacing : 3px;">Votre Texte~</div>

    L'utilité ? Bah ça peut être sympa de présenter un titre de cette manière ! =D

    >L'ombrage. Vous l'avez déjà vu quelque part sur LA, la page d'accueil notamment. Et bien il est facile à utiliser ! Et toujours à placer dans un < div style=" "> (sans espace entre < et le div)... La balise c'est, en entier, text-shadow: 2px 2px 3px #000000. Je sais que les deux premier c'est le décalage, d'abord à droite (ou gauche si c'est négatif) puis en bas (ou haut xD), mais le troisième j'ai jamais vraiment compris ce que c'était, le décalage ou la dispersion peut-être ? Et après c'est la couleur of course xD Mais elle peut se mettre avant aussi, sauf erreur de ma part...

    Votre Texte~


    Code:
    <div style="text-shadow: 2px 2px 3px #000000;">Votre Texte~</div>

    Bon, bah il me semble que c'est tout ce que je peux dire sur les textes...

    ___&Divers

    Bon, il me reste deux/trois points à vous présenter ! =D Donc on va mettre ça dans une même partie...

    >D'abord, ce que je vais appeler les pavés déroulants... Je vais d'abord vous en montrer un avec son code pour ensuite expliquer ce que vous pouvez changer

    Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla


    Code:
    <div style="overflow: auto; height: 110px; width: 350px">Texte~</div>

    Donc, overflow, c'est pour créer la barre de défilement à partir du moment ou la taille du texte dépasserai du cadre délimité par Height (hauteur) et Width (Largeur). Il faut donc en conclure que si votre texte n'est pas assez grand, on ne verra pas le code...

    >Dans le même style, les menus déroulant



    Code:
    <form name="Menuderoulant" method="POST"> <select name="wxlmenu" size="1" style="width: 200px; "><option>....</option>
    <option> ....</option>
    <option>....</option></select></font></form>

    Donc, vous pouvez multipliez les < option> autant que vous voulez. Vous pouvez changez la largeur grâce au width, mais aussi y ajouter un contour avec les balises que l'on a déjà décrit =D

    >Enfin, parlons des tableaux... Je pense que vous savez les utiliser, mais il est possible de les personnaliser ! Pour ce faire, nous allons le regarder en BBCcode, que vous pouviez le faire directement avec le raccourci de forumactif =3 Prenons un tableau de 3 lignes et 3 colonnes.

    Code:
    [table border="1"]
    [tr]
    [td] [/td][td] [/td][td] [/td]
    [/tr][tr]
    [td] [/td][td] [/td][td] [/td]
    [/tr][tr]
    [td] [/td][td] [/td][td] [/td]
    [/tr]
    [/table]

    Pour les personnalisations que j'ai, enlevons le contour du tableau.

    Le Titre Titre Un dernier
    Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit
    Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit

    Bon, comme ça, c'est un tableau tout ce qu'il y a de plus banal... Alors mettons un peu de couleur ! =D

    Le Titre Titre Un dernier
    Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit
    Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit


    Code:
    [table border="0"]
    [tr]
    [td bgcolor="red"]Le Titre[/td][td bgcolor="orange"] Titre[/td][td bgcolor="saddlebrown"] Un dernier[/td]
    [/tr][tr]
    [td bgcolor="brown"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td][td bgcolor="maroon"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td][td bgcolor="darkred"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td]
    [/tr][tr]
    [td bgcolor="darkred"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td][td bgcolor="brown"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td][td bgcolor="maroon"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td]
    [/tr]
    [/table]

    Et voilà ! =D Vous voyez donc bien quel est le code à utiliser ? =D Donc à vous de mettre vos couleurs ! =D

    Parlons maintenant de contour, car on peu les assigner à une cellule seulement ! =D Ce sont les même codes que dans la partie contour, vous savez-donc quoi utiliser ? =D

    Le Titre Titre Un dernier
    Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit
    Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit

    Code:
    [table border="0"]
    [tr]
    [td bgcolor="red" style="border-right : 5px double white"]Le Titre[/td][td bgcolor="orange" style="border-right : 5px double white"] Titre[/td][td bgcolor="saddlebrown"] Un dernier[/td]
    [/tr][tr]
    [td bgcolor="brown" style="border-bottom : 2px dashed white"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td][td bgcolor="maroon" style="border-bottom : 2px dashed white"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td][td bgcolor="darkred" style="border-bottom : 2px dashed white"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td]
    [/tr][tr]
    [td bgcolor="darkred" style="border-bottom : 2px dashed white"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td][td bgcolor="brown" style="border-bottom : 2px dashed white"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td][td bgcolor="maroon" style="border-bottom : 2px dashed white"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td]
    [/tr]
    [/table]

    Voilà tout ce que j'avais à vous apprendre sur les tableaux ! =D

    Notre petit cours de HTML est donc terminé ! >w< Si jamais vous avez des questions, que vous chercher un code ou que vous voulez en faire partager un, n'hésitez pas x3


Dernière édition par Indigo Yashima le Ven 16 Déc - 18:57, édité 1 fois
Revenir en haut Aller en bas
https://libertasque-schola.forumactif.org

Silver
Silver
Lycéen - Lonesome Exchanger


Messages : 172
Date d'inscription : 27/06/2010
Age : 29
Localisation : Whatever.

Le HTML pour tous ? =D _
MessageSujet: Re: Le HTML pour tous ? =D   Le HTML pour tous ? =D EmptySam 30 Oct - 18:31

    INDIIIIIIIIIII. TU ROXXES DU PONAY. <3
    Merci merci merci merci <3333
Revenir en haut Aller en bas

Indigo Yashima
Indigo Yashima
Lazy Admin ~ Observer


Messages : 1006
Date d'inscription : 28/10/2009
Age : 32
Localisation : N'importe où, en train de prendre des photos

Le HTML pour tous ? =D _
MessageSujet: Re: Le HTML pour tous ? =D   Le HTML pour tous ? =D EmptySam 30 Oct - 18:54

    Je... Je roxe ? Vraiment ? O__O M-Merci ! *Hug*
    Pis, de rien hein <3 Je pense que c'est encore très léger et qu'il y a pleins de codes que j'ignore, mais si j'en trouve d'autres je les partagerais \o/
Revenir en haut Aller en bas
https://libertasque-schola.forumactif.org

Indigo Yashima
Indigo Yashima
Lazy Admin ~ Observer


Messages : 1006
Date d'inscription : 28/10/2009
Age : 32
Localisation : N'importe où, en train de prendre des photos

Le HTML pour tous ? =D _
MessageSujet: Re: Le HTML pour tous ? =D   Le HTML pour tous ? =D EmptyMar 31 Mai - 22:03

    Ajout d'un code ! =D

    Titre Ton Texte


    Code:
    <fieldset ><legend style="font-family:georgia; font-size:11; font-weight:300;"> Titre </legend> Ton Texte </fieldset>

    ça a pas l'air très joli, mais vous pouvez modifier l'apparence du fieldset grâce au différentes balises montrées plus haut il suffit de les placer dans un style=" "

    A vous de jouer~
Revenir en haut Aller en bas
https://libertasque-schola.forumactif.org

Misaki Murasaki
Misaki Murasaki
Collégienne ▬ Fighting Spirit


Messages : 62
Date d'inscription : 27/02/2011
Age : 28
Localisation : Derrière toi !

Le HTML pour tous ? =D _
MessageSujet: Re: Le HTML pour tous ? =D   Le HTML pour tous ? =D EmptyVen 8 Juil - 12:56

    ♥ Merciiiiiii ='D.
    Et est-ce que ce serait possible d'avoir des codes pour... je sais pas comment expliquer XD. Mais genre faire comme dans la page d'accueil pour les prédéfinis ou pour les admins : quand on passe la souris sur une image, y a une mini-fenêtre qui s'ouvre avec une autre image (oui, j'explique vraiment très mal x'D). Enfin, je parle de ça :
    Spoiler:
Revenir en haut Aller en bas

Indigo Yashima
Indigo Yashima
Lazy Admin ~ Observer


Messages : 1006
Date d'inscription : 28/10/2009
Age : 32
Localisation : N'importe où, en train de prendre des photos

Le HTML pour tous ? =D _
MessageSujet: Re: Le HTML pour tous ? =D   Le HTML pour tous ? =D EmptyVen 8 Juil - 13:45

Revenir en haut Aller en bas
https://libertasque-schola.forumactif.org

Misaki Murasaki
Misaki Murasaki
Collégienne ▬ Fighting Spirit


Messages : 62
Date d'inscription : 27/02/2011
Age : 28
Localisation : Derrière toi !

Le HTML pour tous ? =D _
MessageSujet: Re: Le HTML pour tous ? =D   Le HTML pour tous ? =D EmptyDim 10 Juil - 11:35

    Merci beaucoup =3. Arf, ça a l'air plus compliqué que ce que je pensais XD.
    Nee, le CSS on le modifie où ? Dans l'endroit où on veut faire l'infobulle ou alors y a un endroit spécial dans le panneau d'administration ?
Revenir en haut Aller en bas

Indigo Yashima
Indigo Yashima
Lazy Admin ~ Observer


Messages : 1006
Date d'inscription : 28/10/2009
Age : 32
Localisation : N'importe où, en train de prendre des photos

Le HTML pour tous ? =D _
MessageSujet: Re: Le HTML pour tous ? =D   Le HTML pour tous ? =D EmptyDim 10 Juil - 11:49

    Le CSS, tu vas sur le panneau d'administration, onglet affichage>>Couleur>>Feuille de style CSS =3 Si c'est pas clair je peux faire un screen ^^
Revenir en haut Aller en bas
https://libertasque-schola.forumactif.org

Misaki Murasaki
Misaki Murasaki
Collégienne ▬ Fighting Spirit


Messages : 62
Date d'inscription : 27/02/2011
Age : 28
Localisation : Derrière toi !

Le HTML pour tous ? =D _
MessageSujet: Re: Le HTML pour tous ? =D   Le HTML pour tous ? =D EmptyDim 10 Juil - 13:48

    D'accord merci =).
    Par contre je veux bien le screen, histoire de voir ce qui va pas dans mon CSS parce que je galère XD.
Revenir en haut Aller en bas

Indigo Yashima
Indigo Yashima
Lazy Admin ~ Observer


Messages : 1006
Date d'inscription : 28/10/2009
Age : 32
Localisation : N'importe où, en train de prendre des photos

Le HTML pour tous ? =D _
MessageSujet: Re: Le HTML pour tous ? =D   Le HTML pour tous ? =D EmptyDim 10 Juil - 14:02

    Spoiler:

    Si ça t'aide pas plus montre moi ton CSS =3


Dernière édition par Indigo Yashima le Lun 11 Juil - 16:08, édité 1 fois
Revenir en haut Aller en bas
https://libertasque-schola.forumactif.org

Misaki Murasaki
Misaki Murasaki
Collégienne ▬ Fighting Spirit


Messages : 62
Date d'inscription : 27/02/2011
Age : 28
Localisation : Derrière toi !

Le HTML pour tous ? =D _
MessageSujet: Re: Le HTML pour tous ? =D   Le HTML pour tous ? =D EmptyLun 11 Juil - 15:50

    Ca maaaaaaaaaaaarche ! Kyaaaaaah >W<. Merci merci merci merci merci merci ='DD.
Revenir en haut Aller en bas

Indigo Yashima
Indigo Yashima
Lazy Admin ~ Observer


Messages : 1006
Date d'inscription : 28/10/2009
Age : 32
Localisation : N'importe où, en train de prendre des photos

Le HTML pour tous ? =D _
MessageSujet: Re: Le HTML pour tous ? =D   Le HTML pour tous ? =D EmptyLun 11 Juil - 16:07

    De rien~
Revenir en haut Aller en bas
https://libertasque-schola.forumactif.org

Contenu sponsorisé




Le HTML pour tous ? =D _
MessageSujet: Re: Le HTML pour tous ? =D   Le HTML pour tous ? =D Empty

Revenir en haut Aller en bas
 

Le HTML pour tous ? =D

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 ::  :: ¤[Annonces, FAQ et Suggestions-
Sauter vers: