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

classe 5 - kazumi
 :: Codage :: Entraînement :: Cours :: Classe Jamy
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:34
Coucou @kazumi, du coup, je reprends la suite, comme échangé par MP ! ;)

ça c'était ton dernier code que tu avais fait dans le cours de Yuuki, on va le reprendre et parti de ça si tu veux ! :)

Code:
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"><div style="width: 400px; height: 700px; background-color :#f2f2f2; border: solid #cccccc 3px;"><img src="http://image.noelshack.com/fichiers/2016/48/1480719614-image-test-codage.png"/><p style="font-family: 'Open Sans', sans-serif; text-align:center; font-size: 30px; margin-top: -15px; color: #4d4d4d; text-shadow: 1px 3px 1px #ffffff;">Titre du rp</p><p style="font-family: 'Open Sans', sans-serif; text-align:center; font-size: 11px; color: #4d4d4d;">Feat. Truc&Muche</p>
<span style=" width: 350px; height: 500px; font-family: 'Open Sans', sans-serif; color: #4d4d4d;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget faucibus lectus, non aliquet lacus. Mauris cursus pretium eros, in laoreet dolor pellentesque eget. Curabitur scelerisque rutrum commodo. Duis in nisl vel justo commodo feugiat congue at velit. Integer laoreet maximus neque placerat vulputate. Cras non tincidunt ex. Phasellus commodo eleifend bibendum.

Quisque odio lorem, finibus a lectus nec, facilisis sodales nisi. Nullam hendrerit sollicitudin cursus. Morbi eu arcu facilisis, posuere est nec, volutpat magna. Aliquam iaculis quam at ligula aliquet condimentum. Vestibulum efficitur, eros vitae euismod vestibulum, massa eros fermentum mi, vitae molestie sem velit nec ex. Phasellus risus dui, condimentum id pharetra eget, aliquet id tellus. Ut eu est metus. Integer egestas efficitur ipsum sit amet fringilla. Aliquam in pretium nulla. Quisque rhoncus nulla leo, a fermentum libero pretium ut.

Pellentesque bibendum nibh erat, ac commodo nisl luctus non. Morbi ultrices quis libero ac porttitor. Donec lacinia libero vitae libero dictum, eget convallis velit elementum. Praesent vel consequat arcu. Suspendisse quis tellus at magna viverra elementum. Suspendisse quis gravida sem, nec laoreet est.Suspendisse quis gravida sem, nec laoreet est.Suspendisse quis gravida sem, nec laoreet est.Suspendisse quis gravida sem, nec laoreet est.</span>
</div>

alors, déjà deux petites questions:
- pourquoi utiliser une balise p (donc paragraphe) pour un titre et sous titre ? :)
- pourquoi utiliser une balise span (balise générique de type inline) pour un long texte (= plusieurs paragraphe ?)


Ensuite, petite explication sur cette histoire d'overflow ! :)
Là, tu as définit une hauteur à ton bloc encadrant (700px), du coup, le texte contenu dans ton bloc doit être restreint. Autrement il va chevaucher la bordure/dépasser du cadre de façon inesthétique.
La propriété overflow permet de gérer cela. Elle va permettre de faire apparaître des barres de scroll/ascenseurs ! :)
par défaut, elle est en visible, ce qui veut dire >> tout ce qui dépasse du cadre est affiché, même si c'est moche.

tu peux mettre : overflow:hidden; >> qui va caché tout ce qui dépasse du cadre. C'est plus joli, mais on perd de l'information.

ou alors : overflow:auto; >> qui va créer des barres de scrolls/ascenceurs automatiquement si le texte est trop long par rapport au bloc.

si mes explications ne sont pas claires, n'hésites pas à me redemander ! :)
et si tu as compris, je t'invite à modifier ton code et le reposter à la suite en l'utilisant ! :)

_________________________________________

Life is a journey, enjoy the ride

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

avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 27/10/2015
Messages : 44
Dim 19 Mar 2017 - 1:52
Pour les deux questions, je ne le sais pas moi-même, sans doute parce que j'ai moins de mal avec ces deux là ? Du moins pour la mise en forme.

Titre du rp
Feat. Truc&Muche

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget faucibus lectus, non aliquet lacus. Mauris cursus pretium eros, in laoreet dolor pellentesque eget. Curabitur scelerisque rutrum commodo. Duis in nisl vel justo commodo feugiat congue at velit. Integer laoreet maximus neque placerat vulputate. Cras non tincidunt ex. Phasellus commodo eleifend bibendum.

Quisque odio lorem, finibus a lectus nec, facilisis sodales nisi. Nullam hendrerit sollicitudin cursus. Morbi eu arcu facilisis, posuere est nec, volutpat magna. Aliquam iaculis quam at ligula aliquet condimentum. Vestibulum efficitur, eros vitae euismod vestibulum, massa eros fermentum mi, vitae molestie sem velit nec ex. Phasellus risus dui, condimentum id pharetra eget, aliquet id tellus. Ut eu est metus. Integer egestas efficitur ipsum sit amet fringilla. Aliquam in pretium nulla. Quisque rhoncus nulla leo, a fermentum libero pretium ut.

Pellentesque bibendum nibh erat, ac commodo nisl luctus non. Morbi ultrices quis libero ac porttitor. Donec lacinia libero vitae libero dictum, eget convallis velit elementum. Praesent vel consequat arcu. Suspendisse quis tellus at magna viverra elementum. Suspendisse quis gravida sem, nec laoreet est.Pellentesque bibendum nibh erat, ac commodo nisl luctus non. Morbi ultrices quis libero ac porttitor. Donec lacinia libero vitae libero dictum, eget convallis velit elementum. Donec lacinia libero vitae libero dictum, eget convallis velit elementum.



Code:
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"><div style="width: 400px; height: 700px; background-color :#f2f2f2; border: solid #cccccc 3px; overflow:hidden;"><img src="http://image.noelshack.com/fichiers/2016/48/1480719614-image-test-codage.png"/><div style="font-family: 'Open Sans', sans-serif; text-align: center; font-size: 30px; padding-top: -25px; color: #4d4d4d; text-shadow: 1px 3px 1px #ffffff ">Titre du rp</div><div style="font-family: 'Open Sans', sans-serif; text-align:center; font-size: 11px; color: #4d4d4d;">Feat. Truc&Muche</div>
<div style="height: 500px; font-family: 'Open Sans', sans-serif; color: #4d4d4d;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget faucibus lectus, non aliquet lacus. Mauris cursus pretium eros, in laoreet dolor pellentesque eget. Curabitur scelerisque rutrum commodo. Duis in nisl vel justo commodo feugiat congue at velit. Integer laoreet maximus neque placerat vulputate. Cras non tincidunt ex. Phasellus commodo eleifend bibendum.

Quisque odio lorem, finibus a lectus nec, facilisis sodales nisi. Nullam hendrerit sollicitudin cursus. Morbi eu arcu facilisis, posuere est nec, volutpat magna. Aliquam iaculis quam at ligula aliquet condimentum. Vestibulum efficitur, eros vitae euismod vestibulum, massa eros fermentum mi, vitae molestie sem velit nec ex. Phasellus risus dui, condimentum id pharetra eget, aliquet id tellus. Ut eu est metus. Integer egestas efficitur ipsum sit amet fringilla. Aliquam in pretium nulla. Quisque rhoncus nulla leo, a fermentum libero pretium ut.

Pellentesque bibendum nibh erat, ac commodo nisl luctus non. Morbi ultrices quis libero ac porttitor. Donec lacinia libero vitae libero dictum, eget convallis velit elementum. Praesent vel consequat arcu. Suspendisse quis tellus at magna viverra elementum. Suspendisse quis gravida sem, nec laoreet est.Pellentesque bibendum nibh erat, ac commodo nisl luctus non. Morbi ultrices quis libero ac porttitor. Donec lacinia libero vitae libero dictum, eget convallis velit elementum. Donec lacinia libero vitae libero dictum, eget convallis velit elementum.</div>
</div>

