AccueilAccueil  Epic'Top  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

classe 4 - Roxane
 :: Codage :: Entraînement :: Cours :: Classe Jamy
Aller à la page : 1, 2  Suivant
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2698
Lun 27 Fév 2017 - 16:36
Du coup, voici ton petit cours ! :)
J'espère je vais te convenir en tant que guide ^^


Alors, du coup le code est un peu vieux ^^ Depuis, on fait la guerre à la balise center!

La balise center est dépréciée enfait à présent. Pour center un block, on utilise le CSS : margin: 0 auto;
C'est plus propre. Pour center un texte, on utilise le code : text-align:center;

Du coup, tu as ajouté pas mal de balise center, il faut les supprimer, et toucher au CSS ! :)

Ensuite, je vois que tu as ajouté des balises br. Une fois encore, le mieux c'est encore d'utiliser le CSS pour faire des espacements. On peut utiliser le margin ou alors le padding. Tu connais la différence entre les deux ? :)

RAS pour des div ayant pour nom de class case, ou case2. C'est parfaitement bien imbriqué.
Y'a juste dans ton CSS, tu as écris pour le bloc case2:
Code:
height:autopx;
C'est juste height: auto; Par de px si ce n'est pas un chiffre.
D'autre part, tu n'es pas obligé de le préciser si c'est auto, c'est sous entendu dans un bloc, c'est une valeur par défaut, alors si tu ne la modifie pas, on n'est pas obligé d'écrire la ligne ! :)


Ensuite, tu as extrêmement bien répondu dans le questionnaire:
Code:
Qu'est ce que le BBCode, est ce judicieux de l'utiliser ?: C'est ce qu'on utilise dans les posts directement sur les forums. Il vaut mieux ne pas l'utiliser, mais pour mettre en forme un post RP rapidement, ça reste pratique car les balises sont très courtes.
Du coup ici, je pense il ne faut pas utiliser le BBCode, on est sur une fiche de présentation, on veut que les codes soient allégés au plus possible pour les membres, du coup, on va limiter un max ! On peut faire autrement pour mettre en page l’italique >> font-style: italic; et pour les span le supprimer via font-style:none; cela permettra d'avoir que les réponses en italique ! :)

Donc, on va optimiser ça, en supprimer des balises de bbcode ! :)


Pour tes listes.
Code:
<ul{padding:0px}>
  <li{padding:0px}>
c'est pas comme cela qu'on écrit dans les balises.
Il faut écrire :
ul class="nom_classe"
ou alors : ul style="propriété:valeur;"

et dans le CSS :
.nom_class{
propriete: valeur;
}


tu as fait un mix des deux, ce qui fait qu'on n'a pas la mise en page d'un listing à savoir un retour à la ligne après les éléments d'une liste (li) ni la petite puce.


Pour ce qui est du tableau, ça me semble parfait, mais on verra des tableaux plus compliqués par la suite ! :D

bon, ça fait déjà pas mal à toucher :
  • enlève les balises center et br
  • modification de tes ul li, pour que ce soit correct et que ça se mette convenablement en page
  • enlève le bbcode italique


Dis moi si mes explications ne sont pas claires hein ! :D

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

Administratrice
avatar

Fiche Membre
Lots gagnés:
Administratrice
Administratrice
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 04/12/2016
Messages : 1014
Lun 27 Fév 2017 - 20:36
Merci pour tes commentaires !

Il faut savoir que mes modifs de code sont faits pour beaucoup à l'intuitif et que j'ai la plupart du temps aucune idée de ce que je fais. Pour ça qu'il y a des trucs chelou des fois. xD

J'ai compris pourquoi j'avais certains de mes blocs qui étaient en gras. Il me manquait un span après class2 sur cette ligne:
Code:
   .case span, .case2 span, .case3 span{
Je suis contente d'avoir trouvé toute seule, j'ai cherché 10 plombes ce week-end sans trouver. C'est ton explication sur les italiques qui m'a fait tilt je crois quand j'ai relu mon code.

Pour la balise center, je les ai supprimé, mais j'ai du mal à comprendre pourquoi on ne doit plus l'utiliser. Est-ce que c'est à cause de son ambiguité due au fait qu'avec cette balise on peut à la fois centrer des blocs et des textes indifféremment ? Et que du coup on préfère différencier blocs et textes avec deux fonctions différentes ?

Pour les br, je les ai supprimé, et je ne crois pas que ça ait fait grand chose donc j'ai rien fait de plus. Je sais même pas pourquoi elles étaient là pour tout te dire... Je pense que je les ai ajoutées pour essayer de régler un soucis, et que j'ai oublié de les enlever ensuite. Par contre je ne connais pas la différence. J'ai compris en touchant un peu à des libre-services que ces deux balises servent à définir des marges ou des espacements, mais je ne sais pas exactement comment elles s'utilisent, ni quelle est la différence.

J'ai supprimé la ligne ou il y avait marqué
Code:
height:autopx;

Et j'avoue que c'est débile d'avoir mis px après auto xD

Citation :
Du coup ici, je pense il ne faut pas utiliser le BBCode, on est sur une fiche de présentation, on veut que les codes soient allégés au plus possible pour les membres, du coup, on va limiter un max ! On peut faire autrement pour mettre en page l’italique >> font-style: italic;  et pour les span le supprimer via font-style:none; cela permettra d'avoir que les réponses en italique ! :)

Alors en fait j'avais mis les balises BBC exprès à ces endroits pour faciliter la recherche des endroits à modifier. C'est une habitude qu'avait la codeuse d'un forum où j'ai été longtemps. Je l'ai copiée sans y penser. Comme les balises ont un look vraiment différent, je trouve ça plus facile pour qu'ils trouvent où ils sont sensés écrire, et ne cassent pas les codes. mais j'ai à la place simplement écrit "ECRIRE ICI", en majuscule pour qu'ils le voient bien. Mais je ne tiens pas à ce que leurs réponses soient en italique ou en majuscules, c'est juste pour leur faciliter le remplissage. je ne sais pas si je suis très claire. Du coup je n'ai pas fait ce que tu m'avais dit de faire pour les italiques, vu que je n'en ai pas besoin dans ce code, mais si tu veux que je le fasses pour m'entrainer, je peux essayer. :)


Enfin j'arrive aux listes, et là ça se gâte. J'ai essayé de faire comme tu m'as dit, mais j'ai trop d'espaces, beaucoup trop d'espaces. Je souhaite les supprimer, j'ai essayé divers trucs:
Code:
.liststyle{
  padding:0px;
}

Code:
.liststyle{
  margin:0px;
}

Mais rien ne marche, mes listes font trois km de longs, alors que je souhaiterai vraiment que tous les items soient collés. Help meeeeee ! xD

Et concernant mes deux blocs de style case3, j'aurai aimé que leur hauteur soit identique entre les deux blocs côte-à-côte, est s'adapte au bloc le plus long. Je ne savais pas comment m'y prendre, donc j'ai fait une hauteur fixe pour les deux blocs de la taille qui convenait au bloc le plus long, mais ce n'est pas très élégant. Et si certaines stats ne sont pas utilisées, j'aurai du vide dans mes blocs. Est-ce que tu pourrais m'aiguiller ?

J'ai du mal à voir comment je peux ajuster la hauteur d'un bloc en fonction de ce qu'il y a dans un autre bloc...

Edit: Je suis débile j'ai oublié de te mettre les nouveaux codes:

Code:
  .case span, .case2 span, .case3 span{
          text-shadow:1px 0px 0px white;
        font-weight:bold;}

        .image{transform: rotate(7deg);
          -webkit-transform: rotate(7deg);
          -moz-transform: rotate(7deg);
          -o-transform: rotate(7deg);
          -ms-transform: rotate(7deg);
          border:5px solid #8C3F60;
        margin-right:10px;
        float:left;}
         
        .nom{font-family: 'BenchNine', sans-serif;
          text-shadow:1px 0px 0px white;
          font-size: 20px;
          letter-spacing:1px;
        text-transform:uppercase;
        border-bottom: 10px double #8C3F60;
        text-align:center;
        padding:2px;
        color:grey;}

        .préza{background: url('http://www.photos-public-domain.com/wp-content/uploads/2011/02/ivory-cream-colored-leather-texture.jpg');/*image de fond*/
          padding:15px;
          border-radius:20px;
          border-top: 10px solid #8C3F60;
          border-bottom: 10px solid #8C3F60;
          color:dimgray;
          width: 600px;
     margin: 0 auto;}

        .case{background-color:gainsboro;
          padding:5px;
          color:grey;
        height:140px;
        width:350px;
        overflow:auto;}

        .case2{background-color:gainsboro;
          padding:5px;
          color:grey;
          width:auto;
          text-align:justify;
          }
        .case3{background-color:gainsboro;
          padding:5px;
          color:grey;
        height:460px;
        width:285px;
          text-align:justify;
          }

.liststyle{
  padding:0px;
}

Code:
<div class="préza"><div class="nom">Prénom Nom</div><table><tr><td><img class="image" src="http://i47.servimg.com/u/f47/11/97/95/88/0311.png" /></td><td><div class="nom">Identité</div><div class="case">
    <span>Surnom(s): </span>ECRIRE ICI
    <span>Genre: </span>ECRIRE ICI 
    <span>Âge: </span>ECRIRE ICI
    <span>Race: </span>ECRIRE ICI
    <span>Rang Social: </span>(indication à supprimer: précisez si vous souhaitez le tirer au sort, ou choisissez-le) ECRIRE ICI
    <span>Métier: </span>ECRIRE ICI
    <span>Classe: </span>ECRIRE ICI
    <span>Classe secondaire: </span> (indication à supprimer: active seulement à partir du niveau 20, peut être décidée plus tard) ECRIRE ICI
    <span>Alignement: </span> (attribué par le staff)
    <span>Inventaire: </span>ECRIRE ICI</div>

    <div class="nom">Physique</div><div class="case">Décrire ici votre apparence physique en 150 mots minimum.</div></td></tr></table>
<div class="nom">Caractère</div><div class="case2">Décrire ici votre caractère en 200 mots minimum.</div>
<div class="nom">Histoire</div><div class="case2">Ecrire ici votre histoire (enfance, adolescence, faits marquants...) en 250 mots minimum.</div>
<div class="nom">Derrière l'écran</div><div class="case2">
    <span>Prénom ou pseudo:</span>ECRIRE ICI
    <span>Âge:</span>ECRIRE ICI
    <span>Avatar:</span>ECRIRE ICI
    <span>Comment as-tu connu le forum ?</span>ECRIRE ICI
    <span>Ton avis sur le forum ?</span>ECRIRE ICI
    <span>Code du règlement:</span>[hide]ECRIRE ICI[/hide]</div>
    (c) CODAGE PAR MADOUCE SUR <a href="http://epicode.bbactif.com">EPICODE</a></div>



<div class="préza"><div class="nom">Fiche de Stats</div><table><tr><td><div class="nom">Stats primaires</div><div class="case3">
<ul class="liststyle">
  <li class="liststyle"><span>Force:</span> [i]écrire ici[/i]</li>
  <li class="liststyle"><span>Dextérité:</span> [i]écrire ici[/i]</li>
  <li class="liststyle"><span>Constitution:</span> [i]écrire ici[/i]</li>
  <li class="liststyle"><span>Intelligence:</span> [i]écrire ici[/i]</li>
  <li class="liststyle"><span>Sagesse:</span> [i]écrire ici[/i]</li>
  <li class="liststyle"><span>Charisme:</span> [i]écrire ici[/i]</li>
</ul>
<ul class="liststyle">
  <li class="liststyle"><span>Vie:</span> [i]écrire ici[/i]</li>
  <li class="liststyle"><span>Classe Armure:</span> [i]écrire ici[/i]</li>
  <li class="liststyle"><span>Bonus Base à l'Attaque:</span> [i]écrire ici[/i]</li>
</ul>
<ul class="liststyle">
 <li class="liststyle"><span>Réflexe:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Vigueur:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Volonté:</span> [i]écrire ici[/i]</li>
</ul></div></td>
<td><div class="nom">Compétences</div><div class="case3">
<ul class="liststyle">
 <li class="liststyle"><span>Acrobatie:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Art de la Magie:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Artisanat (métier au choix):</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Concentration:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Connaissance (au choix):</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Course:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Crochetage:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Déplacement silencieux:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Désamorçage:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Détection:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Discrétion:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Dressage:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Equilibre:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Equitation:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Escamotage:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Evasion:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Fouille:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Maitrise des cordes:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Natation:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Perception auditive:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Premiers secours:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Saut:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Survie:</span> [i]écrire ici[/i]</li>
 <li class="liststyle"><span>Utilisation d'objets magiques:</span> [i]écrire ici[/i]</li>
</ul>
</div></td></tr></table>

<div class="nom">Armes et Armure</div><div class="case2"><ul{padding:0px}>
  <li class="liststyle"><span>Armure:</span>[i]écrire ici le nom de l'équipement[/i]</li>
