Une PA avec un grand espacement

[popoliline]

Bonjour bonjour, me revoila avec un nouveau problème de codage mystérieux je me retrouve avec un espace entre mes deux parties de la PA, je ne comprends pas. Si quelqu'un pouvait m'éclairer, je sèche un peu, on finit par ne plus voir ses "fautes" passés un certain stade.

Le lien pour visualiser le problème : ICI
Voici le code :

Code:

<div align="center"><br><div style="font-family: Georgia;letter-spacing: -2px;color: #ABA921;font-size: 25pt;text-shadow: 1px 1px 1px black;font-weight: lighter;text-transform: uppercase;text-shadow: black 1px 1px 1px;"> Welcome and Happy Hunger Games</div><div style="font-family: times new roman;font-size: 11px;text-transform: uppercase;color: #564F4F;text-shadow: 0px 0px 2px black;letter-spacing: 5px;margin-top: -7px;text-shadow: black 1px 1px 1px;">and may the odds be ever in your favour </div><br><table width="100%"><tbody><tr><td width="30%" style="padding: 3px;" valign="top" align="right"><a class="navpa" href="http://daughter-of-fire.forumactif.fr/f4-annexes">ANNEXE</a>
<a class="navpa" href="http://daughter-of-fire.forumactif.fr/t12-12-le-traite-de-la-trahison">RÈGLEMENT </a>
<a class="navpa" href="http://daughter-of-fire.forumactif.fr/f5-meet-the-other-tributes">SCÉNARIOS</a>
<a class="navpa" href="http://daughter-of-fire.forumactif.fr/f5-meet-the-other-tributes">PRÉDÉFINIS </a>
<a class="navpa" href="http://daughter-of-fire.forumactif.fr/t13-13-les-groupes">GROUPES</a>
<a class="navpa" href="http://daughter-of-fire.forumactif.fr/t43-62-le-bottin">BOTTIN</a>
<a class="navpa" href="http://daughter-of-fire.forumactif.fr/f3-the-girl-who-was-on-fire">INVITES</a>
</td> <td width="70%" colspan="2" valign="middle" align="justify" style="padding-left: 5px;"><div class="cadre">Elle courrait, elle courrait pour sa survie, pour que l'homme qui la traquait ne la rattrape jamais. Pas un endroit où se cacher. Elle court, tel un gibier fuyant devant son chasseur. <a href="" class="pa">[...]</a> Dans un proche futur, les États-Unis sont devenus un gouvernement fédéral dystopique dans lequel chaque district doit envoyer un garçon et une fille combattre lors d'un événement annuel télévisé, "The Hunger games", dont la seule issue est : tuer ou être tué. Alors, lorsque la 75ème Edition se termine par la mort du Vainqueur, la colère gronde face à ce gâchis. Une révolution se prépare, dans quel camp serrez vous ? <a href="http://daughter-of-fire.forumactif.fr/t1-11-le-contexte" class="pa">les jours sombres</a></div></td></tr></tbody></table></div><div style="height: 5px"></div><table><tbody><tr><td style="width:200px;height:150px;align:top;"><div style="margin:auto;text-align:center;width:100%;align:top;"><div class="navpa"><center>Evènements</center></div> </div><div align="justify">UC<br></div></td><td style="padding-left:20px;width:200px; height:150px;align:top;"><div style="margin:auto;text-align:center;width:100%;align:top;"><div class="navpa"><center>staff</center></div> UC<br></div></td><td style="padding-left:20px;width:210px; height:150px;align:top;"><div style="margin:auto;text-align:center;width:100%;align:top;"> <div class="navpa"><center>les Sponsors</div></center>UC<br></td></tr></tbody></table>


Merci par avance de votre aide, Cordialement, Pauline

[kheino]

Bonjour,

Peux-tu faire un petit schéma (avec Paint par exemple) et montrer comment devrait être ton tableau ?


EDIT : Le CSS correspondant à ta PA (et seulement cette partie) serait aussi utile.

[popoliline]

Bonjour, j'ai un petit soucis actuellement, je ne suis pas sur mon PC personnel, je n'enregistre aucun fichier dessus. En fait, mon seul souci c'est l'espace entre la première partie (avec le menu : annexe, règlement etc. + le contexte), et la seconde partie (où il y a les trois "parties" : évènement, staff, sponsors). Je ne sais pas si cela vous aide ?

[kheino]

Essaie de supprimer ce bloc "div" vide mais avec une hauteur, après la fermeture du premier tableau :

Code:

<div style="height: 5px"></div>

Cela dit, ton code comporte quelques erreurs, je vais essayer de te les corriger après que tu m'aies confirmé si c'est bien cela qui créait cet espace.

[popoliline]

j'avais rajouté ce code pour diminuer l'espace, sans succès. Supprimé cela ne change rien, je confirme

[kheino]

C'est difficile de se rendre compte juste par le code HTML sans le CSS qui va avec.
Peux-tu le fournir aussi ?

[popoliline]

Si j'oublie le css ... Bravo Pauline ^^ Le voici

Code:

/* CODE PA */

a.navpa:hover {
background-color: #171616;
color: #ABA921!important;
text-shadow: black 1px 1px 1px;
font-family: times new roman;
font-size: 12px;
font-weight: lighter;
letter-spacing: 5px;
display: block;
text-align: right;
text-transform: uppercase;
border: 1px black solid;
opacity:0.9;
webkit-transition: all .5s ease-out;
-webkit-transition-property: all;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: initial;}

.navpa {
display: block;
background: #171616;
text-shadow: black 1px 1px 1px;
font-family: times new roman;
font-size: 12px;
font-weight: lighter;
letter-spacing: 5px;
text-align: right;
text-transform: uppercase;
color: #564F4F!important; 
border: 1px black solid;
}

.cadre {
background: #171616;
border: 1px black solid;
padding: 10px;
border-image: initial;
color: #564F4F!important; 
}

.cadre:hover{
background: #171616;
border: 1px black solid;
opacity:0.9;
padding: 10px;
border-image: initial;
color: #564F4F!important;  }

a.pa {
color: #aba921!important;
font-family: times new roman;
text-transform: uppercase;  }

[kheino]

Alors voici le HTML quelque peu modifié et corrigé.
Dans le HTML, normalement on fait tout pour l'alléger, comme mettre le style CSS dans la feuille de style plutôt que dans les balises HTML, ce qui en soit est bien aussi mais uniquement pour de petites précisions, comme je l'ai fait pour le deuxième "table".

Ensuite, tu as omis plusieurs fermetures de "div" dans le deuxième tableau, et inutile d'ajouter une balise "div" juste pour lui donner un "class" que tu peux donner au précédent.

Le saut à la ligne s'écrit :

Code:

<br />

Donc voici le HTML :

Code:

<table width="100%" align="center"><tr><td colspan="3" align="center"><br /><div style="font-family: Georgia;letter-spacing: -2px;color: #ABA921;font-size: 25pt;text-shadow: 1px 1px 1px black;font-weight: lighter;text-transform: uppercase;text-shadow: black 1px 1px 1px;"> Welcome and Happy Hunger Games</div><div style="font-family: times new roman;font-size: 11px;text-transform: uppercase;color: #564F4F;text-shadow: 0px 0px 2px black;letter-spacing: 5px;margin-top: -7px;text-shadow: black 1px 1px 1px;">and may the odds be ever in your favour </div><br />
</td></tr>
<tr><td width="30%" style="padding: 3px;" valign="top" align="right"><a class="navpa" href="http://daughter-of-fire.forumactif.fr/f4-annexes">ANNEXE</a>
<a class="navpa" href="http://daughter-of-fire.forumactif.fr/t12-12-le-traite-de-la-trahison">RÈGLEMENT</a>
<a class="navpa" href="http://daughter-of-fire.forumactif.fr/f5-meet-the-other-tributes">SCÉNARIOS</a>
<a class="navpa" href="http://daughter-of-fire.forumactif.fr/f5-meet-the-other-tributes">PRÉDÉFINIS</a>
<a class="navpa" href="http://daughter-of-fire.forumactif.fr/t13-13-les-groupes">GROUPES</a>
<a class="navpa" href="http://daughter-of-fire.forumactif.fr/t43-62-le-bottin">BOTTIN</a>
<a class="navpa" href="http://daughter-of-fire.forumactif.fr/f3-the-girl-who-was-on-fire">INVITES</a></td>
<td width="70%" colspan="2" valign="middle" align="justify" style="padding-left: 5px;"><div class="cadre">Elle courrait, elle courrait pour sa survie, pour que l'homme qui la traquait ne la rattrape jamais. Pas un endroit où se cacher. Elle court, tel un gibier fuyant devant son chasseur. <a href="" class="pa">[...]</a> Dans un proche futur, les États-Unis sont devenus un gouvernement fédéral dystopique dans lequel chaque district doit envoyer un garçon et une fille combattre lors d'un événement annuel télévisé, "The Hunger games", dont la seule issue est : tuer ou être tué. Alors, lorsque la 75ème Edition se termine par la mort du Vainqueur, la colère gronde face à ce gâchis. Une révolution se prépare, dans quel camp serrez vous ? <a href="http://daughter-of-fire.forumactif.fr/t1-11-le-contexte" class="pa">les jours sombres</a></div>
</td></tr>
<tr><td colspan="3" align="center" valign="top">
<table align="center" style="margin-top: -34px;"><tr>
<td style="width:200px;height:150px;"><div style="margin:auto;text-align:center;width:100%;" class="navpa"><center>Evènements</center></div><div align="justify">UC</div><br /></td>
<td style="padding-left:20px;width:200px; height:150px;"><div style="margin:auto;text-align:center;width:100%;" class="navpa"><center>staff</center></div><div align="justify"> UC</div><br /></td>
<td style="padding-left:20px;width:210px; height:150px;"><div style="margin:auto;text-align:center;width:100%;" class="navpa"><center>les Sponsors</center></div><div align="justify">UC</div><br /></td></tr></table>
</td></tr></table>

Au deuxième "table" on réduit cet espace avec un margin-top négatif.

En gros, je trouve ce HTML bien "lourd" et tu pourrais considérablement l'alléger en mettant des "class" aux bons endroits, comme au "tr" dans le deuxième tableau afin qu'il commande les "td", tout comme pour les "div".

Pour ce qui est du CSS, la propriété "transition" que tu utilises, n'est lisible que pour les navigateurs "webkit" (Safari et Google Chrome), ce qui est bien dommage pour tous les autres navigateurs qui auraient aussi la possibilité de la lire si tu le précisais, de plus sans tirets au début des spécifications-navigateurs, c'est erroné:

transition: all .5s ease-out; /*certains standards*/
-webkit-transition: all .5s ease-out; /*Safari et Chorme*/
-o-transition: all .5s ease-out; /*Opera >10*/
-moz-transition: all .5s ease-out; /*Firefox*/
-htm-transition: all .5s ease-out; /*d'autres*/

Idem pour l'opacité :

opacity : 0.9;
-moz-opacity : 0.9;
-khtml-opacity: 0.9;
-ms-filter: "alpha(opacity=90)"; /* IE 8 */
filter : alpha(opacity=90); /* IE < 8 */

[popoliline]

GENIAL ça marche ! Par contre pour ce qui est du code pour le CSS forumactif me le refuse, il prétends avoir compter une paire de guillemets mal fermés, pourtant ce n'est pas le cas

[kheino]

Essaie de supprimer les commentaires /*blabla*/

Si ça te le fais encore, redonne le CSS amélioré.

[popoliline]

NICKEL ça venait de là, je te remercie c'est juste totalement magnifique à présent !!! Merci infiniment ! C'est genial !
(Au fait pour le codage de la PA, je sais que c'est un peu le bazar aux codes, je comptais le reprendre après ^^)