J'ai changer les
Code:
<p>
et les
Code:
<span>
par des
Code:
<div>
, est-ce que ça convient ? Et est mis un "overflow: hidden;" même si j'avoue avoir tenté un "overflow: auto;" dans la balise du texte sans réussir...
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
Dim 19 Mar 2017 - 14:13
Citation :
alors, déjà deux petites questions:
- pourquoi utiliser une balise p (donc paragraphe) pour un titre et sous titre ? :)
- pourquoi utiliser une balise span (balise générique de type inline) pour un long texte (= plusieurs paragraphe ?)

Citation :
Pour les deux questions, je ne le sais pas moi-même, sans doute parce que j'ai moins de mal avec ces deux là ? Du moins pour la mise en forme.

D'accord, je comprends, du coup, je vais te faire un peu la guerre à ça ! ;) Les balises permettent d'agencer le contenu dans ton navigateur. Mais on ne doit pas utiliser n'importe quelle balise pour n'importe quel contenu. La balise lien (a) ne s'utilise que pour des liens, les balises paragraphes (p) s'utilisent pour organiser un texte long. Les balise div et span sont des balises génériques, qui n'ont pas de vrai signification, du coup, tu peux les utiliser quand tu ne sais pas quoi mettre d'autre. Mais on utilise la balise div (block) pour définir des gros bloc, tandis que la balise span ne sert que pour mettre en forme quelques mots dans une phrase car elle ne provoque pas de retour à la ligne.
Pour que ces notions soient bien compris, je t'invite à lire les tutos suivant :
- http://epicode.bbactif.com/t9448-introduction-au-codage
- http://epicode.bbactif.com/t8609-difference-div-et-span

n'hésites pas si tu as des questions sur ces tutos ! :)
Du coup, à chaque fois que tu utiliseras des balises, je te ferai réfléchir à pourquoi tu as fais ce choix, et si il n'y a pas mieux à faire !

Ensuit, fait attention tu a écrit des balises sans mettre les balises codes ! Du coup, je ne peux pas voir ce que tu as écris ! :s
aussi, ça risque de casser les codes si tu ouvres des balises sans les fermer. Je vais éditer ton code, mais fais attention la prochaine fois ! :)

Citation :
J'ai changer les

et les par des

, est-ce que ça convient ? Et est mis un "overflow: hidden;" même si j'avoue avoir tenté un "overflow: auto;" dans la balise du texte sans réussir...
oui, tu peux mettre des div pour tout ces truc, c'est déjà mieux puisque tu veux faire des block ! :)

Si tu mets un overflow hidden, tu risques que si le texte est plus long que la place disponible, tu n'auras pas la fin, elle sera coupée et caché ... Fais le test ! Copie/colle un paragraphe pour que ton texte soit plus long ! Et ensuite, re-teste le auto !! Le auto ne fait un ascenseur/barre de scroll QUE SI c'est nécessaire en fait ! ;) d'où le côté pratique ! :)

_________________________________________

Life is a journey, enjoy the ride

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

avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 27/10/2015
Messages : 44
Dim 19 Mar 2017 - 23:59
Je crois avoir mieux compris maintenant !
Ah...Mince, désolé..J'ai cru qu'on les voyait...Pardon...
J'ai réessayer, et j'ai réussi !
Titre du rp
Feat. Truc&Muche

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget faucibus lectus, non aliquet lacus. Mauris cursus pretium eros, in laoreet dolor pellentesque eget. Curabitur scelerisque rutrum commodo. Duis in nisl vel justo commodo feugiat congue at velit. Integer laoreet maximus neque placerat vulputate. Cras non tincidunt ex. Phasellus commodo eleifend bibendum.

Quisque odio lorem, finibus a lectus nec, facilisis sodales nisi. Nullam hendrerit sollicitudin cursus. Morbi eu arcu facilisis, posuere est nec, volutpat magna. Aliquam iaculis quam at ligula aliquet condimentum. Vestibulum efficitur, eros vitae euismod vestibulum, massa eros fermentum mi, vitae molestie sem velit nec ex. Phasellus risus dui, condimentum id pharetra eget, aliquet id tellus. Ut eu est metus. Integer egestas efficitur ipsum sit amet fringilla. Aliquam in pretium nulla. Quisque rhoncus nulla leo, a fermentum libero pretium ut.

Pellentesque bibendum nibh erat, ac commodo nisl luctus non. Morbi ultrices quis libero ac porttitor. Donec lacinia libero vitae libero dictum, eget convallis velit elementum. Praesent vel consequat arcu. Suspendisse quis tellus at magna viverra elementum. Suspendisse quis gravida sem, nec laoreet est.Pellentesque bibendum nibh erat, ac commodo nisl luctus non. Morbi ultrices quis libero ac porttitor. Donec lacinia libero vitae libero dictum, eget convallis velit elementum. Donec lacinia libero vitae libero dictum, eget convallis velit elementum.Pellentesque bibendum nibh erat, ac commodo nisl luctus non. Morbi ultrices quis libero ac porttitor. Donec lacinia libero vitae libero dictum, eget convallis velit elementum. Praesent vel consequat arcu. Suspendisse quis tellus at magna viverra elementum. Suspendisse quis gravida sem, nec laoreet est.Pellentesque bibendum nibh erat, ac commodo nisl luctus non. Morbi ultrices quis libero ac porttitor. Donec lacinia libero vitae libero dictum, eget convallis velit elementum. Donec lacinia libero vitae libero dictum, eget convallis velit elementum.


Code:
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"><div style="width: 400px; height: 700px; background-color :#f2f2f2; border: solid #cccccc 3px;"><img src="http://image.noelshack.com/fichiers/2016/48/1480719614-image-test-codage.png"/><div style="font-family: 'Open Sans', sans-serif; text-align: center; font-size: 30px; padding-top: -25px; color: #4d4d4d; text-shadow: 1px 3px 1px #ffffff ">Titre du rp</div><div style="font-family: 'Open Sans', sans-serif; text-align:center; font-size: 11px; color: #4d4d4d;">Feat. Truc&Muche</div>
<div style="height: 425px; font-family: 'Open Sans', sans-serif; color: #4d4d4d; overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget faucibus lectus, non aliquet lacus. Mauris cursus pretium eros, in laoreet dolor pellentesque eget. Curabitur scelerisque rutrum commodo. Duis in nisl vel justo commodo feugiat congue at velit. Integer laoreet maximus neque placerat vulputate. Cras non tincidunt ex. Phasellus commodo eleifend bibendum.

Quisque odio lorem, finibus a lectus nec, facilisis sodales nisi. Nullam hendrerit sollicitudin cursus. Morbi eu arcu facilisis, posuere est nec, volutpat magna. Aliquam iaculis quam at ligula aliquet condimentum. Vestibulum efficitur, eros vitae euismod vestibulum, massa eros fermentum mi, vitae molestie sem velit nec ex. Phasellus risus dui, condimentum id pharetra eget, aliquet id tellus. Ut eu est metus. Integer egestas efficitur ipsum sit amet fringilla. Aliquam in pretium nulla. Quisque rhoncus nulla leo, a fermentum libero pretium ut.

Pellentesque bibendum nibh erat, ac commodo nisl luctus non. Morbi ultrices quis libero ac porttitor. Donec lacinia libero vitae libero dictum, eget convallis velit elementum. Praesent vel consequat arcu. Suspendisse quis tellus at magna viverra elementum. Suspendisse quis gravida sem, nec laoreet est.Pellentesque bibendum nibh erat, ac commodo nisl luctus non. Morbi ultrices quis libero ac porttitor. Donec lacinia libero vitae libero dictum, eget convallis velit elementum. Donec lacinia libero vitae libero dictum, eget convallis velit elementum.Pellentesque bibendum nibh erat, ac commodo nisl luctus non. Morbi ultrices quis libero ac porttitor. Donec lacinia libero vitae libero dictum, eget convallis velit elementum. Praesent vel consequat arcu. Suspendisse quis tellus at magna viverra elementum. Suspendisse quis gravida sem, nec laoreet est.Pellentesque bibendum nibh erat, ac commodo nisl luctus non. Morbi ultrices quis libero ac porttitor. Donec lacinia libero vitae libero dictum, eget convallis velit elementum. Donec lacinia libero vitae libero dictum, eget convallis velit elementum.</div>
</div>
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 20 Mar 2017 - 18:16
C'est parfait ! :D

