Mon tableau. Bouton_activeMon tableau. Bouton_hoverMon tableau. Fb-hoverMon tableau. Fb-active
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!

Derniers sujets
» Système d'onglets simple et personnalisable
Mon tableau. EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Mon tableau. EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Mon tableau. EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Mon tableau. EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Mon tableau. EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Mon tableau. EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Mon tableau. EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Mon tableau. EmptySam 11 Fév 2023, 06:04 par Krager

Le deal à ne pas rater :
Boutique Nike : -25% dès 50€ sur TOUT le site Nike avec le code ...
Voir le deal

Partagez
 

Mon tableau.

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://coconut-studfarm.forumactif.com
Addiction
Addiction
{ Membre }
{ Membre }

Féminin Messages : 125



Mon tableau. Empty
Bonjour tout le monde ! J'ai un petit souci de tableau. J'aimerais écrire mon texte à côté des tops-sites dans une autre colonne, mais quand j'en fais une, ou que j'essaie du moins, ça déforme tout. Voilà où je désire écrire :

https://i.servimg.com/u/f68/12/58/30/54/page_d11.jpg

Et voici mon code :

Code:
<br><br><div style="margin:auto;text-align:center;width:100%"><span class=grandtitre>Bienvenue sur Peppermint Grassland</span></div>
<br><br><br>
<span class=images style="width: 299px;"><img src="http://i64.servimg.com/u/f64/15/84/90/71/snow10.jpg" border="0" alt="" /></span>
<br>
<br><br>
<br>
<br><br>
<table border="0" cellpadding="5" cellspacing="3" width="100%"><tr><td align="left" width="33%"><div class=fiche>Nouveautés</div></td><td align="left" width="33%"><div class=fiche>Présentation</div></td><td align="left" width="33%"><div class=fiche>Liens</div></td></tr></table><table border="0" cellpadding="5" cellspacing="3" width="100%"><tr><td align="left" width="33%"><span class=texte>
Le forum a ouvert ses portes le 24 décembre 2010. Nous vous souhaitons un joyeux Noël et prévoyons quelques activités à l'occasion. N'hésitez pas à vous inscrire et à donner votre avis. </span><br><div class=fiche>Météo</div>
<br><center>
<img src="http://i64.servimg.com/u/f64/15/84/90/71/neige10.png"><br>
<br><div style="margin:auto;text-align:justify;">Il neige ! Mouahaha. ♥️ Les températures vont jusqu'à -7°C la nuit et 0°C le jour. Les plaques de verglas sont fréquentes, mettez du sel ! :)</div></center>

</td><td align="left" width="33%">
<span class=texte><div class=defilement>Peppermint Grassland est une écurie virtuelle où tu pourras acquérir ton propre cheval et t'en occuper comme dans la réalité. Il y aura toujours quelques imprévus afin que le jeu se rapproche le plus possible de la réalité. Et évidemment, c'est la crise pour tout le monde ! Tu devras pratiquer un métier pour gagner un salaire et avancer dans le jeu. Ton but sera d'élever des chevaux et de monter sur le podium lors des concours. Ta tâche sera dure à réaliser vu le nombre de cavaliers qui ont le même but que toi, ainsi que les nombreux obstacles qui se mettront en travers de ton chemin. Bonne chance à toi !
</div>
</span>
<br><span class=texte><center>
Toute reproduction partielle ou totale interdite.
Veuillez respecter notre travail s'il vous plaît. ♥️</center>
</span>

</td><td align="left" width="33%">
<span class=texte>
<form>
<select style="width: 180px;" onchange="location = this.options
[this.selectedIndex].value">
<option selected="selected">
Nos partenaires
</option>


<option value="url1-de-renvoi">
Partenaire 1
</option>

 <option value="url2-de-renvoi">
Partenaire 2
</option>

<option value="url3-de-renvoi">
Partenaire 3
</option>

<option value="url4-de-renvoi">
Partenaire 4
</option>



</select>
</form>
<br><br>

<img src="http://i66.servimg.com/u/f66/15/96/58/55/_snowm10.gif"> <img src="http://i66.servimg.com/u/f66/15/96/58/55/_snowm10.gif"><br>
<img src="http://i66.servimg.com/u/f66/15/96/58/55/_snowm10.gif"> <img src="http://i66.servimg.com/u/f66/15/96/58/55/_snowm10.gif"><br>
</span><br>

<span class="fiche">Staff</span>
<br>
<span class=texte>Fondatrice : Luciole.<br>
Co-Fondatrice : Eterny.
<br>
</span>
</td></tr></table>
<br><br><br>


Voilà, j'espère que vous saurez m'aider ! et merci de m'avoir lue. ♥️ Smile
MessageSujet: Mon tableau.   Mon tableau. EmptyJeu 16 Déc 2010, 12:40
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Mon tableau. Empty
Bonjour.

Ton code m'a l'air de ne pas comporter d'erreur. Par contre pour faciliter la lecture, je te conseille de décaler les blocs. On appelle ça indenter le code. Je l'ai fait avec le tient pour pouvoir le lire. En même temps j'y ai ajouté les guillemets manquants : n'oublie pas d'en mettre autour du nom de tes classes.

Code:

<br><br>
<div style="margin:auto;text-align:center;width:100%"><span class="grandtitre">Bienvenue sur Peppermint Grassland</span></div>
<br>
<br>
<br>
<span class="images" style="width: 299px;"><img src="http://i64.servimg.com/u/f64/15/84/90/71/snow10.jpg" border="0" alt="" /></span>
<br>
<br>
<br>
<br>
<br>
<br>
<table border="0" cellpadding="5" cellspacing="3" width="100%">
   <tr>
      <td align="left" width="33%">
         <div class="fiche">Nouveautés</div>
      </td>
      
      <td align="left" width="33%">
         <div class="fiche">Présentation</div>
      </td>
      
      <td align="left" width="33%">
         <div class=fiche>Liens</div>
      </td>
   </tr>
</table>

<table border="0" cellpadding="5" cellspacing="3" width="100%">
   <tr>
      <td align="left" width="33%">
         <span class="texte">
            Le forum a ouvert ses portes le 24 décembre 2010. Nous vous souhaitons
            un joyeux Noël et prévoyons quelques activités à l'occasion. N'hésitez
            pas à vous inscrire et à donner votre avis.
         </span>
         <br>
         <div class="fiche">Météo</div>
         <br>
         <center>
            <img src="http://i64.servimg.com/u/f64/15/84/90/71/neige10.png" />
            <br>
            <br>
            <div style="margin:auto;text-align:justify;">
               Il neige ! Mouahaha. ? Les températures vont jusqu'à -7°C la nuit et
               0°C le jour. Les plaques de verglas sont fréquentes, mettez du sel ! :)
            </div>
         </center>
      </td>
      
      <td align="left" width="33%">
         <span class="texte">
            <div class="defilement">
               Peppermint Grassland est une écurie virtuelle où tu pourras acquérir
               ton propre cheval et t'en occuper comme dans la réalité. Il y aura
               toujours quelques imprévus afin que le jeu se rapproche le plus
               possible de la réalité. Et évidemment, c'est la crise pour tout le
               monde ! Tu devras pratiquer un métier pour gagner un salaire et
               avancer dans le jeu. Ton but sera d'élever des chevaux et de monter
               sur le podium lors des concours. Ta tâche sera dure à réaliser vu
               le nombre de cavaliers qui ont le même but que toi, ainsi que les
               nombreux obstacles qui se mettront en travers de ton chemin. Bonne
               chance à toi !
            </div>
         </span>
         <br>
         <span class="texte">
            <center>
               Toute reproduction partielle ou totale interdite.
               Veuillez respecter notre travail s'il vous plaît. ?
            </center>
         </span>
      </td>
      
      <td align="left" width="33%">
         <span class="texte">
            <form>
               <select style="width: 180px;" onchange="location = this.options
                  [this.selectedIndex].value">
                  <option selected="selected">Nos partenaires</option>
                  <option value="url1-de-renvoi">Partenaire 1</option>
                  <option value="url2-de-renvoi">Partenaire 2</option>
                  <option value="url3-de-renvoi">Partenaire 3</option>
                  <option value="url4-de-renvoi">Partenaire 4</option>
               </select>
            </form>
            <br>
            <br>
            <img src="http://i66.servimg.com/u/f66/15/96/58/55/_snowm10.gif" />
            <img src="http://i66.servimg.com/u/f66/15/96/58/55/_snowm10.gif" /><br>
            <img src="http://i66.servimg.com/u/f66/15/96/58/55/_snowm10.gif" />
            <img src="http://i66.servimg.com/u/f66/15/96/58/55/_snowm10.gif" /><br>
         </span>
         <br>

         <span class="fiche">Staff</span>
         <br>
         <span class="texte">
            Fondatrice : Luciole.<br>
            Co-Fondatrice : Eterny.<br>
         </span>
      </td>
   </tr>
</table>
<br><br><br>


Pour écrire sur deux colonnes, il y a plusieurs solutions. Soit tu mets tes images dans la cellule d'un tableau, et ton texte sera dans une autre, soit tu utilises la propriété float du css en mettant tes images dans un bloc (div ou p) et ton texte dans un autre.
Le plus simple est d'utiliser un tableau.

Code:

<br><br>
<div style="margin:auto;text-align:center;width:100%"><span class="grandtitre">Bienvenue sur Peppermint Grassland</span></div>
<br>
<br>
<br>
<span class="images" style="width: 299px;"><img src="http://i64.servimg.com/u/f64/15/84/90/71/snow10.jpg" border="0" alt="" /></span>
<br>
<br>
<br>
<br>
<br>
<br>
<table border="0" cellpadding="5" cellspacing="3" width="100%">
   <tr>
      <td align="left" width="33%">
         <div class="fiche">Nouveautés</div>
      </td>
      
      <td align="left" width="33%">
         <div class="fiche">Présentation</div>
      </td>
      
      <td align="left" width="33%">
         <div class=fiche>Liens</div>
      </td>
   </tr>
</table>

<table border="0" cellpadding="5" cellspacing="3" width="100%">
   <tr>
      <td align="left" width="33%">
         <span class="texte">
            Le forum a ouvert ses portes le 24 décembre 2010. Nous vous souhaitons
            un joyeux Noël et prévoyons quelques activités à l'occasion. N'hésitez
            pas à vous inscrire et à donner votre avis.
         </span>
         <br>
         <div class="fiche">Météo</div>
         <br>
         <center>
            <img src="http://i64.servimg.com/u/f64/15/84/90/71/neige10.png" />
            <br>
            <br>
            <div style="margin:auto;text-align:justify;">
               Il neige ! Mouahaha. ? Les températures vont jusqu'à -7°C la nuit et
               0°C le jour. Les plaques de verglas sont fréquentes, mettez du sel ! :)
            </div>
         </center>
      </td>
      
      <td align="left" width="33%">
         <span class="texte">
            <div class="defilement">
               Peppermint Grassland est une écurie virtuelle où tu pourras acquérir
               ton propre cheval et t'en occuper comme dans la réalité. Il y aura
               toujours quelques imprévus afin que le jeu se rapproche le plus
               possible de la réalité. Et évidemment, c'est la crise pour tout le
               monde ! Tu devras pratiquer un métier pour gagner un salaire et
               avancer dans le jeu. Ton but sera d'élever des chevaux et de monter
               sur le podium lors des concours. Ta tâche sera dure à réaliser vu
               le nombre de cavaliers qui ont le même but que toi, ainsi que les
               nombreux obstacles qui se mettront en travers de ton chemin. Bonne
               chance à toi !
            </div>
         </span>
         <br>
         <span class="texte">
            <center>
               Toute reproduction partielle ou totale interdite.
               Veuillez respecter notre travail s'il vous plaît. ?
            </center>
         </span>
      </td>
      
      <td align="left" width="33%">
         <span class="texte">
            <form>
               <select style="width: 180px;" onchange="location = this.options
                  [this.selectedIndex].value">
                  <option selected="selected">Nos partenaires</option>
                  <option value="url1-de-renvoi">Partenaire 1</option>
                  <option value="url2-de-renvoi">Partenaire 2</option>
                  <option value="url3-de-renvoi">Partenaire 3</option>
                  <option value="url4-de-renvoi">Partenaire 4</option>
               </select>
            </form>
            <br>
            <br>
            <table width="100%">
               <tr>
                  <td style="width: 111px; text-align: center;">
                     <img src="http://i66.servimg.com/u/f66/15/96/58/55/_snowm10.gif" />
                     <img src="http://i66.servimg.com/u/f66/15/96/58/55/_snowm10.gif" /><br>
                     <img src="http://i66.servimg.com/u/f66/15/96/58/55/_snowm10.gif" />
                     <img src="http://i66.servimg.com/u/f66/15/96/58/55/_snowm10.gif" /><br>
                  </td>
                  <td>
                     texte ici
                  </td>
               </tr>
            </table>
         </span>
         <br>

         <span class="fiche">Staff</span>
         <br>
         <span class="texte">
            Fondatrice : Luciole.<br>
            Co-Fondatrice : Eterny.<br>
         </span>
      </td>
   </tr>
</table>
<br><br><br>


Par contre dans ton code tu as beaucoup utilisé span.
span est une balise dite in-line, c'est-à-dire en ligne. Elle ne sert pas à délimiter un cadre.
div est une balise de type block. Elle créé un bloc dont on peut choisir les dimensions, et qu'on peut représenter par un cadre.

effet de span :
texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte

Code:

texte texte <span style="background-color: white; color: black; border: solid 1px black;">texte texte texte texte texte texte texte texte</span> texte texte texte texte texte texte

effet de div :
texte texte
texte texte texte texte texte texte texte texte
texte texte texte texte texte texte

Code:

texte texte <div style="background-color: white; color: black; border: solid 1px black;">texte texte texte texte texte texte texte texte</div> texte texte texte texte texte texte

A certains endroits de ton code, il aurait été plus judicieux d'utiliser des div plutôt que des span. Par exemple pour faire chacun de tes cadres.


Je n'ai pas ton css, je n'ai donc pas pu tester ton code en entier. Si tu as encore des soucis avec, ou des questions sur ce que j'ai dit, n'hésite pas !

Fu'
MessageSujet: Re: Mon tableau.   Mon tableau. EmptyVen 17 Déc 2010, 06:09
Revenir en haut Aller en bas
http://coconut-studfarm.forumactif.com
Addiction
Addiction
{ Membre }
{ Membre }

Féminin Messages : 125



Mon tableau. Empty
Woaw, merci beaucoup !

Déjà, merci pour le code, c'est déjà plus clair et en plus, correct.
Et merci aussi pour les conseils. J'ai mis des DIV partout et la page est plus jolie. Elle ne change pas énormément, mais les cellules sont alignées, c'est plus présentable.

Donc, un grand merci ! Very Happy
MessageSujet: Re: Mon tableau.   Mon tableau. EmptyVen 17 Déc 2010, 09:33
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Mon tableau. Empty
Pas de problème.

Je classe Wink
MessageSujet: Re: Mon tableau.   Mon tableau. EmptySam 18 Déc 2010, 04:38
Revenir en haut Aller en bas
Contenu sponsorisé




Mon tableau. Empty
MessageSujet: Re: Mon tableau.   Mon tableau. Empty
Revenir en haut Aller en bas
 

Mon tableau.

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Décorer un tableau
» Tableau
» C'est encore moi ! x) (tableau)
» Tableau
» Tableau

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit