Une PA avec un grand espacement

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Une PA avec un grand espacement

Message par popoliline le Mar 14 Fév 2012 - 16:02

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


Dernière édition par popoliline le Mer 15 Fév 2012 - 18:06, édité 1 fois

popoliline
**

Messages : 60
Inscrit(e) le : 15/01/2012

http://vapore-dei-sospiri.bbactif.com/
popoliline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une PA avec un grand espacement

Message par Final-Blonde le Mar 14 Fév 2012 - 16:12

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.


Dernière édition par Final-Blonde le Mar 14 Fév 2012 - 16:17, édité 1 fois

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une PA avec un grand espacement

Message par popoliline le Mar 14 Fév 2012 - 16:16

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 ?

popoliline
**

Messages : 60
Inscrit(e) le : 15/01/2012

http://vapore-dei-sospiri.bbactif.com/
popoliline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une PA avec un grand espacement

Message par Final-Blonde le Mar 14 Fév 2012 - 16:29

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.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une PA avec un grand espacement

Message par popoliline le Mar 14 Fév 2012 - 16:33

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

popoliline
**

Messages : 60
Inscrit(e) le : 15/01/2012

http://vapore-dei-sospiri.bbactif.com/
popoliline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une PA avec un grand espacement

Message par Final-Blonde le Mar 14 Fév 2012 - 16:38

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

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une PA avec un grand espacement

Message par popoliline le Mar 14 Fév 2012 - 16:44

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

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;  }

popoliline
**

Messages : 60
Inscrit(e) le : 15/01/2012

http://vapore-dei-sospiri.bbactif.com/
popoliline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une PA avec un grand espacement

Message par Final-Blonde le Mer 15 Fév 2012 - 7:34

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". Wink

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 */

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une PA avec un grand espacement

Message par popoliline le Mer 15 Fév 2012 - 17:53

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 Sad

popoliline
**

Messages : 60
Inscrit(e) le : 15/01/2012

http://vapore-dei-sospiri.bbactif.com/
popoliline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une PA avec un grand espacement

Message par Final-Blonde le Mer 15 Fév 2012 - 18:00

Essaie de supprimer les commentaires /*blabla*/

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

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une PA avec un grand espacement

Message par popoliline le Mer 15 Fév 2012 - 18:04

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 ^^)

popoliline
**

Messages : 60
Inscrit(e) le : 15/01/2012

http://vapore-dei-sospiri.bbactif.com/
popoliline a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum