CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: ![CSSActif](https://cssactif.com/cssactif-logo-old.svg) Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! | | Addiction ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 125
![Quel est ce code ? Empty](https://2img.net/i/fa/empty.gif) | 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. ![Smile](https://2img.net/i/fa/i/smiles/icon_smile.gif) 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"> ![:spades: ♠️](https://cdn.jsdelivr.net/emojione/assets/png/2660.png?v=2.2.7) 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"> ![:spades: ♠️](https://cdn.jsdelivr.net/emojione/assets/png/2660.png?v=2.2.7) navigation rapide </option> <option value="http://coconut-studfarm.forumactif.com/le-grimoire-f1/" target="_blank"> ![:spades: ♠️](https://cdn.jsdelivr.net/emojione/assets/png/2660.png?v=2.2.7) règlement </option> <option value="http://coconut-studfarm.forumactif.com/les-inscriptions-f3/" target="_blank"> ![:spades: ♠️](https://cdn.jsdelivr.net/emojione/assets/png/2660.png?v=2.2.7) inscriptions </option> <option value="http://coconut-studfarm.forumactif.com/les-nouvelles-f4/" target="_blank"> ![:spades: ♠️](https://cdn.jsdelivr.net/emojione/assets/png/2660.png?v=2.2.7) les nouveautés </option> <option value="http://coconut-studfarm.forumactif.com/coconut-breeder-f29/" target="_blank"> ![:spades: ♠️](https://cdn.jsdelivr.net/emojione/assets/png/2660.png?v=2.2.7) 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"> ![:spades: ♠️](https://cdn.jsdelivr.net/emojione/assets/png/2660.png?v=2.2.7) é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 | |
| ![Aller en bas](https://2img.net/i/empty.gif) | | Air. ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 221
![Quel est ce code ? Empty](https://2img.net/i/fa/empty.gif) | 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 /> | | |
| ![Aller en bas](https://2img.net/i/empty.gif) | | Addiction ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 125
![Quel est ce code ? Empty](https://2img.net/i/fa/empty.gif) | Oui, HTML ! j'ai tapé vite sans faire attention... xD Merci ! ![Smile](https://2img.net/i/fa/i/smiles/icon_smile.gif) 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 ! ![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png) Et en dernier, c'est normal qu'il soit collé à la marge de droite ? Si on sait régler ça.... =) | | |
| ![Aller en bas](https://2img.net/i/empty.gif) | | Air. ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 221
![Quel est ce code ? Empty](https://2img.net/i/fa/empty.gif) | 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) | | |
| ![Aller en bas](https://2img.net/i/empty.gif) | | Addiction ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 125
![Quel est ce code ? Empty](https://2img.net/i/fa/empty.gif) | Bah, au moins, j'ai une colonne ! xD Je n'arrivais à rien faire avant... (a) Merci. ![Smile](https://2img.net/i/fa/i/smiles/icon_smile.gif) | | |
| ![Aller en bas](https://2img.net/i/empty.gif) | | Air. ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 221
![Quel est ce code ? Empty](https://2img.net/i/fa/empty.gif) | 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"> ![:spades: ♠️](https://cdn.jsdelivr.net/emojione/assets/png/2660.png?v=2.2.7) partenaires</option> </select> </form> <form><select style="width: 150px;" onchange="window.open(this.options[this.selectedIndex].value)"> <option selected="selected"> ![:spades: ♠️](https://cdn.jsdelivr.net/emojione/assets/png/2660.png?v=2.2.7) navigation rapide</option> <option value="http://coconut-studfarm.forumactif.com/le-grimoire-f1/" target="_blank"> ![:spades: ♠️](https://cdn.jsdelivr.net/emojione/assets/png/2660.png?v=2.2.7) règlement</option> <option value="http://coconut-studfarm.forumactif.com/les-inscriptions-f3/" target="_blank"> ![:spades: ♠️](https://cdn.jsdelivr.net/emojione/assets/png/2660.png?v=2.2.7) inscriptions</option> <option value="http://coconut-studfarm.forumactif.com/les-nouvelles-f4/" target="_blank"> ![:spades: ♠️](https://cdn.jsdelivr.net/emojione/assets/png/2660.png?v=2.2.7) les nouveautés</option> <option value="http://coconut-studfarm.forumactif.com/coconut-breeder-f29/" target="_blank"> ![:spades: ♠️](https://cdn.jsdelivr.net/emojione/assets/png/2660.png?v=2.2.7) chevaux</option> </select> </form> <form> <select style="width: 150px;" onchange="window.open(this.options[this.selectedIndex].value)"> <option selected="selected"> ![:spades: ♠️](https://cdn.jsdelivr.net/emojione/assets/png/2660.png?v=2.2.7) é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 ![Wink](https://2img.net/i/fa/i/smiles/icon_wink.gif) 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 ^^ | | |
| ![Aller en bas](https://2img.net/i/empty.gif) | | Addiction ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 125
![Quel est ce code ? Empty](https://2img.net/i/fa/empty.gif) | Ah, merci ! ![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png) 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. ![Razz](https://2img.net/i/fa/i/smiles/icon_razz.gif) J'ai réussi à le centrer, mais je n'arrive pas à le mettre plus haut. =\ | | |
| ![Aller en bas](https://2img.net/i/empty.gif) | | Air. ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 221
![Quel est ce code ? Empty](https://2img.net/i/fa/empty.gif) | *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 (: | | |
| ![Aller en bas](https://2img.net/i/empty.gif) | | Addiction ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 125
![Quel est ce code ? Empty](https://2img.net/i/fa/empty.gif) | Non non, en fait, ce que je veux, c'est
[Titre
Texte]
J'essaie quand même le code que tu m'as donné. ![Smile](https://2img.net/i/fa/i/smiles/icon_smile.gif) | | |
| ![Aller en bas](https://2img.net/i/empty.gif) | | Air. ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 221
![Quel est ce code ? Empty](https://2img.net/i/fa/empty.gif) | Ah o: Ben tu déplaces le début de la div (<div style="border:3px solid #00CCFF;">) avant le titre alors ^-^ | | |
| ![Aller en bas](https://2img.net/i/empty.gif) | | Addiction ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 125
![Quel est ce code ? Empty](https://2img.net/i/fa/empty.gif) | Oui, j'ai trouvé avant que tu ne répondes ! (mouahaha, je m'améliore ! xD) Merci beaucoup ! ![Razz](https://2img.net/i/fa/i/smiles/icon_razz.gif) | | |
| ![Aller en bas](https://2img.net/i/empty.gif) | | Kimy ![{ Membre actif } { Membre actif }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre actif }
Messages : 1190
![Quel est ce code ? Empty](https://2img.net/i/fa/empty.gif) | Le problème est résolu ? ^^ | | |
| ![Aller en bas](https://2img.net/i/empty.gif) | | Addiction ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 125
![Quel est ce code ? Empty](https://2img.net/i/fa/empty.gif) | Yes ! ![Smile](https://2img.net/i/fa/i/smiles/icon_smile.gif) | | |
| ![Aller en bas](https://2img.net/i/empty.gif) | | Kaiji ![Blanche-Neige Blanche-Neige](https://2img.net/h/cssactif.com/files/rangs/chouchou.png)
Blanche-Neige
Messages : 5578
![Quel est ce code ? Empty](https://2img.net/i/fa/empty.gif) | Je classe ![Wink](https://2img.net/i/fa/i/smiles/icon_wink.gif) | | |
| ![Aller en bas](https://2img.net/i/empty.gif) | | Contenu sponsorisé
![Quel est ce code ? Empty](https://2img.net/i/fa/empty.gif) | | ![Aller en bas](https://2img.net/i/empty.gif) | | |
Sujets similaires | ![+](https://2img.net/i/empty.gif) |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|