<ul class="liststyle">
      <li class="liststyle">Propriété 1</li>
      <li class="liststyle">Propriété 2</li>
      <li class="liststyle">Propriété 3</li>
  </ul>
  <li class="liststyle"><span>Arme 1:</span>[i]écrire ici le nom de l'équipement[/i]</li>
<ul class="liststyle">
      <li class="liststyle">Propriété 1</li>
      <li class="liststyle">Propriété 2</li>
      <li class="liststyle">Propriété 3</li>
  </ul>
  <li class="liststyle"><span>Arme 2:</span>[i]écrire ici le nom de l'équipement[/i]</li>
<ul class="liststyle">
      <li class="liststyle">Propriété 1</li>
      <li class="liststyle">Propriété 2</li>
      <li class="liststyle">Propriété 3</li>
  </ul>
</ul>
</div>
    <div class="nom">Inventaire</div><div class="case2">
<ul class="liststyle">
  <li class="liststyle">Elément 1</li>
  <li class="liststyle">Elément 2</li>
  <li class="liststyle">Elément 3</li>
</ul>
</div>
      (c) CODAGE PAR MADOUCE SUR <a href="http://epicode.bbactif.com">EPICODE</a></div>

_________________________________________

Mes claviers d'ordinateur sont en qwerty, donc mes posts manquent parfois d'accents. Je m'en excuse si ca gene un peu la comprehension.

Cadeaux:
 
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2698
Mer 1 Mar 2017 - 19:07
Citation :
Il faut savoir que mes modifs de code sont faits pour beaucoup à l'intuitif et que j'ai la plupart du temps aucune idée de ce que je fais. Pour ça qu'il y a des trucs chelou des fois. xD
hahaha, c'est normal quand on débute ^^ on va reprendre des bases alors pour que tu comprennes bien chaque étape ! ^^


Citation :
J'ai compris pourquoi j'avais certains de mes blocs qui étaient en gras. Il me manquait un span après class2 sur cette ligne:
Code:
.case span, .case2 span, .case3 span{
Je suis contente d'avoir trouvé toute seule, j'ai cherché 10 plombes ce week-end sans trouver. C'est ton explication sur les italiques qui m'a fait tilt je crois quand j'ai relu mon code.
oh excuses moi, j'ai sauté un de tes bug ! :/ si ça arrive, n'hésites pas à me redemander ^^


Citation :
Pour la balise center, je les ai supprimé, mais j'ai du mal à comprendre pourquoi on ne doit plus l'utiliser. Est-ce que c'est à cause de son ambiguité due au fait qu'avec cette balise on peut à la fois centrer des blocs et des textes indifféremment ? Et que du coup on préfère différencier blocs et textes avec deux fonctions différentes ?
Alors, la balise center n'est plus utilisé car :
- on cherche tjrs à optimiser nos codes à les rendre modifiable très rapidement. Surtout pour d'une version à une autre et quand le code est utilisé plusieurs fois. Si tu mets des balises center partout et que d'un coup tu ne veux plus d'alignement central, dans le premier cas où tu as utilisé la balise tu dois revenir sur chacun de tes codes... Dans l'autre cas, tu touches à une ligne de CSS...
Tu verras qu'on cherche tjrs à alléger le code HTML en virant le maximum pour ne garder que l'essentiel ! :)


Citation :
Pour les br, je les ai supprimé, et je ne crois pas que ça ait fait grand chose donc j'ai rien fait de plus. Je sais même pas pourquoi elles étaient là pour tout te dire... Je pense que je les ai ajoutées pour essayer de régler un soucis, et que j'ai oublié de les enlever ensuite. Par contre je ne connais pas la différence. J'ai compris en touchant un peu à des libre-services que ces deux balises servent à définir des marges ou des espacements, mais je ne sais pas exactement comment elles s'utilisent, ni quelle est la différence.
Pas de soucis pour le BR ! :) on évitera de les utiliser, pour les même raisons que dit précédemment ! On vire un maximum de ce qui est inutile. Les espacements/retour à la ligne (car br c'est pour break), peuvent se gérer avec d'autres choses.

RETOUR A LA LIGNE : on entourera les textes par des balises de types blocks (exemple : balise p, div, h ...)
MARGIN : marge externe à un block
PADDING : marge externe à un block

Exemple :
ok
ok

le code :
Code:
<div style="background: pink; height:50px; width:250px; margin:10px;">ok</div><div style="background: green; height:50px; width:250px; padding:20px;">ok</div>


Je me permet de faire un mini aparté, tu connais la différence entre une balise block et inline ? Et l'attribut style et id ?
si oui, oublies ! sinon >> lis le tuto intro au codage pour avoir la notion ici ! :) et n'hésites pas si tu as encore des questions à ce propos ! :)


Code:
Alors en fait j'avais mis les balises BBC exprès à ces endroits pour faciliter la recherche des endroits à modifier. C'est une habitude qu'avait la codeuse d'un forum où j'ai été longtemps. Je l'ai copiée sans y penser. Comme les balises ont un look vraiment différent, je trouve ça plus facile pour qu'ils trouvent où ils sont sensés écrire, et ne cassent pas les codes. mais j'ai à la place simplement écrit "ECRIRE ICI", en majuscule pour qu'ils le voient bien. Mais je ne tiens pas à ce que leurs réponses soient en italique ou en majuscules, c'est juste pour leur faciliter le remplissage. je ne sais pas si je suis très claire. Du coup je n'ai pas fait ce que tu m'avais dit de faire pour les italiques, vu que je n'en ai pas besoin dans ce code, mais si tu veux que je le fasses pour m'entrainer, je peux essayer. :)
haaaa d'accord, je comprends mieux ^^ je vois ce que tu veux dire ^^ c'est qu'en fait, je ne regarde pas le rendu de vos codes dans le forum FA, je vais direct sur un interpréteur de codage et il me pète les yeux avec les BBcode, ça rend illisible xD mais ok, tu peux les laisser dans ce là ^^

Les listes.
Citation :
Enfin j'arrive aux listes, et là ça se gâte. J'ai essayé de faire comme tu m'as dit, mais j'ai trop d'espaces, beaucoup trop d'espaces. Je souhaite les supprimer, j'ai essayé divers trucs:
je comprends pas bien le problème ... :mh: moi elles sont bien mise tes listes ... je veux dire, les une en dessous des autres sans espacement en trop ... Après, je suis en train de me dire ... tu as fait un retour à la ligne dans le code ... c'est à dire :
Code:
<ul class="liststyle">
  <li class="liststyle"><span>Force:</span> [i]écrire ici[/i]</li>
  <li class="liststyle"><span>Dextérité:</span> [i]écrire ici[/i]</li>
  <li class="liststyle"><span>Constitution:</span> [i]écrire ici[/i]</li>
  <li class="liststyle"><span>Intelligence:</span> [i]écrire ici[/i]</li>
  <li class="liststyle"><span>Sagesse:</span> [i]écrire ici[/i]</li>
  <li class="liststyle"><span>Charisme:</span> [i]écrire ici[/i]</li>
</ul>
chose que FA interprète comme un espacement (contrairement à mon logiciel). essayes :
Code:
<ul class="liststyle"><li class="liststyle"><span>Force:</span> [i]écrire ici[/i]</li><li class="liststyle"><span>Dextérité:</span> [i]écrire ici[/i]</li><li class="liststyle"><span>Constitution:</span> [i]écrire ici[/i]</li><li class="liststyle"><span>Intelligence:</span> [i]écrire ici[/i]</li><li class="liststyle"><span>Sagesse:</span> [i]écrire ici[/i]</li><li class="liststyle"><span>Charisme:</span> [i]écrire ici[/i]</li></ul>
si ça ne règle pas le soucis, dis moi, avec un screen peut être ? :mh:


Hauteurs de tes blocs :
Citation :
Et concernant mes deux blocs de style case3, j'aurai aimé que leur hauteur soit identique entre les deux blocs côte-à-côte, est s'adapte au bloc le plus long. Je ne savais pas comment m'y prendre, donc j'ai fait une hauteur fixe pour les deux blocs de la taille qui convenait au bloc le plus long, mais ce n'est pas très élégant. Et si certaines stats ne sont pas utilisées, j'aurai du vide dans mes blocs. Est-ce que tu pourrais m'aiguiller ?

J'ai du mal à voir comment je peux ajuster la hauteur d'un bloc en fonction de ce qu'il y a dans un autre bloc...
Alors, bienvenue dans le monde du codage et de la bidouiiile !! :D

en fait quand tu veux résoudre un problème de ce type tu dois réfléchir à la construction de ton code...
ici tu as un tableau à 2 colonnes/1 ligne.
Dans chaque tu as un titre puis un bloc pour les listes. toi tu veux un bckgd qui soit sur tes blocs.
Les cellules d'un tableau s'adaptent à la taille de la voisine. si tu ajoute un border=" 1" comme attribut à ta balise table:
Code:
<table border="1">
tu vas mieux visualiser ! tu vas voir que la cellule du premier bloc fait la même hauteur que la seconde ! Tu peux donc utiliser ça, et te dire, ok, alors le fond, je vais le mettre sur mon td ! comme ça, ça sera automatique.
Seulement, construit comme ça, il est également présent sur ton titre. or, tu ne voulais pas. Pas de problème, il suffit de le sortir du td ce titre. D'ajouter une première ligne qui contiendra les titres (2 col pareil) et de mettre le bckgd sur la 2em ligne uniquement.
Personnellement, c'est comme ça que je ferais ! :)

dis moi si le raisonnement est mal expliqué ^^

------

ps: pardon, je me rend compte je fais du franglais horrible en écrivant block ... Oo j'espère ça t'horripile pas trop ... c'est que tu coup, j'écris ça comme si c'était les valeurs des propriétés, or, c'est pas français ... dis moi, je me forcerai à me relire si tu n'arrives vraiment pas à supporter ma façon d'écrire ...

-----

j'attends de voir si tu t'en sors avec ces modifs déjà, et ensuite on ira un peu plus loin et j’ajouterai des nouvelles notions ! :D

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

Administratrice
avatar

Fiche Membre
Lots gagnés:
Administratrice
Administratrice
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 04/12/2016
Messages : 1014
Jeu 2 Mar 2017 - 22:41
Pfiou !!!

Ce fut laborieux, mais je suis arrivée au bout de mon bidouillage. Déjà merci énormément pour toutes tes explications. Tu es vraiment très pédagogue, et tu me donnes juste ce qu'il faut pour m'aiguiller tout en ne donnant pas la solution, pour que je cherche et puisse apprendre des choses par moi-même. C'est vraiment top !

Le franglais c'est pas un soucis du tout. J'en fais beaucoup aussi donc ne t'inquiètes pas pour ça. Ca ne m'avait même pas sauté aux yeux avant que tu ne le dises. ^^

Donc je vais reprendre les différents points dans l'ordre de ton poste.
Pour le bug du bloc en gras, pas de soucis. Je t'aurai demandé si je n'avais pas trouvé par moi-même ne t'inquiètes pas. J'ai juste recherché avant de te demander, parce que je n'aime pas abandonner, et il se trouve que j'ai trouvé, donc je n'ai pas eu besoin de te demander. ^^

Merci je vois mieux, pour les balises center et br. :)

Citation :
Je me permet de faire un mini aparté, tu connais la différence entre une balise block et inline ? Et l'attribut style et id ?
si oui, oublies ! sinon >> lis le tuto intro au codage pour avoir la notion ici ! :) et n'hésites pas si tu as encore des questions à ce propos ! :)
Alors pour la balise block et inline, je me souvenais, mais pas pour style et id, donc je suis allée relire le tuto, et je me rends compte que pour style/id, j'ai encore un peu de mal. Je crois que j'ai plus rarement croisé id que style, du coup j'ai encore un peu de mal à le comprendre.

Pour les listes, tu avais raison, c'était bien les retours à la ligne dans le HTML qui créaient les espacements. Ca a réglé le problème que je mettes tout à la suite sans retour à la ligne. MAIS (oui je suis chiante) je ne serai pas l'admin de ce forum, et c'est l'admin qui remplira la partie des statistiques. Je le connais et il ne connait absolument rien en codage. Hors il va être amené à devoir enlever/ajouter des lignes de stats en fonction du personnage (tous n'auront pas toutes les capacités possibles). Et je vois d'avance que si je lui présente cette fiche à remplir, avec tout collé il va hurler s'asseoir par terre et pleurer. Les retours à la ligne étaient un moyen pour lui d'ajouter/retirer facilement des éléments sans passer 10 ans à chercher dans le code de la fiche. Donc il faudrait que j'arrive à faire autrement. Mais je n'ai pas tellement d'idée.

Pour la hauteur des blocs, je suis fière de moi, j'ai cherché un bon moment, j'ai tatonné à partir des instructions que tu m'as données, mais j'ai réussi. Je ne sais pas si le code est parfait, mais il fonctionne, c'est un bon début.

Je te laisse les nouveaux codes. Et si tu veux voir le rendu sur forumactif, tu peux l'avoir ici.

Code:
  .case span, .case2 span, .case3 span{
          text-shadow:1px 0px 0px white;
        font-weight:bold;}

        .image{transform: rotate(7deg);
          -webkit-transform: rotate(7deg);
          -moz-transform: rotate(7deg);
          -o-transform: rotate(7deg);
          -ms-transform: rotate(7deg);
          border:5px solid #8C3F60;
        margin-right:10px;
        float:left;}
         
        .nom{font-family: 'BenchNine', sans-serif;
          text-shadow:1px 0px 0px white;
          font-size: 20px;
          letter-spacing:1px;
        text-transform:uppercase;
        border-bottom: 10px double #8C3F60;
        text-align:center;
        padding:2px;
        color:grey;}

        .préza{background: url('http://www.photos-public-domain.com/wp-content/uploads/2011/02/ivory-cream-colored-leather-texture.jpg');/*image de fond*/
          padding:15px;
          border-radius:20px;
          border-top: 10px solid #8C3F60;
          border-bottom: 10px solid #8C3F60;
          color:dimgray;
          width: 600px;
     margin: 0 auto;}

        .case{background-color:gainsboro;
          padding:5px;
          color:grey;
        height:140px;
        width:350px;
        overflow:auto;}

        .case2{background-color:gainsboro;
          padding:5px;
          color:grey;
          width:auto;
          text-align:justify;
          }
        .case3{background-color:gainsboro;
          color:grey;
        width:285px;
          text-align:justify;
          }

.liststyle{
  padding:20px;
}

.fondgris{
    background-color:gainsboro;
    color:grey;
}

Code:
<div class="préza"><div class="nom">Prénom Nom</div><table><tr><td><img class="image" src="http://i47.servimg.com/u/f47/11/97/95/88/0311.png" /></td><td><div class="nom">Identité</div>
<div class="case">
  <span>Surnom(s): </span>ECRIRE ICI
  <span>Genre: </span>ECRIRE ICI 
  <span>Âge: </span>ECRIRE ICI
  <span>Race: </span>ECRIRE ICI
  <span>Rang Social: </span>(indication à supprimer: précisez si vous souhaitez le tirer au sort, ou choisissez-le) ECRIRE ICI
  <span>Métier: </span>ECRIRE ICI
  <span>Classe: </span>ECRIRE ICI
  <span>Classe secondaire: </span> (indication à supprimer: active seulement à partir du niveau 20, peut être décidée plus tard) ECRIRE ICI
  <span>Alignement: </span> (attribué par le staff)
  <span>Inventaire: </span>ECRIRE ICI</div><div class="nom">Physique</div><div class="case">Décrire ici votre apparence physique en 150 mots minimum.</div></td></tr></table>
<div class="nom">Caractère</div><div class="case2">Décrire ici votre caractère en 200 mots minimum.</div>
<div class="nom">Histoire</div><div class="case2">Ecrire ici votre histoire (enfance, adolescence, faits marquants...) en 250 mots minimum.</div>
<div class="nom">Derrière l'écran</div><div class="case2">
    <span>Prénom ou pseudo:</span>ECRIRE ICI
    <span>Âge:</span>ECRIRE ICI
    <span>Avatar:</span>ECRIRE ICI
    <span>Comment as-tu connu le forum ?</span>ECRIRE ICI
    <span>Ton avis sur le forum ?</span>ECRIRE ICI
    <span>Code du règlement:</span>[hide]ECRIRE ICI[/hide]</div>
    (c) CODAGE PAR MADOUCE SUR <a href="http://epicode.bbactif.com">EPICODE</a></div>



<div class="préza"><div class="nom">Fiche de Stats</div><table><tr><td><div class="nom">Stats primaires</div></td><td><div class="nom">Compétences</div></td></tr><tr class="fondgris"><td><div class="case3"><ul class="liststyle"><li><span>Force:</span> [i]écrire ici[/i]</li><li><span>Dextérité:</span> [i]écrire ici[/i]</li><li><span>Constitution:</span> [i]écrire ici[/i]</li><li><span>Intelligence:</span> [i]écrire ici[/i]</li><li><span>Sagesse:</span> [i]écrire ici[/i]</li><li><span>Charisme:</span> [i]écrire ici[/i]</li></ul>
<ul class="liststyle"><li><span>Vie:</span> [i]écrire ici[/i]</li><li><span>Classe Armure:</span> [i]écrire ici[/i]</li><li><span>Bonus Base à l'Attaque:</span> [i]écrire ici[/i]</li></ul>
<ul class="liststyle"><li><span>Réflexe:</span> [i]écrire ici[/i]</li><li><span>Vigueur:</span> [i]écrire ici[/i]</li><li><span>Volonté:</span> [i]écrire ici[/i]</li>
</ul></div></td><td><div class="case3"><ul class="liststyle"><li><span>Acrobatie:</span> [i]écrire ici[/i]</li><li><span>Art de la Magie:</span> [i]écrire ici[/i]</li><li><span>Artisanat (métier au choix):</span> [i]écrire ici[/i]</li><li><span>Concentration:</span> [i]écrire ici[/i]</li><li<span>Connaissance (au choix):</span> [i]écrire ici[/i]</li><li><span>Course:</span> [i]écrire ici[/i]</li><li><span>Crochetage:</span> [i]écrire ici[/i]</li><li><span>Déplacement silencieux:</span> [i]écrire ici[/i]</li><li><span>Désamorçage:</span> [i]écrire ici[/i]</li><li><span>Détection:</span> [i]écrire ici[/i]</li><li><span>Discrétion:</span> [i]écrire ici[/i]</li><li><span>Dressage:</span> [i]écrire ici[/i]</li><li><span>Equilibre:</span> [i]écrire ici[/i]</li><li><span>Equitation:</span> [i]écrire ici[/i]</li><li><span>Escamotage:</span> [i]écrire ici[/i]</li><li><span>Evasion:</span> [i]écrire ici[/i]</li><li><span>Fouille:</span> [i]écrire ici[/i]</li><li><span>Maitrise des cordes:</span> [i]écrire ici[/i]</li><li><span>Natation:</span> [i]écrire ici[/i]</li><li><span>Perception auditive:</span> [i]écrire ici[/i]</li><li><span>Premiers secours:</span> [i]écrire ici[/i]</li><li><span>Saut:</span> [i]écrire ici[/i]</li><li><span>Survie:</span> [i]écrire ici[/i]</li><li><span>Utilisation d'objets magiques:</span> [i]écrire ici[/i]</li></ul></div></td></tr></table>

<div class="nom">Armes et Armure</div><div class="case2"><ul class="liststyle"><li><span>Armure:</span>[i]écrire ici le nom de l'équipement[/i]</li><ul><li>Propriété 1</li><li>Propriété 2</li><li>Propriété 3</li></ul><li><span>Arme 1:</span>[i]écrire ici le nom de l'équipement[/i]</li><ul><li>Propriété 1</li><li>Propriété 2</li><li>Propriété 3</li></ul><li><span>Arme 2:</span>[i]écrire ici le nom de l'équipement[/i]</li><ul><li>Propriété 1</li><li>Propriété 2</li><li>Propriété 3</li></ul></ul></div><div class="nom">Inventaire</div><div class="case2"><ul class="liststyle"><li>Elément 1</li><li>Elément 2</li><li>Elément 3</li></ul></div>
      (c) CODAGE PAR MADOUCE SUR <a href="http://epicode.bbactif.com">EPICODE</a></div>

_________________________________________

Mes claviers d'ordinateur sont en qwerty, donc mes posts manquent parfois d'accents. Je m'en excuse si ca gene un peu la comprehension.

Cadeaux:
 
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2698
Ven 3 Mar 2017 - 20:00


Contente que ma méthode te plait alors !!
M'enfin, pas plus de blabla, voici mes réponses ! ;)

Citation :
Alors pour la balise block et inline, je me souvenais, mais pas pour style et id, donc je suis allée relire le tuto, et je me rends compte que pour style/id, j'ai encore un peu de mal. Je crois que j'ai plus rarement croisé id que style, du coup j'ai encore un peu de mal à le comprendre.
>> c'est normal que tu les rencontres moins, les id sont très peu utilisé, puisqu'un nom de id doit être unique. Mais ils sont très utilisés pour le JavaScript par contre, très pratique pour sélectionner des éléments. Mais on en est pas encore là ! ;)


Citation :
Pour les listes, tu avais raison, c'était bien les retours à la ligne dans le HTML qui créaient les espacements. Ca a réglé le problème que je mettes tout à la suite sans retour à la ligne. MAIS (oui je suis chiante) je ne serai pas l'admin de ce forum, et c'est l'admin qui remplira la partie des statistiques. Je le connais et il ne connait absolument rien en codage. Hors il va être amené à devoir enlever/ajouter des lignes de stats en fonction du personnage (tous n'auront pas toutes les capacités possibles). Et je vois d'avance que si je lui présente cette fiche à remplir, avec tout collé il va hurler s'asseoir par terre et pleurer.  Les retours à la ligne étaient un moyen pour lui d'ajouter/retirer facilement des éléments sans passer 10 ans à chercher dans le code de la fiche. Donc il faudrait que j'arrive à faire autrement. Mais je n'ai pas tellement d'idée.
>> ARF. je vois ce que tu veux dire ! Bon, dans ce cas là, et uniquement pour aider une personne en détresse, ce qu'on peut faire, c'est faire un margin négatif sur tes li.
Je précise vraiment que c'est uniquement ici, car c'est un peu à bannir comme technique de faire des margin négatif... C'est vraiment pas propre... Et comme je vise à te faire coder proprement, et pour des trucs plus sophistiqué qu'une simple fiche de présentation pour forum, c'est mieux de prendre des bonnes habitudes ! ;)
Du coup, si tu veux faire des retours à la ligne, ajoute un margin-top:-10px; ou quelques choses du genre, tu devras peut être augmenter ou diminuer la valeur ! :)

ça rendra le code plus propre dans l'interprétateur FA et facilitera le travail à ton pote ! ;)



Pour ce qui est de ton code, ça me semble très bien ! :DD
Je n'ai pas vu de fautes, ni d'autres modifications possible pour simplifier, donc, c'est parfait ! :D
Sauf si tu veux ajouter d'autres choses dessus, auquel cas demande, nous allons passer à autre chose :

un code que tu vas faire de A à Z.
Car c'est ainsi que tu vas vraiment apprendre plutôt que d'adapter un code ! ;)


Bon, on va prendre un templates dont tu pourras discuter sur le rendu, je ne suis pas designeuse xDDD
Mais c'est un bon entrainement ! x)

ça sera une fiche PV, je rajouterai une partie pour les liens plus tard, j'imagine du hover etc... ça va permettre en même temps d'aborder plein de notions à commencer par le positionnement.



Je te fournis des indications "design", si jamais tu as la flegme de changer, mais si tu veux adapter, sens toi libre :
https://i58.servimg.com/u/f58/18/48/99/76/bruit_10.gif
https://i58.servimg.com/u/f58/18/48/99/76/100x1010.jpg
couleur fond : #ececec
couleur rouge : #91172A


Et bien sur, si tu as besoins d'aide n'hésites pas à demander ! :)

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

Administratrice
avatar

Fiche Membre
Lots gagnés:
Administratrice
Administratrice
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 04/12/2016
Messages : 1014
Dim 5 Mar 2017 - 19:55
Alors merci pour l'astuce, pour la fiche test.

J'ai modifié en ajoutant un margin négatif, et ça fonctionne bien. J'ai une question, concernant ce petit margin. J'ai rajouté une classe que j'ai appelé "lineg", et j'ai du coup introduit toutes mes puces en mettant ça:

Code:
<li class="lineg">

Ca marche est c'est pas non plus hyper long ou moche, mais je me demandais si il y avait un moyen d'indiquer qu'on souhaite que par exemple dans toutes les listes contenues dans un bloc de style case3, les puces utilisent le style lineg. Et qu'ensuite il suffise du coup d'utiliser

Code:
<li>

pour avoir le margin négatif, et de la même manière pour les ul class="liststyle", si je pouvais me contenter de mettre ul tout en ayant le padding qui se fasse, ce serait un peu moins dense dans le code de la fiche.

Je ne sais pas du tout si c'est possible ou non. J'y ai réfléchi un peu mais je ne voyais pas trop comment je pouvais faire.



Pour le codage de la fiche de PV en partant de rien, je suis partante pour me lancer dans l'exercice, mais je dois t'avouer franchement que je me retrouve un peu con devant le truc, et que j'ai un peu le syndrome de la page blanche, version bébé codeur. Je n'ai aucune idée de par où je suis sensée commencer. Est-ce que tu crois que tu pourrais me guider, ou m'orienter vers des tutos qui aborderaient des points qui me permettraient de commencer ?

_________________________________________

Mes claviers d'ordinateur sont en qwerty, donc mes posts manquent parfois d'accents. Je m'en excuse si ca gene un peu la comprehension.

Cadeaux:
 
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2698
Mar 7 Mar 2017 - 18:10
Citation :
Ca marche est c'est pas non plus hyper long ou moche, mais je me demandais si il y avait un moyen d'indiquer qu'on souhaite que par exemple dans toutes les listes contenues dans un bloc de style case3, les puces utilisent le style lineg. Et qu'ensuite il suffise du coup d'utiliser

oui, il existe un moyen ! :D On appelle cela la "sélection" d'élement ! :)
il y a plusieurs sélecteurs, et je voulais pas t'embêter avec cela dès maintenant, mais je peux au moins te parler du plus courant qui répondra à ta question ! :)

Code:
.case3 ul li{
propriété:valeur;
}

c'est tout bête en vrai hein ! ;)
tu mets le nom de la classe parente (ou bien juste le nom de la balise, si mettons tu voulais sélectionner les li d'une balise ul >> ul li), et puis, séparé d'un espace, le nom de la balise enfant de l'élément que tu vises.

pour ce qui est du ul, tu cibles : .case3 ul tout simplement ! :)



Citation :
Pour le codage de la fiche de PV en partant de rien, je suis partante pour me lancer dans l'exercice, mais je dois t'avouer franchement que je me retrouve un peu con devant le truc, et que j'ai un peu le syndrome de la page blanche, version bébé codeur. Je n'ai aucune idée de par où je suis sensée commencer. Est-ce que tu crois que tu pourrais me guider, ou m'orienter vers des tutos qui aborderaient des points qui me permettraient de commencer ?
zut, j'aurai du te répondre plus vite pour te débloquer ... :/
ne t'inquiètes pas, c'est normal au début ! :)
je n'ai pas vraiment de tuto pour ça ... :mh: tu as lu toutes la partie intro, et tu comprends les codes et arrives à les bidouiller, donc, y'a que dans ta tête, car tu as les connaissances ! :)

respires un bon coup et penses en même temps que moi ! :)
quand je regardes une maquette, je décompose les éléments en 'block'.
Je commence souvent pas écrire la partie HTML, puis après, je fais le CSS. Mais tu peux faire un peu les deux en même tps au début, sur des choses simples pour te voir avancer ! :)

Là, on peut voir qu'on a un block avec un fond grisé. Un block j'ai dit ? >> c'est quelle balise qui permet de faire un block ? :D
C'est qu'elle propriété qui permet de mettre un fond gris ?

Ensuite, on a une image, comment s'écrit la balise image ? Pour le coup, tu vas devoir aller regarder dans le tuto qui liste les balises / propriétés, ou alors plus simplement, demande à google. Ne copie/colle pas les codes. Je te conseille de le lire, changer d'onglet en allant dans codepen, et te retaper le code de "mémoire", ça va finir par te les faire retenir. Et puis tu vas avoir de grosse facilité, c'est très logique puisque juste les mots anglais ^^ Au début, y'a que ça, puis d'une fois à l'autre tu vas retenir et tu n'auras plus besoin de chercher ! :)

Ensuite, on peut voir que y'a une autre image, qui est dans un block aussi, avec un fond blanc. Cette icone n'est pas collé au bord du block, d'où on voit le fond ... Puis on a du texte >> un nom prénom et une citation qui sont à côté de l'icone. Il y'a une notion de positionnement qu'on va voir ensemble ! :)

mais déjà, essaye de placer ces éléments les uns en dessous des autres ! :)

si tu bloques tjrs, n'hésites pas, j'essayerai de voir pour plus simple ou faire autrement !

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

Administratrice
avatar

Fiche Membre
Lots gagnés:
Administratrice
Administratrice
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 04/12/2016
Messages : 1014
Mer 8 Mar 2017 - 20:59
Alors merci pour l'astuce pour les sélecteurs ! Ca m'a permis de comprendre certaines choses du libre-service que j'avais utilisé, vu qu'en fait il y en avait. ^^ Et j'ai un peu simplifié le code du coup en mettant le sélecteur sur les span de .préza au lieu de le mettre sur mes 3 types de .case.

Bon sinon je me suis attaquée à l'exercice, et je dois dire que je suis pas peu fière de moi. A grand-renforts de tutos (celui sur les balises des listes, celui sur les balises HTML, et celui sur les blocs), et à l'aide de ce que j'avais dans les libre-services que j'ai installés sur mon forum, ainsi que de google pour les guillemets, je suis arrivée à un résultat que je trouve plutôt proche de ta maquette ! Bon ce n'est pas tout à fait parfait niveau rendu, et j'imagine que les codes peuvent être optimisés, mais voilà le résultat de mon premier essai. Et tellement merci de m'avoir fait comprendre qu'en fait j'en étais capable. C'est tout con mais ça m'a débloquée. ^^

Code:
<div class="exo1_fichePV">
  <div><img src="https://i58.servimg.com/u/f58/18/48/99/76/bruit_10.gif"></div>
  <table><td><img class="exo1_img2" src="https://i58.servimg.com/u/f58/18/48/99/76/100x1010.jpg"></td>
    <td><div class="exo1_titre">Nom Prénom</div><div class="exo1_citation">«citation un peu trop cool pour etre ignoree»</div></td></table><div class=exo1_part2>
  <hr />
  <table><td><div class="exo1_id"><h1>Identity.</h1><ul><li><span>ft. :</span>Who<li><span>Age :</span>...<li><span>Lieu de naissance :</span>...<li><span>Nationalité :</span>...<li><span>Particularité :</span>...</ul></div></td><td><div class="exo1_Bio"><h1>Biography.</h1>
Ciliciam vero, quae Cydno amni exultat, Tarsus nobilitat, urbs perspicabilis hanc condidisse Perseus memoratur, Iovis filius et Danaes, vel certe ex Aethiopia profectus Sandan quidam nomine vir opulentus et nobilis et Anazarbus auctoris vocabulum referens, et Mopsuestia vatis illius domicilium Mopsi, quem a conmilitio Argonautarum cum aureo vellere direpto redirent, errore abstractum delatumque ad Africae litus mors repentina consumpsit, et ex eo cespite punico tecti manes eius heroici dolorum varietati medentur plerumque sospitales.

In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.
Ciliciam vero, quae Cydno amni exultat, Tarsus nobilitat, urbs perspicabilis hanc condidisse Perseus memoratur, Iovis filius et Danaes, vel certe ex Aethiopia profectus Sandan quidam nomine vir opulentus et nobilis et Anazarbus auctoris vocabulum referens, et Mopsuestia vatis illius domicilium Mopsi, quem a conmilitio Argonautarum cum aureo vellere direpto redirent, errore abstractum delatumque ad Africae litus mors repentina consumpsit, et ex eo cespite punico tecti manes eius heroici dolorum varietati medentur plerumque sospitales.

In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.
    </div></td></table></div><div class="exo1_part3"><h1>Nobody's perfect. </h1>adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/trait de caractère/trait de caractère/trait de caractère/trait de caractère</div>
</div>

Code:
.exo1_fichePV{
  background-color:#ececec;
  width:500px;
}
.exo1_img2{
  border:5px solid white;
  margin-top:-50px;
  margin-left:50px;
}
.exo1_titre{
  color:#91172A;
  font-size:30px;
  font-weight:bold;
  text-shadow:0px 1px 1px black;
  margin-top:-30px;
}
.exo1_citation{
  font-style:italic;
  font-size:12px;
}
.exo1_part2{
  padding:20px;
}
.exo1_id{
  width:150px;
  font-size:14px;
}
.exo1_Bio{
  width:300px;
  height:300px;
  background-color:lightgrey;
  overflow:auto;
  font-size:12px;
}
.exo1_part3{
  width:500px;
  background-color:lightgrey;
  font-size:12px;
}
.exo1_part2 h1,.exo1_part3 h1{
  color:#91172A;
  font-size:15px;
  font-weight:bold;
  text-shadow:0px 1px 1px black;
  display:inline-block;
}

.exo1_id span{
  font-weight:bold;
}

.exo1_id ul{
  margin-top:-10px;
  margin-left:-30px;
  list-style-type:"\00A0»";
}

_________________________________________

Mes claviers d'ordinateur sont en qwerty, donc mes posts manquent parfois d'accents. Je m'en excuse si ca gene un peu la comprehension.

Cadeaux:
 
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2698
Sam 11 Mar 2017 - 23:19
Hello ! :D

Citation :
Alors merci pour l'astuce pour les sélecteurs ! Ca m'a permis de comprendre certaines choses du libre-service que j'avais utilisé, vu qu'en fait il y en avait. ^^ Et j'ai un peu simplifié le code du coup en mettant le sélecteur sur les span de .préza au lieu de le mettre sur mes 3 types de .case.
Pas de quoi, je suis là pour ça ! :) contente que je t'aide ! :D

Citation :
Bon sinon je me suis attaquée à l'exercice, et je dois dire que je suis pas peu fière de moi. A grand-renforts de tutos (celui sur les balises des listes, celui sur les balises HTML, et celui sur les blocs), et à l'aide de ce que j'avais dans les libre-services que j'ai installés sur mon forum, ainsi que de google pour les guillemets, je suis arrivée à un résultat que je trouve plutôt proche de ta maquette ! Bon ce n'est pas tout à fait parfait niveau rendu, et j'imagine que les codes peuvent être optimisés, mais voilà le résultat de mon premier essai. Et tellement merci de m'avoir fait comprendre qu'en fait j'en étais capable. C'est tout con mais ça m'a débloquée. ^^
je vais voir ça immédiatement, je suis super contente que tu es réussi !
Ha et un lien qui te sera peut être utile : liste des balises html, les désuètes et des explications. Je sais pas, mais peut être que ça peut te servir ^^


Ton code :
c'est pas mal du touuuut ! :D
Bon, on va virer l'utilisation de la balise table. on ne s'en sert pas pour placer les éléments. Je sais que c'est plus facile, et sur FA c'est très utilisé notemment dans les templates (ça permet d'avoir légèrement moins de bug en cas d'ajout de balises div mal fermé dans les posts), mais avec ce type de fiche, pas la peine d'avoir des tables ! ;)
Et puis, on va se pencher sur la notion de display, ça va être cool ! :D
Je viens de me rendre compte qu'on avait pas de tuto sur le display ... :mh:, je vais essayer de voir ça .. En attendant tu sais que les balises ont un display par défaut ? :) par exemple, donne moi ceux de la balise div et celle de span. Et des conséquences de ce display. Ensuite, on va voir l’intermédiaire entre ces deux types ! :) (que peut être tu connais déjà remarque ^^)

- Du coup, je veux bien que tu essayes avec 2 div, met un bacgd lamda, de couleur verte et rouge par exemple, c'est juste pour visualiser, et donne une hauteur et width. Et essayes de les mettre côte à côte ! :)

personnellement je n'ai pas utilisé de h1 pour mettre mes sous titre en gras. En vrai, la balise h1, qui est une balise de titre, doit être utilisé intelligemment; tu connais ce que veux dire SEO ? :) C'est le référencement naturel des sites, c'est la sémantique du code. Si tu sais pas, je peux te faire un petit aparté au prochaine poste, tout cela pour dire, que la balise h1 est mieux reconnus qu'une autre balise. On code pas au hazard, surtout si tu veux faire arriver ton en tête des résultats google ^^ En général, il existe 1 h1 par site/page. C'est le truc le plus important. C'est ce que google doit récupérer de ton site en premier, et le mettre en gros hastag si tu veux pour si tu tapes le même mot dans google il te sort le site en disant "atta, lui sont titre PRINCIPAL" il a le même mot que tu cherches. Du coup, utiliser un h1 ici n'est pas super pertinent je trouve. (je viens d'écrire un pavé, alors que précédemment je disais que je le ferais plus tard si ça t'intéressait.... )

aussi, dans ton css je vois :
Code:
.exo1_part2 h1,.exo1_part3 h1
c'est bien ! tu cibles correctement, mais saches que tu peux faire plus simple ! en vrai, tu veux styliser de la même façon tout les h1 de ta fiche de PV non ? du coup >>
Citation :
.exo1_fichePV h1

On va se pencher sur les tableaux, et après, on ajoutera des marges/padding/line-height pour faciliter la lecture de tes textes :)

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

Administratrice
avatar

Fiche Membre
Lots gagnés:
Administratrice
Administratrice
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 04/12/2016
Messages : 1014
Lun 13 Mar 2017 - 18:23
Alors alors me revoilà.

J'ai fait quelques changements suite à ton post (pas forcément des trucs que tu m'as directement dit de faire, mais aussi des trucs que j'ai vu dans le lien que tu m'as mis, ou que j'ai remarqué toute seule): J'essaie de te les lister ici, et sinon tu peux toujours le remarquer dans le code directement. :)

- J'ai remplacé tous mes span par des strong parce qu'en fait la définition de mon span c'était tout bêtement de mettre en gras, donc ça faisait plus propre et ça virait des lignes de CSS.
- Du coup j'ai utilisé des span au lieu des h1, vu que ma balise span était dispo, et que les h1 étaient pas vraiment bien utilisés.
- J'ai modifié également le sélecteur que j'avais mis sur mes ex-h1 pour supprimer quelques caractères de CSS.
- J'ai viré le table, que j'ai remplacé par des display inline-block sur mes deux div de mes blocs.
- J'ai aussi fait en dessous le petit exo de placer deux blocs côte-à-côte.
- Virer le tableau et changer le span en strong m'a fait un peu foiré l'enchaînement de ma liste sous le identity, donc j'ai modifié le margin-top, qui pour une raison obscure corrige le tir quand je mets un margin-top de -0px, mais si je vire complètement le margin-top c'est moche. Je sais pas trop pourquoi m'enfin ça fonctionne (mais mon nez me dit que c'est sans doute un signe qu'il y a un truc pas très élégant dans cette partie de mon code)

Concernant ta question sur le display, sur le coup je suis un peu restée con, et puis j'ai googlé un peu et ça m'est revenu, je l'avais vu dans le tuto sur la différence entre span et div, il me semble. Donc la position par défaut de span c'est in-line (pour ça que c'est utilisé pour mettre en valeur un mot dans un paragraphe), et la position par défaut de div c'est block (pour ça que c'est utilisé pour faire des blocs). Le truc intermédiaire du coup je l'avais déjà vu dans des libre-services, c'est inline-block, et c'est ça que j'ai utilisé pour mettre mes deux blocs côte-à-côte.

Enfin il me reste cette question existentielle qui me trotte dans la tête depuis mon premier essai: comment diable foutre mon texte aligné en haut dans mon bloc Id ?

Je te laisse les nouveaux codes:

Code:
    .exo1_fichePV{
      background-color:#ececec;
      width:500px;
    }
    .exo1_img2{
      border:5px solid white;
      margin-top:-50px;
      margin-left:50px;
    }
    .exo1_titre{
      color:#91172A;
      font-size:30px;
      font-weight:bold;
      text-shadow:0px 1px 1px black;
      margin-top:-30px;
    }
    .exo1_citation{
      font-style:italic;
      font-size:12px;
    }
    .exo1_part2{
      padding:20px;
    }
    .exo1_id{
      width:150px;
      font-size:14px;
      display:inline-block;
    }
    .exo1_Bio{
      width:300px;
      height:300px;
      background-color:lightgrey;
      overflow:auto;
      font-size:12px;
      display:inline-block;
    }
    .exo1_part3{
      width:500px;
      background-color:lightgrey;
      font-size:12px;
    }
    .exo1_fichePV span{
      color:#91172A;
      font-size:15px;
      font-weight:bold;
      text-shadow:0px 1px 1px black;
      display:inline-block;
    }

    .exo1_id ul{
      margin-top:-0px;
      margin-left:-30px;
      list-style-type:"\00A0»";
    }

.bloc_test_1{
  background-color:red;
  width:250px;
  height:50px;
  display:inline-block;
}

.bloc_test_2{
  background-color:green;
  width:250px;
  height:50px;
  display:inline-block;
}


Code:
    <div class="exo1_fichePV">
      <div><img src="https://i58.servimg.com/u/f58/18/48/99/76/bruit_10.gif"></div>
      <table><td><img class="exo1_img2" src="https://i58.servimg.com/u/f58/18/48/99/76/100x1010.jpg"></td>
        <td><div class="exo1_titre">Nom Prénom</div><div class="exo1_citation">«citation un peu trop cool pour etre ignoree»</div></td></table><div class=exo1_part2>
      <hr />
      <div class="exo1_id"><span>Identity.</span><ul><li><strong>ft. :</strong>Who<li><strong>Age :</strong>...<li><strong>Lieu de naissance :</strong>...<li><strong>Nationalité :</strong>...<li><strong>Particularité :</strong>...</ul></div><div class="exo1_Bio"><span>Biography.</span>
    Ciliciam vero, quae Cydno amni exultat, Tarsus nobilitat, urbs perspicabilis hanc condidisse Perseus memoratur, Iovis filius et Danaes, vel certe ex Aethiopia profectus Sandan quidam nomine vir opulentus et nobilis et Anazarbus auctoris vocabulum referens, et Mopsuestia vatis illius domicilium Mopsi, quem a conmilitio Argonautarum cum aureo vellere direpto redirent, errore abstractum delatumque ad Africae litus mors repentina consumpsit, et ex eo cespite punico tecti manes eius heroici dolorum varietati medentur plerumque sospitales.

    In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

    Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.
    Ciliciam vero, quae Cydno amni exultat, Tarsus nobilitat, urbs perspicabilis hanc condidisse Perseus memoratur, Iovis filius et Danaes, vel certe ex Aethiopia profectus Sandan quidam nomine vir opulentus et nobilis et Anazarbus auctoris vocabulum referens, et Mopsuestia vatis illius domicilium Mopsi, quem a conmilitio Argonautarum cum aureo vellere direpto redirent, errore abstractum delatumque ad Africae litus mors repentina consumpsit, et ex eo cespite punico tecti manes eius heroici dolorum varietati medentur plerumque sospitales.

    In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

    Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.
        </div></div><div class="exo1_part3"><span>Nobody's perfect. </span>adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/trait de caractère/trait de caractère/trait de caractère/trait de caractère</div>
    </div>

<div class="bloc_test_1"></div><div class="bloc_test_2"></div>

_________________________________________

Mes claviers d'ordinateur sont en qwerty, donc mes posts manquent parfois d'accents. Je m'en excuse si ca gene un peu la comprehension.

Cadeaux:
 
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2698
Mar 14 Mar 2017 - 20:17
Hello ! :DDDD

Pas de blabla inutile, je passe direct à tes questions/retours ! :)

Citation :
- J'ai remplacé tous mes span par des strong parce qu'en fait la définition de mon span c'était tout bêtement de mettre en gras, donc ça faisait plus propre et ça virait des lignes de CSS.
>> alors, c'est bien d'utiliser le truc de strong. SAUF QUE. strong est une balise sémantique en fait. ça définition c'est pas vraiment de mettre en gras. C'est d'ajouter du poids au mot qui est entouré par ces balises. C'est pour dire au navigateur et tout les algorithmes qui tournent >> ça c'est très important, garde ça en mémoire. Et la façon de faire, pour mettre ça en relief c'est de mettre en gras de façon par défaut. Mais tu pourrais enlever le gras, mettre en rouge et ça garderait la même signification pour le navigateur... Tu vois la subtilité ? Cela étant dit, va pour l'utilisation ici, c'est vrai que ça simplifie...


Citation :
- Du coup j'ai utilisé des span au lieu des h1, vu que ma balise span était dispo, et que les h1 étaient pas vraiment bien utilisés.
- J'ai modifié également le sélecteur que j'avais mis sur mes ex-h1 pour supprimer quelques caractères de CSS.
>> je vais voir ça, mais c'est bien, tu optimises dès le début, c'est une très bonne pratique ! :D après, les choix d’optimisation, ça se discute, même entre pro, alors je te donnerai mon avis au mieux, mais je suis pas parole d'évangile ! x)

Citation :
- J'ai viré le table, que j'ai remplacé par des display inline-block sur mes deux div de mes blocs.
- J'ai aussi fait en dessous le petit exo de placer deux blocs côte-à-côte.
>> bien excellent ! :D Je vais voir ça !
C'est bien, même très bien ! L'exo en plus, et l'utilisation sur la bio et l'identité. Mais il te reste une table à virer ! :) la première qui contient les titres ! :D

Citation :
- Virer le tableau et changer le span en strong m'a fait un peu foiré l'enchaînement de ma liste sous le identity, donc j'ai modifié le margin-top, qui pour une raison obscure corrige le tir quand je mets un margin-top de -0px, mais si je vire complètement le margin-top c'est moche. Je sais pas trop pourquoi m'enfin ça fonctionne (mais mon nez me dit que c'est sans doute un signe qu'il y a un truc pas très élégant dans cette partie de mon code)
>> oula, un margin négatif de 0 ? :mh: étrange, je vais voir ça !
Haaaan, j'ai compris ! C'est quand fait, les ul et li ont par défaut une mise en page aussi, qui est un margin et un padding. En fait, les balises HTML ont des styles par défaut, rien de bien sophistiqué, mais quand même. Par exemple, le titre H1 est écrit en très gros et gras. Mais pas que, y'a également une légère marge appliqué... Cette marge est différente d'un navigateur à l'autre. La balise blockquote va faire des marges à gauche et droite... La balise li a une puce et une décalage vers la droite....

Ce qu'il se passe c'est que les pro, on fait un reset en début de code sur plusieurs choses. Mais le rest simple consiste à écrire :
Code:
*{
margin:0;
padding:0;
}
*:before, *:after{
box-sizing:border-box}
d'ailleurs, puisque tu as lu le pavé de Nirvage sur la dernière version de FA qui vient de sortir, peut être que ça te parle ! :D
L'étoile permet de dire que le code contenu entre les accolades doit être appliqué à toutes les balises. Et ce code c'est un margin et padding qui revient à zéro. C'est essentiel, puisque, comme dit précédemment, les marges provoquées ne sont pas les même d'un navigateur à l'autre, d'où les problèmes d'incompatibilité de code. Alors, on remet à zéro, pour redéfinir les marges. Puis on définit que la largueur / hauteur de tes blocs sont les bordures. Tu as du remarqué, quand tu fais un block de 200px de large, et que tu as un padding de 20px, dans le box sizing, tu te retrouves avec un block de 240px de large ! et y'a soucis de mise en page sauf si tu calcules... Le box sizing permet de s'affranchir de ça ! :)

breeef, qu'est ce que je disais avant ? Pardon pour le pavé... x)
ha oui, donc, le margin remis à zéro est bien nécessaire ici.
mais écrit :
margin:0;
c'est plus propre. Quand la valeur est zéro, pas la peine d'écrire px au fait ! :)

Citation :
Concernant ta question sur le display, sur le coup je suis un peu restée con, et puis j'ai googlé un peu et ça m'est revenu, je l'avais vu dans le tuto sur la différence entre span et div, il me semble. Donc la position par défaut de span c'est in-line (pour ça que c'est utilisé pour mettre en valeur un mot dans un paragraphe), et la position par défaut de div c'est block (pour ça que c'est utilisé pour faire des blocs). Le truc intermédiaire du coup je l'avais déjà vu dans des libre-services, c'est inline-block, et c'est ça que j'ai utilisé pour mettre mes deux blocs côte-à-côte.
>> excellente réponse ! :D ça me semble acquis comme notion ! :D

Citation :
Enfin il me reste cette question existentielle qui me trotte dans la tête depuis mon premier essai: comment diable foutre mon texte aligné en haut dans mon bloc Id ?
une notion qui vient avec le display:inline-block;
le vertical-align, qui peut prendre comme valeur : top, bottom et middle. ça te permet baaah de faire un alignement vertical quoi x) Un petit top va régler tout tes soucis ! :D


Je te laisse voir les derniers points et je t'ajoute un peu de fun pour la partie suivante qui sera l'affichage des liens du PV ! :)

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

Administratrice
avatar

Fiche Membre
Lots gagnés:
Administratrice
Administratrice
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 04/12/2016
Messages : 1014
Mar 14 Mar 2017 - 21:06
Bon du coup j'ai laissé les strong, parce que je t'avoue que j'avais la flemme de les changer. Mais je pense que je comprends un peu. C'est pas évident, parce qu'au final ce qui est important pour la moteur de recherche n'est pas forcément ce qui est à mettre en valeur sur la page. Ca m'embrouille. ^^

J'ai fait les modifs, normalement c'est tout bon maintenant !

Code:
    *{
    margin:0;
    padding:0;
    }
    *:before, *:after{
    box-sizing:border-box}

    .exo1_fichePV{
      background-color:#ececec;
      width:500px;
    }
    .exo1_img2{
      border:5px solid white;
      margin-top:-60px;
      margin-left:40px;
      display:inline-block;
    }
    .exo1_part1{
      display:inline-block;
    }

    .exo1_titre{
      color:#91172A;
      font-size:30px;
      font-weight:bold;
      text-shadow:0px 1px 1px black;
    }
    .exo1_citation{
      font-style:italic;
      font-size:12px;
    }
    .exo1_part2{
      padding:20px;
    }
    .exo1_id{
      width:150px;
      font-size:14px;
      display:inline-block;
      vertical-align:top;
      margin-top:20px;
    }
    .exo1_Bio{
      width:300px;
      height:300px;
      background-color:lightgrey;
      overflow:auto;
      font-size:12px;
      display:inline-block;
      margin-top:20px;
    }
    .exo1_part3{
      width:500px;
      background-color:lightgrey;
      font-size:12px;
    }
    .exo1_fichePV span{
      color:#91172A;
      font-size:15px;
      font-weight:bold;
      text-shadow:0px 1px 1px black;
      display:inline-block;
    }

    .exo1_id ul{
      list-style-type:"\00A0»";
    }


Code:
    <div class="exo1_fichePV">
      <div><img src="https://i58.servimg.com/u/f58/18/48/99/76/bruit_10.gif"></div>
      <img class="exo1_img2" src="https://i58.servimg.com/u/f58/18/48/99/76/100x1010.jpg">
        <div class="exo1_part1"><div class="exo1_titre">Nom Prénom</div><div class="exo1_citation">«citation un peu trop cool pour etre ignoree»</div></div><div class=exo1_part2>
      <hr />
      <div class="exo1_id"><span>Identity.</span><ul><li><strong>ft. :</strong>Who<li><strong>Age :</strong>...<li><strong>Lieu de naissance :</strong>...<li><strong>Nationalité :</strong>...<li><strong>Particularité :</strong>...</ul></div><div class="exo1_Bio"><span>Biography.</span>
    Ciliciam vero, quae Cydno amni exultat, Tarsus nobilitat, urbs perspicabilis hanc condidisse Perseus memoratur, Iovis filius et Danaes, vel certe ex Aethiopia profectus Sandan quidam nomine vir opulentus et nobilis et Anazarbus auctoris vocabulum referens, et Mopsuestia vatis illius domicilium Mopsi, quem a conmilitio Argonautarum cum aureo vellere direpto redirent, errore abstractum delatumque ad Africae litus mors repentina consumpsit, et ex eo cespite punico tecti manes eius heroici dolorum varietati medentur plerumque sospitales.

    In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

    Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.
    Ciliciam vero, quae Cydno amni exultat, Tarsus nobilitat, urbs perspicabilis hanc condidisse Perseus memoratur, Iovis filius et Danaes, vel certe ex Aethiopia profectus Sandan quidam nomine vir opulentus et nobilis et Anazarbus auctoris vocabulum referens, et Mopsuestia vatis illius domicilium Mopsi, quem a conmilitio Argonautarum cum aureo vellere direpto redirent, errore abstractum delatumque ad Africae litus mors repentina consumpsit, et ex eo cespite punico tecti manes eius heroici dolorum varietati medentur plerumque sospitales.

    In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

    Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.
        </div></div><div class="exo1_part3"><span>Nobody's perfect. </span>adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/trait de caractère/trait de caractère/trait de caractère/trait de caractère</div>
    </div>

_________________________________________

Mes claviers d'ordinateur sont en qwerty, donc mes posts manquent parfois d'accents. Je m'en excuse si ca gene un peu la comprehension.

Cadeaux:
 
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2698
Mer 15 Mar 2017 - 14:20
Coucou ! :)

Citation :
C'est pas évident, parce qu'au final ce qui est important pour la moteur de recherche n'est pas forcément ce qui est à mettre en valeur sur la page. Ca m'embrouille. ^^
>> oui je suis d'accord, mais c'est bien que tu y réfléchisses dès le début, comme ça, à force, ça va te venir en tête, et ça va t'aider pour la suite ! :D

C'est très bien ! :D
Juste, personnellement, je n'aurai pas utilisé de balise hr pour faire le trait !
Mais plutôt un border-top à ton block .exo1_part2
Ce block en effet entour la partie deux et a un padding de 20px. Au lieu de ça, j'aurai fait un margin de 20 (comme ça, marge à l'extérieur), non inclu dans le block et la bordure fait la taille qu'on veut et c'est plus simple à personnaliser ! :)

Par contre ta ligne de CSS :
Code:
list-style-type:"\00A0»";
chez moi ça ne marche pas ... ça fonctionne chez toi ?
Moi pour remplacer un truc, il faut d'abord le mettre en display none, et ajouter un before au li ...
Si ça fonctionne pas, je t'expliquerais en détail la technique ! :D

Haaaa et aussi, j'ai vu que tu avais écris :
Code:
  *{
    margin:0;
    padding:0;
    }
    *:before, *:after{
    box-sizing:border-box}
c'est génial, mais c'est embêtant ... car sur les forums, en général, les gens utilisent les marges et padding par défaut des navigateurs, et du coup, ajouter ça dans ton CSS, c'est risquer de faire péter tout les autres codes / LS des forums ...

On va mettre notre petite fiche en LS à la fin, alors si tu veux bien mettre plutôt le margin 0 au ul, ça sera mieux je pense ! :D


sinon, on va ajouter des lignes à la fin de notre fiche pour les liens ! :D
du coup, je t'ajoute un peu de challenge ! c'est pas la même organisation un sur deux ! ;)
et puis après, on va ajouter un petit survol sur l'image (tout à fait inutile) mais pour éclaircir (on ajoutera un fond noir en transparence) et pour la faire tourner, parce que c'est cool d'apprendre qql effets xD

donc voici :

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

Administratrice
avatar

Fiche Membre
Lots gagnés:
Administratrice
Administratrice
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 04/12/2016
Messages : 1014
Mer 15 Mar 2017 - 23:15
Alors du coup j'ai fait comme tu as dit et j'ai enlevé le br. J'ai aussi viré les trucs du début et remis les correcteurs de position sur le ul du coup. ^^

Par contre chez moi ça marche les puces. Je fais mon code sur CodePen. Peut-être que selon le truc sur lequel on le fait ça marche ou non ? Enfin en tous cas je veux bien que tu m'expliques un peu plus l'autre méthode. Si ça ne marche pas partout ma méthode, il vaut mieux en changer.

J'ai ajouté les liens à la fin de la fiche. Par contre je ne sais pas si j'ai fait comme il fallait car j'ai géré l'alternance dans le html plutôt que dans le CSS, j'aurai peut-être dû faire autrement ? Le border-radius, je l'ai retrouvé dans le LS de chatbox de Ches que j'ai installé sur mon forum. :) Par contre l'effet de hover et de truc qui tourne, j'avoue que je ne sais pas faire.

Code:
   .exo1_fichePV{
      background-color:#ececec;
      width:500px;
    }
    .exo1_img2{
      border:5px solid white;
      margin-top:-60px;
      margin-left:40px;
      display:inline-block;
    }
    .exo1_part1{
      display:inline-block;
    }

    .exo1_titre{
      color:#91172A;
      font-size:30px;
      font-weight:bold;
      text-shadow:0px 1px 1px black;
    }
    .exo1_citation{
      font-style:italic;
      font-size:12px;
    }
    .exo1_part2{
      margin:20px;
      border-top:1px solid black;
    }
    .exo1_id{
      width:150px;
      font-size:14px;
      display:inline-block;
      vertical-align:top;
      margin-top:20px;
    }
    .exo1_Bio{
      width:300px;
      height:300px;
      background-color:lightgrey;
      overflow:auto;
      font-size:12px;
      display:inline-block;
      margin-top:20px;
    }
    .exo1_part3{
      width:500px;
      background-color:lightgrey;
      font-size:12px;
    }
    .exo1_fichePV span{
      color:#91172A;
      font-size:15px;
      font-weight:bold;
      text-shadow:0px 1px 1px black;
      display:inline-block;
    }

    .exo1_id ul{
      margin:0;
      padding:0;
      list-style-type:"\00A0»";
    }
.exo1_part4{
  margin:20px;
}

.exo1_liens_img{
  display:inline-block;
  border-radius:50%;
}

.exo1_liens_txt{
  display:inline-block;
  margin-left:5px;
  margin-right:5px;
  vertical-align:top;
  overflow:auto;
  width:350px;
  height:80px;
  text-align:justify;
  font-size:12px;
}
.exo1_liens_txt span{
  display:block;
}

Code:
   <div class="exo1_fichePV">
      <div><img src="https://i58.servimg.com/u/f58/18/48/99/76/bruit_10.gif"></div>
      <img class="exo1_img2" src="https://i58.servimg.com/u/f58/18/48/99/76/100x1010.jpg">
        <div class="exo1_part1"><div class="exo1_titre">Nom Prénom</div><div class="exo1_citation">«citation un peu trop cool pour etre ignoree»</div></div><div class=exo1_part2>
      <div class="exo1_id"><span>Identity.</span><ul><li><strong>ft. :</strong>Who<li><strong>Age :</strong>...<li><strong>Lieu de naissance :</strong>...<li><strong>Nationalité :</strong>...<li><strong>Particularité :</strong>...</ul></div><div class="exo1_Bio"><span>Biography.</span>
    Ciliciam vero, quae Cydno amni exultat, Tarsus nobilitat, urbs perspicabilis hanc condidisse Perseus memoratur, Iovis filius et Danaes, vel certe ex Aethiopia profectus Sandan quidam nomine vir opulentus et nobilis et Anazarbus auctoris vocabulum referens, et Mopsuestia vatis illius domicilium Mopsi, quem a conmilitio Argonautarum cum aureo vellere direpto redirent, errore abstractum delatumque ad Africae litus mors repentina consumpsit, et ex eo cespite punico tecti manes eius heroici dolorum varietati medentur plerumque sospitales.

    In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

    Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.
    Ciliciam vero, quae Cydno amni exultat, Tarsus nobilitat, urbs perspicabilis hanc condidisse Perseus memoratur, Iovis filius et Danaes, vel certe ex Aethiopia profectus Sandan quidam nomine vir opulentus et nobilis et Anazarbus auctoris vocabulum referens, et Mopsuestia vatis illius domicilium Mopsi, quem a conmilitio Argonautarum cum aureo vellere direpto redirent, errore abstractum delatumque ad Africae litus mors repentina consumpsit, et ex eo cespite punico tecti manes eius heroici dolorum varietati medentur plerumque sospitales.

    In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

    Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.
        </div></div><div class="exo1_part3"><span>Nobody's perfect. </span>adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/adjectif/trait de caractère/trait de caractère/trait de caractère/trait de caractère</div><div class="exo1_part4">
<img class="exo1_liens_img" src="https://i58.servimg.com/u/f58/18/48/99/76/100x1010.jpg"><div class="exo1_liens_txt"><span>Nom,Prenom||type de lien</span>Blah blah de description du lien. Tout plein tout plein. Ca peut meme etre super long. Et meme encore plus long. Et si c'est trop long ca mettra une jolie petite barre de defilement pour faire un peu classe. Enfin normalement ca devrait en mettre une. C'est pas une science exacte. </div><div class="exo1_liens_txt"><span>Nom,Prenom||type de lien</span>Blah blah de description du lien. Tout plein tout plein. Ca peut meme etre super long. Et meme encore plus long. Et si c'est trop long ca mettra une jolie petite barre de defilement pour faire un peu classe. Enfin normalement ca devrait en mettre une. C'est pas une science exacte. Testons sur celui-la pour voir. </div><img class="exo1_liens_img" src="https://i58.servimg.com/u/f58/18/48/99/76/100x1010.jpg"></div></div>

Edit: j'oublie à chaque fois, mais je ne sais pas faire les petits triangles pour les séparations des mots. J'imagine que c'est hyper simple, mais je suis une quiche en symboles et c'est le genre de trucs que j'ai du mal à trouver car je ne sais jamais trop quoi taper dans google. xD

_________________________________________

Mes claviers d'ordinateur sont en qwerty, donc mes posts manquent parfois d'accents. Je m'en excuse si ca gene un peu la comprehension.

Cadeaux:
 
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2698
Jeu 16 Mar 2017 - 20:44
Citation :
Alors du coup j'ai fait comme tu as dit et j'ai enlevé le br. J'ai aussi viré les trucs du début et remis les correcteurs de position sur le ul du coup. ^^
>> parfait !

Citation :
Par contre chez moi ça marche les puces. Je fais mon code sur CodePen. Peut-être que selon le truc sur lequel on le fait ça marche ou non ? Enfin en tous cas je veux bien que tu m'expliques un peu plus l'autre méthode. Si ça ne marche pas partout ma méthode, il vaut mieux en changer.
>> Oo, je suis sur codepen aussi quand j'ouvre tes exos ! Oo Et moi, ça passe pas ... :mh: tu as quoi comme navigateur ? :)

sinan, "ma technique" c'est ce code :
Code:
   .exo1_id ul{
      margin:0;
      padding:0;
      list-style: none;
    }
.exo1_id ul li:before{
  content:"» ";
}

Très simplement, tu enlèves la puce par défaut via le list-style:none;.
Et ensuite, (magnifique transition pour apprendre les pseudo éléments !!!), tu ajoutes un élément via le :before qui est écrit après le nom de la class.

De la même façon qu'il existe un :after, tu peux ajouter ce qui est contenu bah, dans le content avant ou après la balise HTML qui porte la class (entre les double quote! c'est important), les espaces étant compté comme des éléments à ajouter ! :)

Les pseudo-éléments permettent de décrire un état spécial d'un élément. Il en existe beaucoup ! Liste non exhausitive, mais de ceux que j'utilise le plus :
  • :first-line -> cibler que la première ligne d'un élément
  • :first-child -> cibler que le premier enfant d'un élément
  • :last-child -> cibler que le dernier enfant d'un élément
  • :hover -> pour définir un état au survol
  • :after et :before -> pour ajouter des éléments avant l'élément ciblé
  • :nth-child() -> pour cibler un élément n°x d'une liste par exemple ou bien, avec un odd/even entre les parenthèses, cibler les éléments impair/pair. L'ajout d'une précision entre les () est nécessaire


Du coup, voilà qui te donne une piste pour définir les modifications au survol ! :D
Mais si tu veux un peu plus, petit tuto, ici est dispo ! :)

Le deuxième truc, je te laisse découvrir le tuto suivant : ça va t'expliquer les transformations sur les éléments ! :)
transformation, et celui ci pour avoir une jolie transition d'un état à un autre c'est quand même mieux ! transitions
Et je te laisse t'amuser avec ça, mais n'hésites pas si tu as des questions !


Citation :
J'ai ajouté les liens à la fin de la fiche. Par contre je ne sais pas si j'ai fait comme il fallait car j'ai géré l'alternance dans le html plutôt que dans le CSS, j'aurai peut-être dû faire autrement ? Le border-radius, je l'ai retrouvé dans le LS de chatbox de Ches que j'ai installé sur mon forum. :) Par contre l'effet de hover et de truc qui tourne, j'avoue que je ne sais pas faire.
à un niveau amateur, faire le choix de gérer l'affichage dans le HTML était le meilleur choix à faire ! :D c'est ce qui est le plus optimisé ! :)
A un niveau pro, les codeurs préfèrent tout faire via le CSS, mais c'est parce qu'on se sert plus de truc nth-child(odd) / even justement, et du coup, on va dire un sur deux, vous vous mettez ainsi etc... Car on affiche une base de données, et du coup, on n'a qu'un seul block HTML dans le code, qui va se répéter autant de fois qu'on va avoir besoin, mais on verra ça avec les templates ! pour le moment, laisse comme ça, c'est très bien ! :DDDD

Tu apprends très vite ! :D

Petite optimisation ? :) ceci :
Code:
 margin-left:5px;
  margin-right:5px;
peut s'écrire :
Code:
 margin:0 5px;
écrit ainsi, ça sous-entend qu'en haut et pas, y'a pas de marge, mais à gauche droite c'est 5px.
il y aussi la version à 4 valeurs pour l'ordre aiguille d'une montre >> haut-droite-bas-gauche.


Et pour finir :
Citation :
j'oublie à chaque fois, mais je ne sais pas faire les petits triangles pour les séparations des mots. J'imagine que c'est hyper simple, mais je suis une quiche en symboles et c'est le genre de trucs que j'ai du mal à trouver car je ne sais jamais trop quoi taper dans google. xD
Pas de soucis, perso, j'utilise : http://www.jchr.be/html/caracteres.htm, j'utilise directement le code ASCII dec, que je mets dans le HTML, et bim, tu as le petits caractères sépciales que tu veux ! Mais la lsite est longue ... ne t'y perds pas inutilement, et prend le petits caractères que tu trouves sympa ^^ Après, puisque c'est à but de FA et des réponses rapide de l'interface, tu peux copier/coller directement le caractère dessiné! :)

voilà, je crois que j'ai rien oublié ! :D

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

Administratrice
avatar

Fiche Membre
Lots gagnés:
Administratrice
Administratrice
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 04/12/2016
Messages : 1014
Sam 18 Mar 2017 - 17:41
Alors du coup j'ai fais comme toi pour les puces. Mais c'est quand même très très chelou cette histoire ^^ Je suis sur Mozilla.

J'ai optimisé du coup pour les margin et padding, avec la petite astuce que tu m'as donnée, et j'ai supprimé un width:500px qui ne servait à rien vu que mon bloc était déjà contenu dans un bloc de 500px. C'était un poil redondant. Je m'en suis aperçue en cherchant les margin/padding que je pouvais optimiser. ^^

Je pense avoir à peu près cerné les transformations et transitions. Je me suis exercée sur deux endroits dans mon code. Le Nom Prénom que j'ai fait grossir au passage de la souris, et l'image des liens qui tourne comme tu l'avais demandé. J'ai fait une transition différente à l'aller et au retour pour la rotation. Je pense que j'ai compris comment ça marche, mais j'ai encore un peu de mal à vraiment me souvenir de quoi va où, si c'est des : ou des parenthèses etc. Mais ça viendra au fur et à mesure que je m'en servirai, et en attendant les deux tutos que tu m'as passés me serviront de pense-bête.

Par contre il me reste ça que tu m'avais demandé de faire sur lequel je sèche un peu:
Citation :
et puis après, on va ajouter un petit survol sur l'image (tout à fait inutile) mais pour éclaircir (on ajoutera un fond noir en transparence)

Si j'ai bien compris, il faut que j'ajoute un fond à mon bloc, et que je mette l'image en transparence (par exemple 50%), puis que je modifie cette valeur de transparence en tant que transformation de hover ? J'ai réussi à gérer la transparence de mon image, mais je n'arrive pas à mettre un fond noir. C'est sans doute stupide, mais je n'ai pas réussi. Du coup là ça fait un peu "palot"

Je te mets ici le lien de mon codepen. Je pense que tu devrais pouvoir l'ouvrir. Sinon dis-le moi et je te copierai les codes.

http://codepen.io/RoxaneEmerson/pen/evRbKe



_________________________________________

Mes claviers d'ordinateur sont en qwerty, donc mes posts manquent parfois d'accents. Je m'en excuse si ca gene un peu la comprehension.

Cadeaux:
 
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2698
Sam 18 Mar 2017 - 20:01
hey ! :D

Citation :
Alors du coup j'ai fais comme toi pour les puces. Mais c'est quand même très très chelou cette histoire ^^ Je suis sur Mozilla.
nan, je comprend mieux ! je suis sur chrome, et ça se peut que sur un navigateur ça fonctionne et pas sur un autre ! ^^ vérifier le rendu sur différents navigateurs ça fait partie d'un des trucs qu'on doit faire ...

Mais avec le code direct, là, c'est bon t'es tranquille !

Citation :
J'ai optimisé du coup pour les margin et padding, avec la petite astuce que tu m'as donnée, et j'ai supprimé un width:500px qui ne servait à rien vu que mon bloc était déjà contenu dans un bloc de 500px. C'était un poil redondant. Je m'en suis aperçue en cherchant les margin/padding que je pouvais optimiser. ^^
Très bien ! tu fais bien ! :D C'est un très bon réflexe !!!

Citation :
Je pense avoir à peu près cerné les transformations et transitions. Je me suis exercée sur deux endroits dans mon code. Le Nom Prénom que j'ai fait grossir au passage de la souris, et l'image des liens qui tourne comme tu l'avais demandé. J'ai fait une transition différente à l'aller et au retour pour la rotation. Je pense que j'ai compris comment ça marche, mais j'ai encore un peu de mal à vraiment me souvenir de quoi va où, si c'est des : ou des parenthèses etc. Mais ça viendra au fur et à mesure que je m'en servirai, et en attendant les deux tutos que tu m'as passés me serviront de pense-bête.
Contente de lire que tu as bien compris le concept ! :D T'inquiètes, même moi, par moment je dois réfléchir et demander à google les vrai code quand j'ai des trou de mémoire ^^ Car comme je disais, ce genre de transition ne sont pas très utile ... Enfin, quoi que, sur certains design, ça pète et tout, mais en général, on limite les effets comme ça, car ce n'est pas très friendly d'avoir trop d'effet ! ^^

Citation :
Si j'ai bien compris, il faut que j'ajoute un fond à mon bloc, et que je mette l'image en transparence (par exemple 50%), puis que je modifie cette valeur de transparence en tant que transformation de hover ? J'ai réussi à gérer la transparence de mon image, mais je n'arrive pas à mettre un fond noir. C'est sans doute stupide, mais je n'ai pas réussi. Du coup là ça fait un peu "palot"
oui ça fait un peu pâle du coup, mais tu as bien compris le truc de l'opacité, en fait, le truc c'est qu'une image, tu dois la mettre dans une div qui a un fond de couleur, là pour le coup noir. Comme ça, tu auras une transparence avec du noir ! :D

Si si, j'avais accès à ton codepen, c'est parfait ! :D
Je te prépare un petit top sur les bonnes pratiques d'UX, et je te donnes ça à mon prochain poste pour finir le LS ! :)


_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

Administratrice
avatar

Fiche Membre
Lots gagnés:
Administratrice
Administratrice
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 04/12/2016
Messages : 1014
Sam 18 Mar 2017 - 21:57
Rha j'aurai du faire confiance à mon instinct, j'ai pensé à faire une div autour de mon image, mais je trouvais ça "lourd" au niveau du html, du coup je me suis dit qu'il devait y avoir une autre solution plus propre avec une propriété de img.

Bon ben du coup c'est fait j'ai rajouté le petit fond noir. :)

Et j'ai remplacé tous les "Exo1" en "Rox1" dans les noms de classe, histoire que ça fasse un chouilla plus propre.

J'attends la suite du coup.

C'est trop cool n'empêche ! Je pensais vraiment pas être capable de faire ça!

_________________________________________

Mes claviers d'ordinateur sont en qwerty, donc mes posts manquent parfois d'accents. Je m'en excuse si ca gene un peu la comprehension.

Cadeaux:
 
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2698
Ven 31 Mar 2017 - 12:16
Hey ! :D
Alors, l'UX maintenant ^^

En fait, c'est juste pour rendre les créations le plus lisible que possible ! :D
Là par exemple, tu vois que le titre et la citation mériteraient d'être décaler un peu plus de l'image. Aussi, au hover du texte, il "monte" sur l'image .. .Suivant la couleur de l'image qui va être placé par l'utilisateur, on risque de ne plus réussir à lire la première lettre...
Ensuite, on pourrait aérer un peu le bloc biographie, le texte est collé contre les bords, il faudrait ajouter un petit padding, et un line height (pour espacement entre les lignes) pour que ce soit plus agréable à la lecture. Normalement, la règle c'est 1.5 fois la taille de la police, mais ici, ça serait bcp trop gros, alors juste quelques px de plus que la taille ça suffira ^^

Pareil pour le nobody perfect, ça mériterait d'être aérer avec un padding.

On pourrait aussi ajouter des marges entre les liens, histoire que ça fasse pas trop tasser... En général, il faut aérer les créations, même si sur FA, on rencontre beaucoup de design 'compact' ! ^^

Après du coup, tu pourras poster ça en LS ! :D

ha tu voulais mon code aussi :
HTML
Code:
  <div class="boxPrefed"><img class="imgpredef" src="https://i58.servimg.com/u/f58/18/48/99/76/bruit_10.gif" /><div class="clearfix entete"><div class="icone"><img src="https://i58.servimg.com/u/f58/18/48/99/76/100x1010.jpg"></div><div class="titrePredef">Nom Prénom</div><div class="sstitrePredef">« citation un peu trop cool pour être ignorée ouai ouai »</div></div>
 
  <div class="partie2 clearfix"><div class="infopredef"><span class="reliefpredef">Identity.</span><br/><span>» ft. :</span> who <br/><span>» Âge</span> : ...<br/><span>» Lieu de naissance</span> : ...<br/><span>» Nationalité</span> : ... <br/><span>» Particularité</span> : ...</div><div class="histoirepredef"><span class="reliefpredef">Biographie.</span> Saepe adulescentiam posset contentionem tamen enim inimicitias exstitisse essent contentione nullam uxoriae interdum gloriae in labefactari labefactari inimicitias in uxoriae adipisci posset Quod labefactari quod amicitia labefactari tamen essent quo interdum longius Quod adipisci idem vel idem in certamen labefactari ex inimicitias amicitiis enim vel honoris ex vel in plerisque. Saepe adulescentiam posset contentionem tamen enim inimicitias exstitisse essent contentione nullam uxoriae interdum gloriae in labefactari labefactari inimicitias in uxoriae adipisci posset Quod labefactari quod amicitia labefactari tamen essent quo interdum longius Quod adipisci idem vel idem in certamen labefactari ex inimicitias amicitiis enim vel honoris ex vel in plerisque. Saepe adulescentiam posset contentionem tamen enim inimicitias exstitisse essent contentione nullam uxoriae interdum gloriae in labefactari labefactari inimicitias in uxoriae adipisci posset Quod labefactari quod amicitia labefactari tamen essent quo interdum longius Quod adipisci idem vel idem in certamen labefactari ex inimicitias amicitiis enim vel honoris ex vel in plerisque.</div></div>
   
 
 
<div class="adjectifpredef"><span class="reliefpredef">Nobody's perfect.</span> adjectif <b>∆</b> adjectif <b>∆</b> adjectif <b>∆</b> adjectif <b>∆</b> adjectif <b>∆</b> adjectif <b>∆</b> adjectif <b>∆</b> adjectif <b>∆</b> trait de caractère <b>∆</b> trait de caractère <b>∆</b> trait de caractère <b>∆</b> trait de caractère </div>
    <div class="partlien">
      <div class="link clearfix">
      <div class="imgpart"><img src="https://i58.servimg.com/u/f58/18/48/99/76/100x1010.jpg"></div><div class="linkint"><span class="reliefpredef">Nom, prénom || fight, baby. Fight.</span></div><div class="text">Saepe adulescentiam posset contentionem tamen enim inimicitias exstitisse essent contentione nullam uxoriae interdum gloriae in labefactari labefactari inimicitias in uxoriae adipisci posset Quod labefactari quod amicitia </div></div>
    </div>
</div>

CSS :
Code:
      .clearfix:before, .clearfix:after{
  display: table;
  content : '';
}

.clearfix:after{
  clear:both;
}

.boxPrefed{
  width:450px;
  margin: 0 auto;
  background-color: #ececec;
    }

.imgpredef{
  display:block;
  width:100%;
}

.entete{
  width:90%;
  margin: 0 auto 20px;
  padding-bottom:10px;
  border-bottom:1px solid grey;
}
.icone{
  width:100px;
  height:100px;
  background: #fff;
  padding:5px;
  float: left;
  margin:-40px 10px 0 0;
  position: relative;
  z-index:9999;
}

.icone img{
  width:100px;
  height:100px;
 
}
   
.titrePredef{
  text-shadow:1px 1px 1px black;
  font-size: 28px;
  color:#91172A;
}
 
.sstitrePredef{
  font-family:time new roman;
  text-transform:lowercase;
  font-size:11px;
  font-style: italic;
}

.partie2{
  width:405px;
  margin: 0 auto 20px;
}

.histoirepredef{
  width:250px;
  height:215px;
  display: inline-block;
  overflow:auto;
  padding:5px;
  lign-height:9px;
  font-size:11px;
  background-color:rgba(250,250,250,0.4);
  color:black;
 
}

.reliefpredef{
  font-size: 15px;
  color:#91172A;
  font-weight:bold;
}

.infopredef{
  width:130px;
  margin-rigth:20px;
  padding:5px;
  display: inline-block;
  vertical-align: top;
  height:215px;
  font-size:12px;
  text-align:justify;
  font-family:Times New Roman;
  overflow:auto;
}
   
.infopredef span{
  font-size: 12px;
  font-weight:bold;
}

.adjectifpredef{
  padding:10px;
  font-size:13px;
 background-color:rgba(250,250,250,0.3);
  color:black;
}

.partlien{
padding:20px;
}

.link{
  margin-top:5px;
}

.imgpart{
  float:left;
  width: 100px;
  background:#000;
  vertical-align:top;
  border-radius:50px;
}

.imgpart img{
  display: block;
  opacity:0.7;
  transition:0.8s;
  border-radius:50px;
}

.imgpart img:hover{
  opacity:1;
  transition:0.8s;
  transform:rotate(360deg);
}

.linkint{
  float:left;
  width: 290px;
  height:15px;
  overflow:hidden;
  margin-left:10px;
}
.text{
  float:left;
  width: 290px;
  height:70px;
  margin-left:10px;
  font-size:12px;
  text-align:justify;
  font-family:Times New Roman;
  overflow:auto;

}

Désolé, c'est pas indenté, ça a été copié sur fichier texte en fait pour l’enregistrer :s

Du coup, tu veux que je te prépare un autre code à faire ? Ou alors, tu as une idée déjà d'un truc que tu veux faire ? :)

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

Administratrice
avatar

Fiche Membre
Lots gagnés:
Administratrice
Administratrice
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 04/12/2016
Messages : 1014
Sam 1 Avr 2017 - 16:02
Alors j'ai fait quelques petites modifications pour prendre en compte ce que tu as dis au niveau des marges. J'ai été obligée de mettre des balises p pour obtenir des paragraphes qui se différencient bien dans la Biographie, sinon tout était collé. Y a-t-il un moyen de faire en sorte qu'un passage de ligne dans un texte soit directement interprété comme un paragraphe en ajoutant quelque chose au CSS ? Car les gens s'embêtent rarement à ajouter des balises autour de chaque paragraphe lorsqu'ils tapent des choses sur un forum.

J'ai ajouté le crédit aussi à la fin de la fiche, vu qu'il faudra que je le mette pour proposer le code en LS.

Et je pense que c'est bon maintenant. Je te laisse juger par toi-même: http://codepen.io/RoxaneEmerson/pen/evRbKe

Pour la suite de mon apprentissage, j'aimerai bien faire des petites choses qui me seront utiles pour le forum sur lequel je suis cofonda, qui est en construction. Il y a plusieurs choses qu'on pourrait faire dans ce cadre:
1- Vérifier la PA que j'ai adapté d'une PA en LS par Batty, et l'optimiser si nécessaire.
2- Faire un QEEL assorti à cette PA.
3- Faire des cadres utilisables pour les annonces, règlements, contextes...
4- Faire une fiche de pub pour le forum.

Le thème n'a pas encore été livré, c'est Skull qui bosse dessus, pour l'instant on a que le header, donc je ne sais pas si on peut vraiment faire grand-chose. Peut-être commencer par bosser sur la PA, et peut-être le QEEL du coup ?

La PA est là si tu veux regarder:

http://codepen.io/RoxaneEmerson/pen/JWvbQy

Aussi j'avais une question. J'ai vu dans ton code un z-index:9999;
Je me demandais à quoi ça correspondait, et ce que c'était ? Je l'ai déjà rencontré, dans la PA je crois, et je n'ai pas compris ce que c'était.

_________________________________________

Mes claviers d'ordinateur sont en qwerty, donc mes posts manquent parfois d'accents. Je m'en excuse si ca gene un peu la comprehension.

Cadeaux:
 
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2698
Mar 16 Mai 2017 - 20:32
Désolé pour cet immeeeeense délai ... Je vais essayer d'être plus régulière ! ;)

Citation :
Y a-t-il un moyen de faire en sorte qu'un passage de ligne dans un texte soit directement interprété comme un paragraphe en ajoutant quelque chose au CSS ? Car les gens s'embêtent rarement à ajouter des balises autour de chaque paragraphe lorsqu'ils tapent des choses sur un forum.
>> alors c'est vrai qu'ils s'embêtent pas, c'est parce que cette interface qu'on utilise qui gère du BBCode pour générer du HTML (WYSIWYG de son nom savant), bah elle interprète les retours à la ligne avec la touche entrée.
D'où personne ne s'embête à faire des paragraphe. Sinan, on a la balise br (balise orpheline), qui gère les retours à la ligne ! :)


Pour le code, je trouve ça un peu dommage que le biographie soit décalé vers le bas par rapport à Indentity (simplement car l'un a un padding et pas l'autre) peut être rectifier ça pour mettre les 2 pareils et sur la même hauteur, mais sinan, c'est parfait ! :D Te reste plus qu'à partager ça !

Par contre, fait attention, comme je te disais, l'interpréteur de code ici accepte les retours à la ligne, alors mis tel que, les utilisateurs vont se retrouver avec des espaces non désirés !! pense à bien coller toutes les balises à la suite des unes des autres sans retour à la ligne ! :)

Citation :
Aussi j'avais une question. J'ai vu dans ton code un z-index:9999;
Je me demandais à quoi ça correspondait, et ce que c'était ? Je l'ai déjà rencontré, dans la PA je crois, et je n'ai pas compris ce que c'était.
>> le z-index en fait va de paire avec une position relative. Et c'est pour faire passer un élément au premier plan, ou au contraire un autre au deuxième plan. Plus le chiffre est grand plus il va être devant le reste ! ça sert pour des infobulles par exemple pour faire passer les elements devant d'autres au survol ! :)

Si tu me confirmes que tu veux tjrs partir sur l'optimisation de cette PA je m'y penche dès que tu me donnes ta réponse, sinon, dis moi ce qu'on peut faire pour te faire plaisir ! :)

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

Administratrice
avatar

Fiche Membre
Lots gagnés:
Administratrice
Administratrice
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 04/12/2016
Messages : 1014
Mar 16 Mai 2017 - 20:45
Cool merci d'être passée ! Et pas de soucis pour le retard, ne t'inquiètes pas.

J'ai ajouté un padding-top pour qu'ils soient à la même hauteur.

Je file partager du coup. Et oui je suis toujours partante pour optimiser la PA !
Et le design a plutôt bien avancé, donc je pense qu'on pourra bosser sur le QEEL ensuite. J'ai même déjà une image, il faut juste que je réfléchisse à une idée de schéma parce que j'avoue que pour l'instant je ne sais pas trop par où partir. Je vais y réfléchir pendant qu'on bosse sur la PA.

Les codes actuels de la PA sont ici: http://codepen.io/RoxaneEmerson/pen/JWvbQy

Et pour la voir en situation c'est par ici: http://charybde-en-scylla.forumactif.com/

_________________________________________

Mes claviers d'ordinateur sont en qwerty, donc mes posts manquent parfois d'accents. Je m'en excuse si ca gene un peu la comprehension.

Cadeaux:
 
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2698
Mar 16 Mai 2017 - 21:10
Alors voici l'analyse ! :)

Dans .battypa_contexte
Code:
-webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
Les préfixes vendeur ne sont plus nécessaire pour le border radius, tous les navigateurs l'implémente de façon native ! :)

Y'a ça aussi :
Code:
.battypa_partenaires span{
    position:absolute;
    display:block;

c'est un peu stupide d'utiliser des span si c'est pour les mettre en display block, autant utiliser des div directement ! :) ça économise bcp de caractères et ne déforme pas la nature des balises ^^

En fait, c'est comme ça pour tout les "titres", du coup, tu pourrais revoir l'utilisation des span, par exemple,c 'est pareil pour partenaire.

.battypa_membrefond y'a pas besoin non plus des préfix pour le border-radius ! :)


Code:
#warped {position: relative; display:block; width:180px; height:180px;}
c'est une balise div ton warped, du coup c'est redondant de la mettre en display block, elle l'est par défaut ! :)

Mais à part c'est très bien ! :DD

Du coup, on va pouvoir rapidement passer au QEEL ! ;)
Tu as déjà regardé comment s'organisent les templates ?


_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

Administratrice
avatar

Fiche Membre
Lots gagnés:
Administratrice
Administratrice
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 04/12/2016
Messages : 1014
Sam 20 Mai 2017 - 13:44
Coucou c'est moi !

Alors j'ai fait les modifs pour enlever les machins devant le border-radius. Par contre je ne suis pas sure d'à quoi ça sert, ni pourquoi on les enlève devant border-radius mais pas devant les autres endroits où il y a ça.

J'ai changé les span en div. C'est vrai que c'était bête d'utiliser ça. C'était comme ça sur la PA de base en fait. Et du coup je n'ai pas pensé à le changer, ni même à le remettre en question d'ailleurs.

Et j'ai enlevé le display block redondant aussi. Merci !

Je me suis amusée à changer le "membre du mois" en "aventurier du mois", pour coller un peu plus à notre contexte. J'ai un peu galéré à positionner correctement toutes les lettres, mais le résultat est pas trop mal ! Et ça m'a permis de m'entraîner à gérer des rotations et positions.

Je n'ai jamais touché moi-même à des templates encore. Lorsque je prends un LS de template ou que j'installe une commande de template, je n'ai en général que le CSS à modifier. Mais le HTML du template je n'y ai absolument jamais touché. Je me souviens que j'avais lu un tuto, mais vu que je n'avais pas mis en pratique, je ne me souviens pas vraiment de ce qu'il contenait.

Pour le QEEL, j'ai fait une maquette, sachant que ce n'est pas très bien aligné, et que je n'ai pas mis du tout les polices que je voudrai (celles qui sont utilisés aux autres endroits du design) car je ne sais pas comment les installer sur mon logiciel.



J'aimerai que lorsqu'on passe avec la souris sur "En ce moment" il y ait les statistiques des gens en ligne qui s'affichent à la place de l'image (avec l'image qui disparaît progressivement pour laisser la place), et quand on clique sur "Dernièrement", les statistiques des dernières 24h.

_________________________________________

Mes claviers d'ordinateur sont en qwerty, donc mes posts manquent parfois d'accents. Je m'en excuse si ca gene un peu la comprehension.

Cadeaux:
 
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2698
Sam 20 Mai 2017 - 18:20
Alors, le moz, webkit etc, c'est des préfixes vendeurs, et en fait, c'est quand une propriété CSS débarque mais que les navigateurs ne l’interprètent pas de façon native... Du coup, on doit écrire le préfixe pour que ça fonctionne. Mais depuis le temps, la proriété border-radius est géré sans soucis dans tout les navigateurs, d'où plus besoin de le mettre ! :) Tiens y'a ce tuto qui en parle ! :)

Du coup, je te conseil de lire l'intro au templates (peut être déjà fait ^^) juste pour qu'on soit s'accord quand on parlera de variable et des boucles! :)

Ensuite, le tuto qui parle du QEEL c'est celui-ci, et on va s'en servir si tu veux bien ! :)

Du coup, ce que je te propose c'est que tu ailles voir la gueule du code de ton templates, que tu commences à chercher / retrouver avec le tuto les informations qui vont afficher ce que tu veux !
Je connais pas la version de forum que tu utilises alors ça sera peut être en tableau ou déjà dans des div, mais on va essayer de coder ça proprement et faire 3 block aligné les un à côté des autres ! :) et du coup, pour mieux visualiser tu peux faire ces 3 blocks en mettant une bordure pour chaque de couleur différentes et placer les bonnes variables dedans, ensuite on s'occupera des css et des effets ! :)

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

Contenu sponsorisé
Aller à la page : 1, 2  Suivant
Page 1 sur 2

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum