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! |
| (Résolu) Espace non désiré dans une fiche de perso | |
| .Lou
{ Membre actif }
Messages : 771
| Salut les gens. Je suis en train de réaliser une fiche de perso pour le RPg de Natsumi mais j'ai un soucis. A chaque nouvelle ligne crée dans mon tableau , j'ai un espace qui se forme entre l'image en demi cercle & le cadre du dessous. Plus je il y a de lignes , plus l'espace s'agrandi. Hors , j'aimerais que les deux parties soient collées. Voilà la fiche : - Spoiler:
| Nom : Prénom : Age:
|
Caractère
|
texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte
|
Physique
|
texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte
|
Histoire
|
texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte
|
& Vous ?
|
| Nom : Prénom : Age:
|
By Point Virgule.
|
& Voilà le code : - Code:
-
<div style="margin:auto;width:502px;height:250px; background-image: url(http://www.elbakin.net/plume/xmedia/film/news/bilbo/orlando_bloom_bilbo.jpg); border: 3px solid #333333; -webkit-border-radius: 400px 400px 0px 0px; -moz-border-radius: 400px 400px 0px 0px; border-radius: 400px 400px 0px 0px;"></div> <table style="margin-right:auto;margin-left:auto;margin-top:-40px;border: 3px solid #000000;background-color: #dddddd;"><tr><td style="width: 200px; height:400px; background-image: url(http://www.elbakin.net/plume/xmedia/film/news/bilbo/orlando_bloom_bilbo.jpg); border: 3px solid #333333;"></td><td valign=top style= "width: 280px; height:400px; background-color: #333333; border: 3px solid #333333;">Nom : Prénom : Age: </td></tr> <tr><td colspan="2" valign=top><div style="font-color: #333333; font-size: 15px; text-align: center;"> Caractère</div> </td></tr> <tr><td colspan="2"><div style= "padding: 20px; margin-right: 20px; margin-left : 20px; background-color: #ffffff; font-color: #333333; font-size: 12px; text-align: justify; border: 1px solid #333333;">texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div> </td></tr> <tr><td colspan="2" valign=top><div style="font-color: #333333; font-size: 15px; text-align: center;">Physique</div> </td></tr> <tr><td colspan="2"><div style= "padding: 20px; margin-right: 20px; margin-left : 20px; background-color: #ffffff; font-color: #333333; font-size: 12px; text-align: justify; border: 1px solid #333333;">texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div> </td></tr> <tr><td colspan="2" valign=top><div style="font-color: #333333; font-size: 15px; text-align: center;">Histoire</div> </td></tr> <tr><td colspan="2"><div style= "padding: 20px; margin-right: 20px; margin-left : 20px; background-color: #ffffff; font-color: #333333; font-size: 12px; text-align: justify; border: 1px solid #333333;">texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div> </td></tr> <tr><td colspan="2" valign=top><div style="font-color: #333333; font-size: 15px; text-align: center;">& Vous ?</div> </td></tr> <tr><td style="width: 200px; height:200px; background-image: url(http://www.elbakin.net/plume/xmedia/film/news/bilbo/orlando_bloom_bilbo.jpg); border: 3px solid #333333;"></td><td valign=top style= "width: 200px; height:200px; background-color: #333333; border: 3px solid #333333;">Nom : Prénom : Age: </td></tr> <tr><td colspan="2" valign=top><div style="font-color: #333333; font-size: 12px; text-align: center;"> By [url=www.http://point-virgule.fr1.co]Point Virgule[/url].</div> </td></tr></table> J'ai beau y regarder , je ne vois pas d'où ça vient Merci d'avance |
Dernière édition par .Lou le Sam 14 Juil 2012, 11:40, édité 1 fois | |
| | | Abysse Yclette
{ Membre }
Messages : 152
| Bon, je ne suis pas une spécialiste en codage mais je crois pouvoir t'aider x) Je pense qu'il suffit d'augmenter le "margin-top" de ta table dans les négatifs. Genre essaie avec : - Code:
-
margin-top:-150px; | | |
| | | .Lou
{ Membre actif }
Messages : 771
| Oh effectivement ça fonctionne. Merci beaucoup J'aurais quand même aimé savoir d'où pouvais venir cet espacement mais le soucis est réglé. | | |
| | | Abysse Yclette
{ Membre }
Messages : 152
| Hum je pense que ca vient du fait que tu aies utilisé une div et une table l'un après l'autre, ca génère toujours un espace il me semble. Enfin je crois =O | | |
| | | .Lou
{ Membre actif }
Messages : 771
| Ah ok, j'étais pas au courant de ça | | |
| | | Orange
RocketMan
Messages : 3086
| - Abysse Yclette a écrit:
- Hum je pense que ca vient du fait que tu aies utilisé une div et une table l'un après l'autre, ca génère toujours un espace il me semble. Enfin je crois =O
Pas vraiment Abysse. Ça vient plutôt du fait que Forumactif crée des sauts de lignes automatiquement dans les messages. Du coup, à chaque fois que Lou a fait un saut de ligne dans son code, ça a générer un saut de ligne dans le rendu. Pour ce qui est des tableaux, chaque saut de ligne fait entre les < tr> et les < td> se ramassent au début du tableau, ce qui occasionne ce grand espace. C'est pourquoi il est préférable, dans les messages du moins, d'utiliser l'équivalent BBCode ([ td] [ tr])... ça annule les sauts de lignes Voici un exemple Cette ligne est juste au-dessus du tableau - Code:
-
Cette ligne est juste au-dessus du tableau <table> <tr> <td> Texte ici </td> </tr> </table>
Et en BBCode Cette ligne est juste au-dessus du tableau - Code:
-
Cette ligne est juste au-dessus du tableau [table] [tr] [td] Texte ici [/td] [/tr] [/table]
Voilà Problème résolu. Problème à classé après réponse du demandeur. | | |
| | | Abysse Yclette
{ Membre }
Messages : 152
| Ah jme disais bien que je disais des bêtises Merci ! | | |
| | | .Lou
{ Membre actif }
Messages : 771
| Oh merci Orange. C'est très clair comme ça Je confirme , problème résolu | | |
| | | Orange
RocketMan
Messages : 3086
| | | | Contenu sponsorisé
| | | | | (Résolu) Espace non désiré dans une fiche de perso | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|
|