CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| Akya
{ Membre }
Messages : 207
| Bonjour à toi, Nihil ! Alors voilà, depuis hier j'ai galéré à faire une fiche pour une EV, mais mon code est archi sale, bancale, et j'en passe... C'est un torchon mais c'est le seul moyen par lequel j'ai réussi à obtenir le résultat voulu. '__' Mais c'est pas possible faut trouver un autre moyen. J'avais même essayé avec des float:left mais ça ne fonctionnait pas, alors j'ai du me résigner à faire des tableaux... immondes ! - Les codes:
- Code:
-
<div class="contener"> <img src="LIEN" class="image" /> <table width="400" style="margin-top: -150px;"><tr><td width="150px"><div class="titresfiche">Identité</div><div class="contenusfiche"><table><tr><td style="width: 100px;">[b]PRÉNOM[/b]</td><td style="width: 120px;">Ici</td></tr><tr><td style="width: 100px;">[b]ÂGE[/b]</td><td style="width: 120px;">Ici</td></tr><tr><td style="width: 100px;">[b]SEXE[/b]</td><td style="width: 120px;">Ici</td></tr><tr><td style="width: 100px;">[b]RACE[/b]</td><td style="width: 120px;">Ici</td></tr></table></div></td> <td rowspan="3" width="270px" style="vertical-align: top"><div class="colonnetitrefiche">Compétences</div><div class="colonnecontenusfiche"><table><tr><td style="width: 130px;">[b]COURSE[/b]</td><td style="width: 120px;">00%</td></tr><tr><td style="width: 130px;">[b]OBSTACLE[/b]</td><td style="width: 120px;">00%</td></tr><tr><td style="width: 130px;">[b]DRESSAGE[/b]</td><td style="width: 120px;">00%</td></tr><tr><td style="width: 130px;">[b]CROSS COUNTRY[/b]</td><td style="width: 120px;">00%</td></tr><tr><td style="width: 130px;">[b]COMPLET[/b]</td><td style="width: 120px;">00%</td></tr><tr><td style="width: 130px;">[b]ENDURANCE[/b]</td><td style="width: 120px;">00%</td></tr><tr><td style="width: 130px;">[b]HUNTER[/b]</td><td style="width: 120px;">00%</td></tr><tr><td style="width: 100px;">[b]WESTERN[/b]</td><td style="width: 120px;">00%</td></tr><tr><td style="width: 130px;">[b]TRAVAIL À PIEDS[/b]</td><td style="width: 120px;">00%</td></tr><tr><td style="width: 130px;">[b]VOLTIGE[/b]</td><td style="width: 120px;">00%</td></tr><tr><td style="width: 130px;">[b]ATTELAGE[/b]</td><td style="width: 120px;">00%</td></tr><tr><td style="width: 130px;">[b]RANDONNÉE[/b]</td><td style="width: 120px;">00%</td></tr><tr><td style="width: 130px;">[b]JEUX[/b]</td><td style="width: 120px;">00%</td></tr><tr><td style="width: 130px;">[b]ETHOLOGIE[/b]</td><td style="width: 120px;">00%</td></tr><tr><td style="width: 130px;">[b]SHOW[/b]</td><td style="width: 120px;">00%</td></tr></table></div></td> </tr> <tr> <td width="150px"><div class="titresfiche">Propriétaire</div><div class="contenusfiche"><table><tr><td style="width: 100px;">[b]ÉLEVEUR[/b]</td><td style="width: 120px;">Inconnu</td></tr><tr><td style="width: 100px;">[b]ÉLEVAGE[/b]</td><td style="width: 120px;">Inconnu</td></tr><tr><td style="width: 100px;">[b]NAISSEUR[/b]</td><td style="width: 120px;">Inconnu</td></tr><tr><td style="width: 100px;">[b]VALEUR[/b]</td><td style="width: 120px;">3.000$</td></tr></table></div></td> </tr> <tr> <td width="150px"><div class="titresfiche">Génétique</div><div class="contenusfiche"><table><tr><td style="width: 100px;">[b]TAUX[/b]</td><td style="width: 150px;">100%</td></tr><tr><td style="width: 100px;">[b]FERTILITÉ[/b]</td><td style="width: 150px;">Non testée</td></tr><tr><td style="width: 100px;">[b]PARENTS[/b]<br /><br /></td><td style="width: 150px;">INCONNU X INCONNUE<br /><br /></td></tr></table></div></td></tr><tr><td><div class="carnettitrefiche">Carnet de Santé</div><div class="carnetcontenusfiche"><table><tr><td style="width: 100px;">[b]SANTÉ[/b]</td><td style="width: 120px;">20%</td></tr><tr><td style="width: 100px;">[b]CONFIANCE[/b]</td><td style="width: 120px;">20%</td></tr><tr><td style="width: 100px;">[b]ÉNERGIE[/b]</td><td style="width: 120px;">50%</td></tr></table></div></td><td><div class="resultatstitrefiche">Résultats</div><div class="resultatscontenusfiche"><br /><table align="center"><tr><td>[img]http://i50.tinypic.com/o0r05u.png[/img] 00</td><td>[img]http://i48.tinypic.com/zleogi.png[/img] 00</td><td>[img]http://i46.tinypic.com/2jep9oi.jpg[/img] 00</td></tr></table> <br /><br /></div></td></tr></table> </div> - Code:
-
/* Début feuille de style fiche chevaux */ .contener { width: 400px; align: center; margin-left: 17px; }
.contener02 { display : inline-block; }
.titresfiche { width: 250px; background-color: #b6c087; font-family: 'Comic Sans MS'; text-transform: uppercase; text-align: center; color: #6e745; padding: 5px; }
.contenusfiche { width: 250px; background-color: #e5ecc5; font-family: Arial; color: #6e7452; padding: 5px; }
.carnettitrefiche { width: 250px; background-color: #b6c087; font-family: 'Comic Sans MS'; text-transform: uppercase; text-align: center; color: #6e745; padding: 5px; }
.carnetcontenusfiche { width: 250px; background-color: #e5ecc5; font-family: Arial; color: #6e7452; padding: 5px; }
.colonnetitrefiche { width: 270px; background-color: #b6c087; font-family: 'Comic Sans MS'; text-transform: uppercase; text-align: center; color: #6e745; padding: 5px; }
.colonnecontenusfiche { width: 270px; height: 354px; background-color: #e5ecc5; font-family: Arial; color: #6e7452; padding: 5px; }
.resultatstitrefiche { width: 270px; background-color: #b6c087; font-family: 'Comic Sans MS'; text-transform: uppercase; text-align: center; color: #6e745; padding: 5px; }
.resultatscontenusfiche { width: 270px; height: 69px; background-color: #e5ecc5; font-family: Arial; color: #6e7452; padding: 5px; }
.alignement { text-align: right; }
.image { width: 550px; height: 300px; border: 1px solid #b6c087; margin-bottom: 5px; }
/* Fin feuille de style fiche chevaux */
Le résultats : https://i.servimg.com/u/f39/12/03/49/16/captur12.png Penses tu pouvoir m'aider, ou la catastrophe est allée trop loin ? x') Merci d'avance en tout cas ! | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Je regarde ça demain sans faute Akya, là j'ai juste pas le courage haha x)
Si je comprends bien, c'est une fiche à poster dans un post, c'est bien ça ?
Prépare toi à un cataclysme sur ton code demain o/ | | |
| | | Akya
{ Membre }
Messages : 207
| Merci beaucoup Nihil. Oui c'est ça, en fait c'est comme une fiche de présentation sauf que là en l'occurrence on l'utilise pour créer des chevaux... Le principe typique d'une Ecurie Virtuelle. Ouais je m'y attends ! xD Encore merci. | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Voilà j'ai regardé ton code un peu, et voilà comment il se découpe (ok ok c'est moche, j'ai fait ça avec Paint XD): Comme tu as déjà fait un tableau, je sais que tu as déjà réfléchi à cela. On va simplement, au lieu de commencer par faire la structure de toute la fiche travailler sur l'apparence de l'intérieure d'une boite bleu (voir mon schéma) Actuellement, dans ton code c'est comme ceci : - Code:
-
<td width="150px"><div class="titresfiche">Propriétaire</div><div class="contenusfiche"><table><tr><td style="width: 100px;">[b]ÉLEVEUR[/b]</td><td style="width: 120px;">Inconnu</td></tr><tr><td style="width: 100px;">[b]ÉLEVAGE[/b]</td><td style="width: 120px;">Inconnu</td></tr><tr><td style="width: 100px;">[b]NAISSEUR[/b]</td><td style="width: 120px;">Inconnu</td></tr><tr><td style="width: 100px;">[b]VALEUR[/b]</td><td style="width: 120px;">3.000$</td></tr></table></div></td> Sur cette partie là, voyais tu pour faire autrement qu'un tableau ? Une chose que tu peuxfaire déjà pour simplifier ton code c'est remplacer tous les style="width: 100px;" en mettant une classe, ça sera déjà plus léger ! Et plus facile à modifier si d'un coup tu veux passer à 103px pour une raison X ou Y. Même chose pour les style="width: 120px;"Par exemple une classe "c_label" et une classe "c_valeur" (c pour contenu xD) - Astuce:
Je vois que tu as a minifié ton code (tout coller sans retours à la ligne), pour éviter les retours à la ligne que ForumActif met. Je faisais ça aussi avant, je suis passée à autre chose pour ma part : - Code:
-
<div class="fiche_post"> <!-- Contenu de ma fiche ici --> <p>Pas De Retour A La La Ligne</p> <p class="cc">Lorem Ipseum</p> </div> Et ensuite dans le CSS : - Code:
-
/* FICHES EN GENERAL */
/* Par défaut on efface les retours à la ligne mis par ForumActif */ .fiche_post br { display: none; }
/* On les remet quand l'utilisateur doit modifier un endroit */ .fiche_post .cc br { display: block;
Les retours à la ligne ne s'afficheront que dans les éléments avec la classe cc. Je trouve cela assez pratique car cela permet d'avoir une fiche plus jolie dans l'éditeur (ça fait moins peur). Pour ma part je trouve cette méthode assez pratique et j'ai encore jamais eu de problème avec :p
| | |
| | | Akya
{ Membre }
Messages : 207
| Alors, en ce qui concerne le contenu d'une boite bleu, non je ne vois pas comment faire autrement, car je souhaitais conserver l'espace entre les champs et leur réponse (ex "Éleveur" et "Inconnu") ainsi que l'alignement parfait de ces réponses. Donc si tu as une astuce pour faire autrement, tout en conservant l'effet, je suis preneuse ! J'ai suivi tes conseils, au niveau de l'installation des class pour les largeurs de colonnes, ainsi que l'histoire des sauts de lignes de FA. Pour ce dernier point, tu me sauves la vie je ne connaissais absolument pas ! Et le code est désormais plus lisible. - Code:
-
<div class="fiche_post"><div class="contener"> <img src="LIEN" class="image" /> <table width="400"><tr><td width="150px"> <div class="titresfiche">Identité</div> <div class="contenusfiche"> <table> <tr> <td class="c_label">[b]PRÉNOM[/b]</td><td class="c_valeur">Ici</td></tr><tr><td class="c_label">[b]ÂGE[/b]</td><td class="c_valeur">Ici</td></tr><tr><td class="c_label">[b]SEXE[/b]</td><td class="c_valeur">Ici</td></tr><tr><td class="c_label">[b]RACE[/b]</td><td style="width: 120px;">Ici</td> </tr> </table></div></td> <td rowspan="3" width="270px" style="vertical-align: top"> <div class="colonnetitrefiche">Compétences</div> <div class="colonnecontenusfiche"> <table> <tr><td style="width: 130px;">[b]COURSE[/b]</td> <td class="c_valeur">00%</td></tr> <tr><td style="width: 130px;">[b]OBSTACLE[/b]</td> <td class="c_valeur">00%</td></tr> <tr><td style="width: 130px;">[b]DRESSAGE[/b]</td> <td class="c_valeur">00%</td></tr> <tr><td style="width: 130px;">[b]CROSS COUNTRY[/b]</td> <td class="c_valeur">00%</td></tr> <tr><td style="width: 130px;">[b]COMPLET[/b]</td> <td class="c_valeur">00%</td></tr> <tr><td style="width: 130px;">[b]ENDURANCE[/b]</td> <td class="c_valeur">00%</td></tr> <tr><td style="width: 130px;">[b]HUNTER[/b]</td> <td class="c_valeur">00%</td></tr> <tr><td class="c_label">[b]WESTERN[/b]</td> <td style="width: 120px;">00%</td></tr> <tr><td style="width: 130px;">[b]TRAVAIL À PIEDS[/b]</td> <td class="c_valeur">00%</td></tr> <tr><td style="width: 130px;">[b]VOLTIGE[/b]</td> <td class="c_valeur">00%</td></tr> <tr><td style="width: 130px;">[b]ATTELAGE[/b]</td> <td class="c_valeur">00%</td></tr> <tr><td style="width: 130px;">[b]RANDONNÉE[/b]</td> <td class="c_valeur">00%</td></tr> <tr><td style="width: 130px;">[b]JEUX[/b]</td> <td class="c_valeur">00%</td></tr> <tr><td style="width: 130px;">[b]ETHOLOGIE[/b]</td> <td style="width: 120px;">00%</td></tr> <tr><td style="width: 130px;">[b]SHOW[/b]</td> <td class="c_valeur">00%</td></tr> </table> </div></td> </tr> <tr> <td width="150px"> <div class="titresfiche">Propriétaire</div> <div class="contenusfiche"> <table> <tr> <td class="c_label">[b]ÉLEVEUR[/b]</td> <td class="c_valeur">Inconnu</td></tr> <tr><td class="c_label">[b]ÉLEVAGE[/b]</td> <td class="c_valeur">Inconnu</td></tr> <tr><td class="c_label">[b]NAISSEUR[/b]</td> <td class="c_valeur">Inconnu</td></tr> <tr><td class="c_label">[b]VALEUR[/b]</td> <td class="c_valeur">3.000$</td></tr> </table> </div></td> </tr> <tr> <td width="150px"> <div class="titresfiche">Génétique</div> <div class="contenusfiche"> <table> <tr><td class="c_label">[b]TAUX[/b]</td> <td style="width: 150px;">100%</td></tr> <tr><td class="c_label">[b]FERTILITÉ[/b]</td> <td style="width: 150px;">Non testée</td></tr> <tr><td class="c_label">[b]PARENTS[/b]<br /><br /></td> <td style="width: 150px;">INCONNU X INCONNUE<br /><br /></td></tr> </table> </div></td> </tr> <tr> <td> <div class="carnettitrefiche">Carnet de Santé</div> <div class="carnetcontenusfiche"> <table><tr><td class="c_label">[b]SANTÉ[/b]</td> <td class="c_valeur">20%</td></tr> <tr><td class="c_label">[b]CONFIANCE[/b]</td> <td class="c_valeur">20%</td></tr> <tr><td class="c_label">[b]ÉNERGIE[/b]</td> <td class="c_valeur">50%</td> </tr> </table> </div></td> <td><div class="resultatstitrefiche">Résultats</div> <div class="resultatscontenusfiche"><br /> <table align="center"><tr><td>[img]http://i50.tinypic.com/o0r05u.png[/img] 00</td><td>[img]http://i48.tinypic.com/zleogi.png[/img] 00</td><td>[img]http://i46.tinypic.com/2jep9oi.jpg[/img] 00</td></tr></table> <br /><br /></div></td></tr></table> </div></div> Résultat : https://i.servimg.com/u/f39/12/03/49/16/captur13.png Maintenant, je souhaiterai souligne un ou deux points : - Je voudrais remonter le bloc "Génétique" de sorte a avoir le même espace que celui entre le bloc "Identité" et "Propriétaire". - Je voudrais centrer verticalement les trophées et leurs numéros dans le blocs "Résultats". :3 Ensuite, qui y'a t-il d'autre à faire, selon toi ? EDITE. Avec ma collabo on est en train de retaper la fiche différemment en prenant en compte ce que tu m'explique. Mais y'a un sushi quelque par dans le code parce que lorsque j'envoie le poste, la page du forum est déformé en bas... Tu peux jeter un oeil please ? RE-EDITE : J'ai trouvé ! Avec la patience on parvient à tout ! Y'avait un tableau de mal fermé. :3 | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Tu pourrais me donner un lien où je pourrai voir le rendu de la fiche directement s'il te plait :p ? C'est plus simple pour débug ^__^ | | |
| | | Akya
{ Membre }
Messages : 207
| - Akya a écrit:
RE-EDITE :
J'ai trouvé ! Avec la patience on parvient à tout ! Y'avait un tableau de mal fermé. :3 | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Oups, désolée XD Du coup je peux mettre en résolu ? | | |
| | | Akya
{ Membre }
Messages : 207
| Je profite juste une dernière fois de ta gentillesse (faisons d'une pierre deux coups !) pour savoir si tu sais, ou si tu as un tuto vers lequel me redirriger, pour obtenir cette configuration au niveau des forums ? https://i.servimg.com/u/f39/12/03/49/16/captur14.png | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Hum, quelles parties précisément ?
Tu peux regarder ça : Suppression des colonnes "Sujets" et "Messages" | | |
| | | Akya
{ Membre }
Messages : 207
| Oui c'est ça. C'est parfait. Tu peux verrouiller le sujet. Encore merci pour ton aide Nihil ! | | |
| | | Contenu sponsorisé
| | | | |
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|