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! |
| Problème présentation HTML | |
| Katreuh
{ Membre }
Messages : 16
| Bonjour tout le monde. Etant en train de monter un nouveau forum RPG version phpbb 2 dont voici l'adresse j'ai essayé de bidouiller un peu le HTML, et jusqu'ici, cela avait fonctionné. Sauf que j'avais oublié que le HTML, c'est le diable, et maintenant, il se retourne contre moi (et je n'ai pas envie d'échanger mon âme pour que ça marche xD) Pour la réservation des avatars, j'ai fait des tableaux. J'aimerais qu'il ait une taille "fixe" de 300 pixels de large et 150 pixels de haut quand il n'y a rien dedans, mais sans qu'ils s'allongent dès qu'on rajoute juste un nom pour le réserver (voire exemple ci-dessous) - Spoiler:
En plus de ça, ce qui est écrit n'en fait aussi qu'à sa tête. Et je souhaiterais également que les lettres de l'alphabet qui servent de titre à chaque tableau en quelques sorte ne se retrouvent pas en plein milieu dudit tableau, mais en haut. J'ai essayé toutes mes maigres connaissances sans un seul résultat. Voici mon code : - Spoiler:
- Code:
-
<div class="titre">Célébrités Féminines</div>
<center><table> <tr><td align="left"><table width=300px align=center><tr><td align="left"><div style="background: #804DA4;-moz-border-radius-topleft: 12px; -moz-border-radius-topright: 12px; -moz-border-radius-bottomright: 12px; -moz-border-radius-bottomleft: 12px; line-height: 150px; padding: 5px;"> <blockquote><span style="font-size: 18px; line-height: normal">ABC</span>
</blockquote></div></td></tr></table></td> <td align="left"><table width=300px align=center><tr><td align="left"><div style="background: #804DA4;-moz-border-radius-topleft: 12px; -moz-border-radius-topright: 12px; -moz-border-radius-bottomright: 12px; -moz-border-radius-bottomleft: 12px; line-height: 150px; padding: 5px;"> <blockquote><span style="font-size: 18px; line-height: normal">DEF</span>
</blockquote></div></td></tr></table></td></tr> <tr><td align="left"><table width=300px align=center><tr><td align="left"><div style="background: #804DA4;-moz-border-radius-topleft: 12px; -moz-border-radius-topright: 12px; -moz-border-radius-bottomright: 12px; -moz-border-radius-bottomleft: 12px; line-height: 150px; padding: 5px;"> <blockquote><span style="font-size: 18px; line-height: normal">GHI</span>
</blockquote></div></td></tr></table> </td> <td align="left"><table width=300px align=center><tr><td align="left"><div style="background: #804DA4;-moz-border-radius-topleft: 12px; -moz-border-radius-topright: 12px; -moz-border-radius-bottomright: 12px; -moz-border-radius-bottomleft: 12px; line-height: 150px; padding: 5px;"> <blockquote><span style="font-size: 18px; line-height: normal">JKL</span> <font color="#FE8D11">★</font> KRISTEN STEWART - <span style="font-size: 9px; line-height: normal"><i>Cassidy M. Delaroche</i></span>
</blockquote></div></td></tr></table></td></tr><tr><td align="left"><table width=300px align=center><tr><td align="left"><div style="background: #804DA4;-moz-border-radius-topleft: 12px; -moz-border-radius-topright: 12px; -moz-border-radius-bottomright: 12px; -moz-border-radius-bottomleft: 12px; line-height: 150px; padding: 5px;"> <blockquote><span style="font-size: 18px; line-height: normal">MNO</span>
</blockquote></div></td></tr></table></td> <td align="left"><table width=300px align=center><tr><td align="left"><div style="background: #804DA4;-moz-border-radius-topleft: 12px; -moz-border-radius-topright: 12px; -moz-border-radius-bottomright: 12px; -moz-border-radius-bottomleft: 12px; line-height: 150px; padding: 5px;"> <blockquote><span style="font-size: 18px; line-height: normal">PQR</span>
</blockquote></div></td></tr></table></td></tr><tr><td align="left"><table width=300px align=center><tr><td align="left"><div style="background: #804DA4;-moz-border-radius-topleft: 12px; -moz-border-radius-topright: 12px; -moz-border-radius-bottomright: 12px; -moz-border-radius-bottomleft: 12px; line-height: 150px; padding: 5px;"> <blockquote><span style="font-size: 18px; line-height: normal">STUV</span>
</blockquote></div></td></tr></table></td> <td align="left"><table width=300px align=center><tr><td align="left"><div style="background: #804DA4;-moz-border-radius-topleft: 12px; -moz-border-radius-topright: 12px; -moz-border-radius-bottomright: 12px; -moz-border-radius-bottomleft: 12px; line-height: 150px; padding: 5px;"> <blockquote><span style="font-size: 18px; line-height: normal">WXYZ</span>
</blockquote></div></td></tr></table></td></tr></table></center>
Plus j'essaie d'arranger les choses, plus ça se détraque. Vous êtes mon dernier espoir, je vous en supplie |
Dernière édition par Katreuh le Ven 02 Juil 2010, 05:46, édité 1 fois | |
| | | Furase
{ Membre actif }
Messages : 312
| Bonjour ! Il me parait bien compliqué pour pas grand-chose ton code... J'ai pas spécialement le temps de m'y plonger, et encore moins l'envie, surtout quand on peut faire la même chose de façon plus simple et plus rapide. Donc ce que je te propose, c'est de faire un tableau tout simple avec un peu de css dedans. Il te suffit de mettre ça dans ton css, en mettant tes valeurs là où j'ai laissé des "trous" (rappel : Panneau d'Administration > Affichage > Couleurs : feuille de style css). N'enlève pas les points virgules quand tu remets tes valeurs... - Code:
-
.avatars { background-color: COULEUR; /* couleur du fond du tableau */ border-style: solid; /* type de la bordure du tableau */ border-width: Ypx; /* épaisseur de la bordure du tableau */ border-color: COULEUR; /* couleur de la bordure du tableau */ }
.avatars td { height: 150px; /* hauteur de la cellule */ width: 300px; /* largeur de la cellule */ vertical-align: top; /* position du texte dans la cellule */ background-color: COULEUR; /* couleur du fond de la cellule */ } Ensuite il te restera à mettre ça dans ton html : - Code:
-
<table cellspacing="5px" class="avatars"> <tr> <td> Cellule 1 </td> <td> Cellule 2 </td> </tr> </table> Tu peux bien sûr mettre autant de cellules que tu veux sur la ligne (entre les tr), et autant de lignes que tu veux (tout ce qui est entre tr et /tr). Ne te restera plus qu'à taper ton texte... Note que comme c'est pour mettre dans un message, il faudra que tu remettes toutes les balises à la suite sans sauter de lignes, si non tu auras un décalage en haut du sujet. Fu' | | |
| | | Katreuh
{ Membre }
Messages : 16
| Merci beaucoup Furase. Oui, le code était compliqué pour pas grand chose, mais quand tu n'y connais rien, c'est souvent comme ça, tu te compliques la tâche naturellement.
J'actualise le sujet en résolu. Merci encore. | | |
| | | Furase
{ Membre actif }
Messages : 312
| Re bonjour ^^ J'ai donné l'explication de ce souci dans mon message précédent. Pour supprimer ce décalage, il faut "compacter" le code html et écrire toutes les balises sur la même ligne. C'est assez pénible, surtout quand il faut ensuite modifier le code, donc je te conseille d'enregistrer le code version "non compactée" quelque part et de l'utiliser pour faire tes modifications. Pour compacter le code, je te conseille d'aller jeter un oeil sur ce sujet qui présente un outil très pratique. Fu' EDIT : ha je vois que tu as édité avant que je poste. Je classe | | |
| | | Katreuh
{ Membre }
Messages : 16
| Oui, je m'en suis rendue compte avant que tu ne me le rappelles et du coup j'ai édité. Mais merci quand même et très bonne journée à toi ^^. | | |
| | | Contenu sponsorisé
| | | | | Problème présentation HTML | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|
|