Sujets similaires

Bonjour =)
J'ai rencontré un petit problème tout à l'heure. Je désire faire une page d'accueil pour mon forum.
Heureusement que j'ai commencé la page d'accueil sur le forum test ^^
Voici le lien : http://dog-cat.goodforum.net/index.htm

En fait, j'aimerais que les trois tableaux (Partenaires ; Annonces ; Nos logos) soient espacés. Parce que là, ils sont collés =/
Et puis il faudrait aussi que les bordures ne soient pas doubles.

J'utilise Internet Explorer ;D
Et voici le code :

Code:: <br><DIV id=navigation>
<UL>
<LI><A href="[url=http://graph-commande.forumactif.com/code-ou-es-tu-f4/reglement-general-t3.htm"Règlements/A]http://graph-commande.forumactif.com/code-ou-es-tu-f4/reglement-general-t3.htm">Règlements</A[/url]>
<LI><A href="[url=http://graph-commande.forumactif.com/entrer-dans-la-danse-f3/"Présentations/A]http://graph-commande.forumactif.com/entrer-dans-la-danse-f3/">Présentations</A[/url]>
<LI><A href="[url=http://graph-commande.forumactif.com/je-veux-du-pouvoir-f16/"Recrutement/A]http://graph-commande.forumactif.com/je-veux-du-pouvoir-f16/">Recrutement</A[/url]>
<LI><A href="[url=http://graph-commande.forumactif.com/devenir-friend-f7/devenir-partenaire-t12.htm"Partenariat/A]http://graph-commande.forumactif.com/devenir-friend-f7/devenir-partenaire-t12.htm">Partenariat</A[/url]>
<LI><A href="[url=http://graph-commande.forumactif.com/code-ou-es-tu-f4/les-groupes-t816.htm"Groupes/A]http://graph-commande.forumactif.com/code-ou-es-tu-f4/les-groupes-t816.htm">Groupes</A[/url]> </LI></UL></DIV>

<table width=30% height=80px border="1" bordercolor=#2d6b80 align=left>Partenaires
<td width=30%>
<marquee onmouseover="this.stop()" style="border: 0px solid ; padding: 0px; margin-left: 0px; width:270px; height: 50px;" onmouseout="this.start()" scrollamount="3" scrolldelay="1" direction="left"><div align="center">

<a href="[url=http://grafik-exclusif.forumactif.com/"img]http://grafik-exclusif.forumactif.com/"><img[/url] src="[url=http://i60.servimg.com/u/f60/11/50/03/68/ge11.gif]http://i60.servimg.com/u/f60/11/50/03/68/ge11.gif[/url]" border="0"></a> <a href="[url=http://graphavenue.forumactif.com/"img]http://graphavenue.forumactif.com/"><img[/url] src="[url=http://img17.imageshack.us/img17/5039/graaa.png]http://img17.imageshack.us/img17/5039/graaa.png[/url]" border="0"></a>
<a href="[url=http://elegance-temptation.forumsactifs.net/forum.htm"img]http://elegance-temptation.forumsactifs.net/forum.htm"><img[/url] src="[url=http://i64.servimg.com/u/f64/15/04/04/54/8812.jpg]http://i64.servimg.com/u/f64/15/04/04/54/8812.jpg[/url]" border="0"></a></div></marquee>
</td></table>
<table width=33% height=80px border="1" bordercolor=#2d6b80 align=left>Annonces
<td width=30%>
<marquee onmouseover="this.stop()" style="border: 0px solid ; padding: 0px; margin-left: 0px; width:270px; height: 50px;" onmouseout="this.start()" scrollamount="1" scrolldelay="1" direction="up">• Les commandes sont fermées. Infos <a href="[url=http://graph-commande.forumactif.com/quoi-de-neuf-f5/les-commandes-t1378.htm]http://graph-commande.forumactif.com/quoi-de-neuf-f5/les-commandes-t1378.htm[/url]" class="postlink" target="_blank">ici</a>
<br><br>• Lire les nouveautés <a href="[url=http://graph-commande.forumactif.com/quoi-de-neuf-f5/nouveautes-de-juin-t1384.htm]http://graph-commande.forumactif.com/quoi-de-neuf-f5/nouveautes-de-juin-t1384.htm[/url]" class="postlink" target="_blank">» ICI «</a>
</td></table>
<table width=33% height=80px border="1" bordercolor=#2d6b80 align=left>Nos Logos
<td width=30%><br>
<a href="[url=http://graph-commande.forumactif.com/]http://graph-commande.forumactif.com/[/url]" class="postlink" target="_blank"><img src="[url=http://img140.imageshack.us/img140/2549/logo88sur31.png]http://img140.imageshack.us/img140/2549/logo88sur31.png[/url]" border="0" alt="" /></a><br><a href="[url=http://graph-commande.forumactif.com/devenir-friend-f7/nos-logos-t603.htm]http://graph-commande.forumactif.com/devenir-friend-f7/nos-logos-t603.htm[/url]" class="postlink" target="_blank">Plus ?</a>
</td></table>
<table width=30% height=80px border="1" bordercolor=#2d6b80 align=left>Partenaire Officiel
<td width=30%>Logo de GF</td></table>

J'ai également un autre problème. Comment je fais pour les mettre à la ligne ?
Car en fait j'ai 4 tableaux mais qui se mettent à la suite les uns des autres =/

Merci d'avance Very Happy

Bonjours,

Donc tu voudrais un tableau de 2*2 c'est ça? Parce quue sur le teste il y a 4 case et la tu nous parles de 3 cases?.

Cordialement, James1920

Resalut.

Donc j'ai espacé les colonnes et un peu corrigé ton code.

Dit moi si c'est ça que tu veux.

Le PA: http://invision.forum-canada.net/tablea_Sote-h9.htm

Cordialement, James1920

Bonjour !

Ton code est dans l'ensemble pas mal construit, mais comporte pas mal de petites erreurs.
Penses à écrire le nom de tes balises en minuscles, et n'oublie pas les guillemets autour des valeurs. Tu dois en mettre à chaque fois que tu as un signe égal quelque part.
Par ailleurs, pour respecter les normes, il faut toujours mettre les tr pour créer les lignes du tableau avant de mettre les cellules td.

Code:: <table>
<tr>
<td>
</td>
</tr>
</table>

Par ailleurs, je te conseille de faire un tableau avec plusieurs lignes et colonnes plutôt que faire trois tableaux. Si tu veux faire apparaître les cellules côte à côte, ce sera beaucoup plus pratique. Avec la configuration que tu as choisie, on n'observe pas le même résultat selon la résolution de l'écran qu'on possède. Fais le test en réduisant la largeur de ta fenêtre, et tu verras les tableaux se mettre automatiquement à la ligne du dessous lorsque la place devient insuffisante pour qu'ils restent l'un à côté de l'autre sur la ligne.

J'ai un doute sur la validité de ton "bordercolor". Je n'ai pas retrouvé la couleur demandée dans la bordure de ton tableau.
Dans tous les cas, pour changer la bordure du tableau, mieux vaut passer par le css, soit en créant une classe soit en l'insérant dans ton tableau via style=.

Et pour espacer tes tableaux, il suffit d'insérer des marges, via le css.

Je ne sais pas exactement quel est ton niveau en css/html, donc j'attends que tu lises ce message et y réponde pour expliquer un peu plus clairement ce que tu veux obtenir exactement comme résultat. Je t'aiderai à corriger ton code à ce moment là, et t'expliquerai comment mettre le css.

Fu'

EDIT : Ops désolé, tu as répondu avant que j'ai fini d'écrire XD
Evites le double-post quand même James s'il te plaît Wink

Je vous laisse voir ça ensemble si vous voulez, mais essaie d'expliquer ce que tu fais James Wink

Salut,

Ouais désolé pour le double poste :/.

Donc je voulais juste savoir si le code que je lui ait corrigé est juste pour pas perdre un temps fous pour les explications.

Donc si ce que je t'es fais est juste je t'explique je vais quand même pas la laissé seul avec ce code.

A+

Ok donc je fais ça et je t'explique le code.

La partie css (toutes les explications sont entres les /* et */ ) A mettre dans affiche ==>couleurs==>Feuille de style personnalisée

Code:: table /* Le tableau en lui-même */
{
margin: auto; /* Centre le tableau */
border-collapse: separate; /*ce qui sépare les box */

}
.titre_table /* Les cellules d'en-tête */
{
color: black; /* couleurs de la police*/
font-size: 1.1em; /*taille de la police */
background-color: white; /* couleurs de fond des titres */
}

td /* Les cellules normales */
{
text-align: left; /* Tous les textes des cellules seront centrés*/
padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */

height: 80px; /*taille des box */
border: 1px solid #2d6b80; /* Bordure du tableau style ligne(outset) */
background-color: white; /* couleurs de fond des box */
width: 30% /*taille des cellules comme demandée */

}

Pour le tableau en lui même j'ai juste corriger le code donc:

La première cellule en haut à gauche:
J'ai juste modifié les liens qui mélangeais html et bbcode. Et le défilement j ai enlevé la taille et la largeur dans le css mtn. Et pour les liens j'ai rajouté les alt( texte altérnatif quand l'image bug) title( sorte d infobulle)
Le code:

Code:: <td class="td_ma">
<marquee onmouseover="this.stop()" style="border: 0px solid ; padding: 0px; margin-left: 0px;" onmouseout="this.start()" scrollamount="3" scrolldelay="1" direction="left">

<a href="http://grafik-exclusif.forumactif.com" target="_blank"><img src="http://i60.servimg.com/u/f60/11/50/03/68/ge11.gif" title="grafik-exclusif" alt="grafik-exclusif" border="0"/></a>
<a href="http://graphavenue.forumactif.com" target="_blank"><img src="http://img17.imageshack.us/img17/5039/graaa.png" title="grapheavenue" alt="graphavenue" border="0"/></a>
<a href="http://elegance-temptation.forumsactifs.net/forum.htm" target="_blank"><img src="http://i64.servimg.com/u/f64/15/04/04/54/8812.jpg" border="0" title="elegance tempation" alt="elegance tempation"/></a></div></marquee>
</td>

La deuxième cellules: en haut 2ème
La je n'est pas changer beaucoup de chose juste les liens

Code:: <td class="td_ma">

<marquee onmouseover="this.stop()" style="border: 0px solid ; padding: 0px; margin-left: 0px; width:270px; height: 50px;" onmouseout="this.start()" scrollamount="1" scrolldelay="1" direction="up">• Les commandes sont fermées. Infos <a href="http://graph-commande.forumactif.com/quoi-de-neuf-f5/les-commandes-t1378.htm" class="postlink" target="_blank">ici</a>
<br><br>• Lire les nouveautés <a href="http://graph-commande.forumactif.com/quoi-de-neuf-f5/nouveautes-de-juin-t1384.htm" class="postlink" target="_blank">» ICI «</a>
</td>

La troisième cellules la dernière de la première ligne:
Encore une fois juste modifié les liens

Code:: <td class="td_ma">
<a href="http://graph-commande.forumactif.com/" class="postlink" target="_blank"><img src="http://img140.imageshack.us/img140/2549/logo88sur31.png" border="0" alt="graph commande" /></a>
<a href="http://graph-commande.forumactif.com/devenir-friend-f7/nos-logos-t603.htm" class="postlink" target="_blank">Plus ?</a>
</td>

La cellules du bah:
Rien modifié j'avais rien besoins de faire.

Code:: <td class="td_ma">
Logo de GF</td>

Le tableu dans l'ensemble:
Je l'ai reconstruit en 1 seul tableau (tu avais mis plusieurs tableau pour chaque box).
j'ai rajouté des tires de cellules comme tu avais mis toi mais avec plus de style et plus juste codement parlant.

Et je crois que c'est un peu tout.

Le code complet html:

Code:: <table class="table_ma" ><th class="titre_table">Salut</th><th class="titre_table">Satitre_tablelut</th><th class="titre_table">Salut</th><tr>
<td class="td_ma">
<marquee onmouseover="this.stop()" style="border: 0px solid ; padding: 0px; margin-left: 0px;" onmouseout="this.start()" scrollamount="3" scrolldelay="1" direction="left">

<a href="http://grafik-exclusif.forumactif.com" target="_blank"><img src="http://i60.servimg.com/u/f60/11/50/03/68/ge11.gif" title="grafik-exclusif" alt="grafik-exclusif" border="0"/></a>
<a href="http://graphavenue.forumactif.com" target="_blank"><img src="http://img17.imageshack.us/img17/5039/graaa.png" title="grapheavenue" alt="graphavenue" border="0"/></a>
<a href="http://elegance-temptation.forumsactifs.net/forum.htm" target="_blank"><img src="http://i64.servimg.com/u/f64/15/04/04/54/8812.jpg" border="0" title="elegance tempation" alt="elegance tempation"/></a></div></marquee>
</td>
<td class="td_ma">

<marquee onmouseover="this.stop()" style="border: 0px solid ; padding: 0px; margin-left: 0px; width:270px; height: 50px;" onmouseout="this.start()" scrollamount="1" scrolldelay="1" direction="up">• Les commandes sont fermées. Infos <a href="http://graph-commande.forumactif.com/quoi-de-neuf-f5/les-commandes-t1378.htm" class="postlink" target="_blank">ici</a>
<br><br>• Lire les nouveautés <a href="http://graph-commande.forumactif.com/quoi-de-neuf-f5/nouveautes-de-juin-t1384.htm" class="postlink" target="_blank">» ICI «</a>
</td>
<td class="td_ma">
<a href="http://graph-commande.forumactif.com/" class="postlink" target="_blank"><img src="http://img140.imageshack.us/img140/2549/logo88sur31.png" border="0" alt="graph commande" /></a>
<a href="http://graph-commande.forumactif.com/devenir-friend-f7/nos-logos-t603.htm" class="postlink" target="_blank">Plus ?</a>
</td>
</tr><th class="titre_table">Satitre_tablelut</th><tr>
<td class="td_ma">
Logo de GF</td></tr></table>

Je n'ai pas remis ta navigation donc supprime là pas.

Je garderais ton code corrigé 7 jours donc fait une copie chez toi sur ton ordi et sur ton forum.

Cordialement, James1920

Coucou (:
Lorsque je tente de mettre le tout premier code dans la feuille de style CSS, un code d'erreur apparait. Il dit ceci :

Code:: Erreur détectée
Nous avons compté un nombre impaire de guillemets donc une chaine est mal fermée. Cela signifie que votre CSS risque de ne pas être valide et ne sera pas affiché correctement sur votre forum.

Nous vous conseillons de relire votre code.

Ben ça vient pas de mon code car il y a tout les { mais ressert peut-être le code comme ça:

(La preuve qu'il est juste copie ton css là :http://jigsaw.w3.org/css-validator/#validate_by_input il te dira bravo ton css est sans fautes )
Je viens de voir que j'avais fait une erreur recopie ce code à la place de l'ancien dsl.

Code:: .table_ma /* Le tableau en lui-même */
{
margin: auto; /* Centre le tableau */
border-collapse: separate; /*ce qui sépare les box */
}
.titre_table /* Les cellules d'en-tête */
{
color: black; /* couleurs de la police*/
font-size: 1.1em; /*taille de la police */
background-color: white; /* couleurs de fond des titres */
}

td /* Les cellules normales */
{
text-align: left; /* Tous les textes des cellules seront centrés*/
padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
height: 80px; /*taille des box */
border: 1px solid #2d6b80; /* Bordure du tableau style ligne(outset) */
background-color: white; /* couleurs de fond des box */
width: 30% /*taille des cellules comme demandée */

}

Cordialement, James1920

ho merci beaucoup !
Problème résolu ;D

Salut,

Content d'avoir pu t'aider Very Happy

A la prochaine James1920.

Je classe ^^

Quelques soucis avec des tableaux

Quelques soucis avec des tableaux

Sujets similaires

Sujets similaires

Partenaires Or