Du coup, il ne manquerait plus qu'une petite marge interne à ton block qui contient le texte pour être beau, car là, c'est collé contre les bords, c'est moyen ! :)

Personnellement, je ne mettrai pas non plus de hauteur prédéfinie à ton cadre (et du coup, pas de overflow), car c'est pas UX/friendly ... Dans le sens, c'est pas optimisé pour faciliter le confort de lecture ... :)

Du coup, on va pouvoir passer à une nouvelle création/de nouvelles notions ! :)
dis moi, tu as envie d'apprendre à réaliser quoi ? si tu veux, on peut réaliser une fiche de présentation, tu en as déjà fait ? Un rendu en tête que tu veux réaliser ? Si non, je te ferai un schéma ! :)

_________________________________________

Life is a journey, enjoy the ride

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

avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 27/10/2015
Messages : 44
Mar 21 Mar 2017 - 19:37
D'accord ! J'y penserai la prochaine fois !

Hmmm, bonne question. Je ne sais pas trop en fait, quand je me le demande je pense à une fiche relation, de présentation, de rp et un tas d'autres trucs donc..En soit, à partir des fiches rp comme celle que tu as pu voir, je n'ai pas fait grand chose...Une idée de rendu ? Non, pas pour l'instant.
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 - 11:56
Coucou ! Désolé pour mon manque de réaction, j'étais overbookée ces derniers jours ... Mais me revoici ! :D

Ok, et bien on va faire une fiche de PV dans ce cas, qui est à mes yeux intermédiaire entre une fiche de présentation et une fiche de lien ! ;)

Que penses tu de ça :

et pour la partie lien on fera ça : (dans un 2em temps)


Je te laisse avec les indications "design" pour 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 à me demander ! :D

_________________________________________

Life is a journey, enjoy the ride

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

avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 27/10/2015
Messages : 44
Ven 31 Mar 2017 - 23:06
D'accord ! J'essayerai de faire ça durant les vacances mais je ne pourrais rien faire la semaine prochaine comme je risque de ne pas avoir de wifi...
avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 27/10/2015
Messages : 44
Lun 1 Mai 2017 - 15:53

Nom Prénom

"citation un peu trop cool pour être ignorée, ouais, ouais."

Identity.
>>ft. : who
>>Âge : ...
>>Lieu de naissance : ...
>>Nationalité : ...
>>Particularité : ...

Biographie.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit odio nec congue venenatis. Quisque venenatis odio velit, a mattis lectus pharetra vel. Duis a lacinia orci. Quisque eu odio est. Etiam vel eros ultrices, vulputate tortor vel, viverra orci. Praesent nunc turpis, finibus nec euismod eu, dignissim et leo. Quisque id augue vitae ex placerat dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Suspendisse pellentesque non justo vel egestas. Suspendisse fermentum felis tortor, at egestas nisl viverra et. Aliquam tristique bibendum lacus, ac efficitur velit tempus ac. Vivamus rutrum risus eu eleifend ornare. Fusce enim arcu, consequat id pretium ac, luctus ac neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi volutpat dictum fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ante dui, egestas sed posuere vitae, pharetra a orci. Curabitur dapibus diam nec quam venenatis, ut dapibus est volutpat. Ut iaculis ligula vel dapibus ultricies. Aenean pellentesque gravida leo cursus vulputate. Vestibulum eu eros tellus. Cras blandit blandit eros. Quisque et vehicula quam. Vestibulum vitae felis tincidunt, fringilla sapien quis, sodales ante.

In eu venenatis neque, in vehicula felis. Maecenas mi eros, vulputate eu varius nec, aliquet et velit. Ut egestas magna leo, sed scelerisque arcu maximus non. Praesent auctor, tellus at varius posuere, sapien odio luctus diam, a congue risus nibh vel enim. Etiam sit amet molestie ante. Praesent pulvinar tortor ut odio fermentum congue. Sed sodales sagittis eros eget placerat. Duis eget lacus ac quam pharetra dapibus id non sem.

Nobody's perfect. Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎Adjectif ♦︎Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎

Nom, prénom || fight, baby. Fight.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa nunc, sodales a aliquam ac, dignissim in arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Nom, prénom || fight, baby. Fight.Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Aliquam massa nunc, sodales a
aliquam ac, dignissim in arcu. Orci varius natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus.


Code:
<div style="width: 498px; height: 1000px; background-color: #ececec;"><img src="https://i58.servimg.com/u/f58/18/48/99/76/bruit_10.gif"/><img src="https://i58.servimg.com/u/f58/18/48/99/76/100x1010.jpg" style="border: solid 5px #ffffff; margin-top: -30px; margin-left: 20px;"/><p style="margin-left: 140px; font-family: times; color: #91172A; font-size: 30px; text-shadow: 1px 1px 2px #000000; margin-top: -80px;">Nom Prénom</p> <p style="margin-left: 140px; font-family: times; color: #000000; margin-top: -35px; font-size: 13px; font-style: italic;"> "citation un peu trop cool pour être ignorée, ouais, ouais."</p><div style="border-bottom: solid 1px #000000; margin-top: 40px;"></div><div style="margin-left: 20px; font-family: times; font-size: 15px; margin-top: 20px; color: #000000;"><span style="color:#91172A; font-weight: bold;">Identity.</span>
<span style="font-size: 12px;"><span style="font-weight: bold">>>ft.</span> : who</span>
<span style="font-size: 12px;"> <span style="font-weight: bold">>>Âge</span> : ...</span>
<span style="font-size: 12px;"> <span style="font-weight: bold">>>Lieu de naissance</span> : ...</span>
<span style="font-size: 12px;"> <span style="font-weight: bold">>>Nationalité</span> : ...</span>
<span style="font-size: 12px;"> <span style="font-weight: bold">>>Particularité</span> : ...</span></div>
<div style="font-family: times; font-size: 12px; margin-top: -130px; margin-left: 200px; color: #000000; overflow: auto; wight: 200px; height: 300px;"><span style="font-size: 15px; font-weight: bold; color: #91172A;">Biographie.</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit odio nec congue venenatis. Quisque venenatis odio velit, a mattis lectus pharetra vel. Duis a lacinia orci. Quisque eu odio est. Etiam vel eros ultrices, vulputate tortor vel, viverra orci. Praesent nunc turpis, finibus nec euismod eu, dignissim et leo. Quisque id augue vitae ex placerat dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Suspendisse pellentesque non justo vel egestas. Suspendisse fermentum felis tortor, at egestas nisl viverra et. Aliquam tristique bibendum lacus, ac efficitur velit tempus ac. Vivamus rutrum risus eu eleifend ornare. Fusce enim arcu, consequat id pretium ac, luctus ac neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi volutpat dictum fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ante dui, egestas sed posuere vitae, pharetra a orci. Curabitur dapibus diam nec quam venenatis, ut dapibus est volutpat. Ut iaculis ligula vel dapibus ultricies. Aenean pellentesque gravida leo cursus vulputate. Vestibulum eu eros tellus. Cras blandit blandit eros. Quisque et vehicula quam. Vestibulum vitae felis tincidunt, fringilla sapien quis, sodales ante.

In eu venenatis neque, in vehicula felis. Maecenas mi eros, vulputate eu varius nec, aliquet et velit. Ut egestas magna leo, sed scelerisque arcu maximus non. Praesent auctor, tellus at varius posuere, sapien odio luctus diam, a congue risus nibh vel enim. Etiam sit amet molestie ante. Praesent pulvinar tortor ut odio fermentum congue. Sed sodales sagittis eros eget placerat. Duis eget lacus ac quam pharetra dapibus id non sem.</div>
<div style="background-color: #F6F6F6; font-family: times; color: #000000; font-size: 13px; height: 60px;"><span style="color:#91172A; font-weight: bold; font-size: 15px;">Nobody's perfect.</span> Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎Adjectif ♦︎Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎ Adjectif ♦︎</div>
<img src="https://i58.servimg.com/u/f58/18/48/99/76/100x1010.jpg" style="border-radius: 50%"/><div style="font-size: 13px; font-family: times; color: #000000; margin-top: -100px; margin-left: 110px;"><span style="color:#91172A; font-weight: bold; font-size: 15px;">Nom, prénom || fight, baby. Fight.</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa nunc, sodales a aliquam ac, dignissim in arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div>
<img src="https://i58.servimg.com/u/f58/18/48/99/76/100x1010.jpg" style="border-radius: 50%; margin-top: 20px; margin-left: 350px"/><div style="font-size: 13px; font-family: times; color: #000000; margin-top: -80px; wight: 200px;"><span style="color:#91172A; font-weight: bold; font-size: 15px;">Nom, prénom || fight, baby. Fight.</span>Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Aliquam massa nunc, sodales a
aliquam ac, dignissim in arcu. Orci varius natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. </div>
</div>

Voilà...J'aurais essayé...
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 25 Mai 2017 - 17:56
Coucou !
Et bien ce n'est pas mal du tout !!! :D

Quelques fois tu écris :
Code:
margin-top: -130px; margin-left: 200px;
et tu pourrais condenser en écrivant une fois la propriété, mais sinan je n'ai rien à ajouter !! Enfin, si tu aurais pu mieux caler les éléments, genre les liens là, ils sont pas centrés, c'est dommage et la description est collé sur la droite, c'est pas très lisible, ça serait mieux avec un padding, mais sans ça, c'est très bien ! Et tu as fait ça en partant de rien, alors le niveau est acquis ! ;D

que veux tu apprendre ensuite ? :)

_________________________________________

Life is a journey, enjoy the ride

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

avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 27/10/2015
Messages : 44
Ven 26 Mai 2017 - 10:03
Je note ! Pour l'image, je me demandais aussi si le mieux n'aurait pas été que j'utilise un "float" ?

Pour la suite..Peut-être rester sur les fiches de lien/relation et les fiches rp ? Et si tu estimes que j'ai le niveau peut-être PA ? Ou voir de nouvelle propriété de CSS ? -Oui, ça fait beaucoup.. ;;" Désolé...-
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
Dim 28 Mai 2017 - 12:51
Citation :
Pour l'image, je me demandais aussi si le mieux n'aurait pas été que j'utilise un "float" ?
>> :mh: personnellement, je crois avoir fait un float quand je l'ai codé... Mais c'est un parti prit! Il existe plusieurs façon de positionner les éléments et je fais un ou l'autre en fonction de la situation ... Le problème du float (et du coup de trop en faire) c'est qu'il faut gérer la sortie du flux des éléments qu'on positionne en float, et du coup rétablir le flux derrière eux ... Ce qui peut être un poil plus compliqué.. Mais ici, c'était bien de faire comme ça aussi ! :)

Je pense qu'on peut se lancer dans une PA, un truc relativement "simple" pour commencer, et ajouter progressivement des effets ! mais je pense que tu es capable de faire des fiches seul maintenant ! :)
Après, si tu fais des codes entre nos exercices (je répond quand même relativement lentement), n'hésites pas à les poster ici je peux te débuger/te donner d'autres conseils ! :)

Du coup je te propose de faire le schéma de Aed, elle est simple de prime abord, puis on pourra faire les hover, et des infobulles sur les PV :


Je te fais confiance pour pas essayez de reprendre les codes d'autres qui ont déjà essayé de la faire ;)

_________________________________________

Life is a journey, enjoy the ride

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

avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 27/10/2015
Messages : 44
Sam 17 Juin 2017 - 13:42
Salut ! Juste histoire de donner des nouvelles, j'ai commencé la PA mais avec le bac je la continuerai à la fin des épreuves anticipés écrites.
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 17 Juin 2017 - 20:28
pas de soucis, je suis moi même un peu bookée et ai moins de tps pour vous guider ... :s

_________________________________________

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é
Page 1 sur 1

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