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! |
|  Addiction 
{ Membre }
 Messages : 125
 | Bonjour, en ce moment, la page d'accueil de mon forum est ainsi (voir image 1), et j'aimerais ajouter un code qui me permette de mettre un cadre sur le droite (voir image 2).
Quel est ce code ? Quand j'essaie de chipoter un peu, ça ne m'aide pas du tout, je fais n'importe quoi et ça déforme tout. Merci de m'aider. 
PS : c'est parce que les commandes sont souvent fermées (max atteint) que je le fais toute seule. x)
image 1 : https://i.servimg.com/u/f38/12/58/30/54/aide_f10.jpg
image 2 : https://i.servimg.com/u/f38/12/58/30/54/aide_f11.jpg
code css :
- Code:
-
<div style="text-align: center;"><img src="http://i37.servimg.com/u/f37/15/27/76/77/messag13.jpg" alt="" border="0"><br></div><div style="margin-left: 40px;"><br></div><table style="margin-left: 40px;"><tbody><tr><td width="30%"><img src="http://i37.servimg.com/u/f37/15/27/76/77/photo_12.jpg"></td><td width="70%"><br><br><br><form style="margin-left: 40px;"> <select style="width: 150px;" onchange="window.open(this.options[this.selectedIndex].value)"> <option selected="selected">  partenaires </option> </select> </form> <br> <form style="margin-left: 40px;"><select style="width: 150px;" onchange="window.open(this.options[this.selectedIndex].value)"> <option selected="selected"> navigation rapide </option> <option value="http://coconut-studfarm.forumactif.com/le-grimoire-f1/" target="_blank"> règlement </option> <option value="http://coconut-studfarm.forumactif.com/les-inscriptions-f3/" target="_blank"> inscriptions </option> <option value="http://coconut-studfarm.forumactif.com/les-nouvelles-f4/" target="_blank"> les nouveautés </option> <option value="http://coconut-studfarm.forumactif.com/coconut-breeder-f29/" target="_blank"> chevaux </option> </select> </form><br> <form style="margin-left: 40px;"> <select style="width: 150px;" onchange="window.open(this.options[this.selectedIndex].value)"> <option selected="selected"> évènements </option> </select> </form> <br> <div style="margin-left: 40px;"><font size="1">Coconut Stud Farm, un nom assez bizarre, mais un concept agréable. Ce forum est une écurie virtuelle, où tu pourras jouer ton propre rôle, avoir tes chevaux et créer un élevage. Petit à petit, à force de participer aux concours, le palmarès de tes chevaux grandira et tu gagneras de la popularité parmi les autres éleveurs. De plus, tes chevaux ont ce qu'on appelle de l'excellence. Il peuvent avoir jusqu'à 5 étoiles, tout comme ton élevage, sauf qu'on l'appelle le prestige. Tu l'auras compris, ce forum est rempli de belles surprises, tout en restant simple, et aussi chaleureux que les anciennes écuries virtuelles. Qu'attends-tu pour nous rejoindre ?</font></div></td></tr></tbody></table><br><br><br> |
Dernière édition par Addiction le Sam 28 Aoû 2010, 14:08, édité 1 fois | |
|  | | Air.
{ Membre }
 Messages : 221
| C'est pas le code CSS c'est le code HTML ça XD (mais tant mieux vu qu'on n'a pas besoin du code CSS =D). J'suis pas douée avec les tableaux mais je crois que j'ai réussi : - Code:
-
<div style="text-align: center;"> <img src="http://i37.servimg.com/u/f37/15/27/76/77/messag13.jpg" alt="" border="0" /><br /></div><div style="margin-left:40px;" /> <br /> </div> <table style="margin-left:40px;"> <tbody> <tr> <td width="30%" rowspan="2"> <img src="http://i37.servimg.com/u/f37/15/27/76/77/photo_12.jpg" /> </td> <td valign="middle"> <form style="margin-left:40px;"> <select style="width:150px;" onchange="window.open(this.options[this.selectedIndex].value)"> <option selected="selected">♠ partenaires</option> </select> </form> <br /> <form style="margin-left: 40px;"><select style="width: 150px;" onchange="window.open(this.options[this.selectedIndex].value)"> <option selected="selected">♠ navigation rapide</option> <option value="http://coconut-studfarm.forumactif.com/le-grimoire-f1/" target="_blank">♠ règlement</option> <option value="http://coconut-studfarm.forumactif.com/les-inscriptions-f3/" target="_blank">♠ inscriptions</option> <option value="http://coconut-studfarm.forumactif.com/les-nouvelles-f4/" target="_blank">♠ les nouveautés</option> <option value="http://coconut-studfarm.forumactif.com/coconut-breeder-f29/" target="_blank">♠ chevaux</option> </select> </form> <br /> <form style="margin-left: 40px;"> <select style="width: 150px;" onchange="window.open(this.options[this.selectedIndex].value)"> <option selected="selected">♠ évènements</option> </select> </form> </td> <td> ÉVÈNEMENTS DU MOMENT </td> </tr> <tr> <td> <div style="margin-left:40px;"> <font size="1"> Coconut Stud Farm, un nom assez bizarre, mais un concept agréable. Ce forum est une écurie virtuelle, où tu pourras jouer ton propre rôle, avoir tes chevaux et créer un élevage. Petit à petit, à force de participer aux concours, le palmarès de tes chevaux grandira et tu gagneras de la popularité parmi les autres éleveurs. De plus, tes chevaux ont ce qu'on appelle de l'excellence. Il peuvent avoir jusqu'à 5 étoiles, tout comme ton élevage, sauf qu'on l'appelle le prestige. Tu l'auras compris, ce forum est rempli de belles surprises, tout en restant simple, et aussi chaleureux que les anciennes écuries virtuelles. Qu'attends-tu pour nous rejoindre ? </font> </div> </td> </tr> </tbody> </table> <br /><br /><br /> | | |
| | | | Addiction
{ Membre }
Messages : 125
| Oui, HTML ! j'ai tapé vite sans faire attention... xD
Merci !
Donc, pour l'endroit, c'est bon, mais j'aimerais avoir un cadre autour aussi. x) et pas en rouge, mais en bleu, mais ça, je m'arrangerais ! 
Et en dernier, c'est normal qu'il soit collé à la marge de droite ? Si on sait régler ça.... =) | | |
| | | | Air.
{ Membre }
Messages : 221
| Oui (non, en fait je sais pas je me posais aussi la question XD).
Non en fait j'me suis trompée dans le code ;A; J'vais le recommencer en entier n_n Ca a pas fait ce que tu voulais en fait ça a juste rajouté une colonne = = *se repenche sur le problème*. J'éditerai quand j'aurai trouvé (ou non) | | |
| | | | Addiction
{ Membre }
Messages : 125
| Bah, au moins, j'ai une colonne ! xD
Je n'arrivais à rien faire avant... (a)
Merci. | | |
| | | | Air.
{ Membre }
Messages : 221
| Ah ben j'ai déjà trouvé, il manquait un colspan au dernier td =D - Code:
-
<div style="text-align: center;"> <img src="http://i37.servimg.com/u/f37/15/27/76/77/messag13.jpg" alt="" border="0" /> </div><div style="margin-left:40px;" /> </div> <table style="margin-left:40px;"> <tbody> <tr> <td width="30%" rowspan="2"> <img src="http://i37.servimg.com/u/f37/15/27/76/77/photo_12.jpg" /> </td> <td valign="middle" style="padding-left:40px;"> <form> <select style="width:150px;" onchange="window.open(this.options[this.selectedIndex].value)"> <option selected="selected"> partenaires</option> </select> </form> <form><select style="width: 150px;" onchange="window.open(this.options[this.selectedIndex].value)"> <option selected="selected"> navigation rapide</option> <option value="http://coconut-studfarm.forumactif.com/le-grimoire-f1/" target="_blank"> règlement</option> <option value="http://coconut-studfarm.forumactif.com/les-inscriptions-f3/" target="_blank"> inscriptions</option> <option value="http://coconut-studfarm.forumactif.com/les-nouvelles-f4/" target="_blank"> les nouveautés</option> <option value="http://coconut-studfarm.forumactif.com/coconut-breeder-f29/" target="_blank"> chevaux</option> </select> </form> <form> <select style="width: 150px;" onchange="window.open(this.options[this.selectedIndex].value)"> <option selected="selected"> évènements</option> </select> </form> </td> <td valign="middle" style="border:3px solid #00CCFF;"> ÉVÈNEMENTS DU MOMENT </td> </tr> <tr> <td colspan="2"> <div style="margin-left:40px;"> <font size="1"> Coconut Stud Farm, un nom assez bizarre, mais un concept agréable. Ce forum est une écurie virtuelle, où tu pourras jouer ton propre rôle, avoir tes chevaux et créer un élevage. Petit à petit, à force de participer aux concours, le palmarès de tes chevaux grandira et tu gagneras de la popularité parmi les autres éleveurs. De plus, tes chevaux ont ce qu'on appelle de l'excellence. Il peuvent avoir jusqu'à 5 étoiles, tout comme ton élevage, sauf qu'on l'appelle le prestige. Tu l'auras compris, ce forum est rempli de belles surprises, tout en restant simple, et aussi chaleureux que les anciennes écuries virtuelles. Qu'attends-tu pour nous rejoindre ? </font> </div> </td> </tr> </tbody> </table> J'ai mis un bleu au pif à toi de changer  Par contre je l'ai mis sur la cellule, si tu veux pas que ça prenne toute la cellule tu entoures les évènements d'une div avec le contour ^^ | | |
| | | | Addiction
{ Membre }
Messages : 125
| Ah, merci !
Tu vas me prendre pour une difficile, mais... x)
J'aimerais bien que le cadre soit un peu plus à gauche, un peu plus haut, et que le texte soit en fait un titre, donc, centré, et au-dessus. 
J'ai réussi à le centrer, mais je n'arrive pas à le mettre plus haut. =\ | | |
| | | | Air.
{ Membre }
Messages : 221
| *relis tout le message encore une fois* Ah donc tu veux cette structure : TITRE [TEXTE] les crochets représentant le cadre. Ah ben c'est comme j'ai dit faut entourer le texte d'une div (avec la bordure) au lieu de mettre la bordure à la cellule ^^ Si le texte est "bas" c'est parce que j'ai mis valign="center" à la cellule, c'est-à-dire que le texte est centré verticalement (d'où le v à valign). J'ai mis valign="top" mais à toi de régler la marge pour que ça soit à la hauteur que tu veux (je te la mets en gras tu verras mieux). - Citation :
- <div style="text-align: center;">
<img src="https://i.servimg.com/u/f37/15/27/76/77/messag13.jpg" alt="" border="0" /><br /></div><div style="margin-left:40px;" />
<br />
</div>
<table style="margin-left:40px;">
<tbody>
<tr>
<td width="30%" rowspan="2">
<img src="https://i.servimg.com/u/f37/15/27/76/77/photo_12.jpg" />
</td>
<td valign="middle" style="padding-left:40px;" width="160px">
<form>
<select style="width:150px;" onchange="window.open(this.options[this.selectedIndex].value)">
<option selected="selected">♠ partenaires</option>
</select>
</form>
<br />
<form><select style="width: 150px;" onchange="window.open(this.options[this.selectedIndex].value)">
<option selected="selected">♠ navigation rapide</option>
<option value="http://coconut-studfarm.forumactif.com/le-grimoire-f1/" target="_blank">♠ règlement</option>
<option value="http://coconut-studfarm.forumactif.com/les-inscriptions-f3/" target="_blank">♠ inscriptions</option>
<option value="http://coconut-studfarm.forumactif.com/les-nouvelles-f4/" target="_blank">♠ les nouveautés</option>
<option value="http://coconut-studfarm.forumactif.com/coconut-breeder-f29/" target="_blank">♠ chevaux</option>
</select>
</form>
<br />
<form>
<select style="width: 150px;" onchange="window.open(this.options[this.selectedIndex].value)">
<option selected="selected">♠ évènements</option>
</select>
</form>
</td>
<td valign="top" style="padding-top:30px;">
<center>ÉVÈNEMENTS DU MOMENT</center>
<div style="border:3px solid #00CCFF;">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">
<div style="margin-left:40px;">
<font size="1">
Coconut Stud Farm, un nom assez bizarre, mais un concept agréable. Ce forum est une écurie virtuelle, où tu pourras jouer ton propre rôle, avoir tes chevaux et créer un élevage. Petit à petit, à force de participer aux concours, le palmarès de tes chevaux grandira et tu gagneras de la popularité parmi les autres éleveurs. De plus, tes chevaux ont ce qu'on appelle de l'excellence. Il peuvent avoir jusqu'à 5 étoiles, tout comme ton élevage, sauf qu'on l'appelle le prestige. Tu l'auras compris, ce forum est rempli de belles surprises, tout en restant simple, et aussi chaleureux que les anciennes écuries virtuelles. Qu'attends-tu pour nous rejoindre ?
</font>
</div>
</td>
</tr>
</tbody>
</table>
<br /><br /><br /> Maintenant si les espaces te plaisent toujours pas tu dois jouer avec les padding (: | | |
| | | | Addiction
{ Membre }
Messages : 125
| Non non, en fait, ce que je veux, c'est
[Titre
Texte]
J'essaie quand même le code que tu m'as donné. | | |
| | | | Air.
{ Membre }
Messages : 221
| Ah o: Ben tu déplaces le début de la div (<div style="border:3px solid #00CCFF;">) avant le titre alors ^-^ | | |
| | | | Addiction
{ Membre }
Messages : 125
| Oui, j'ai trouvé avant que tu ne répondes ! (mouahaha, je m'améliore ! xD)
Merci beaucoup ! | | |
| | | | Kimy
{ Membre actif }
Messages : 1190
| Le problème est résolu ? ^^ | | |
| | | | Addiction
{ Membre }
Messages : 125
| Yes ! | | |
| | | | Kaiji 
Blanche-Neige
Messages : 5578
| Je classe | | |
| | | | Contenu sponsorisé
| | | | | |
Sujets similaires | |
|
| | Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|
