Un tableau récalcitrant sur ma PA

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

Résolu Un tableau récalcitrant sur ma PA

Message par OlympusTales le Mer 5 Sep 2012 - 12:42

Bonjour, et merci de prendre le temps de me lire Smile


Voilà voilà, alors en fait, sur mon forum test je prépare un nouveau design pour mon forum. Mon problème se situe dans la PA. J'ai bidouillé un tableau, et ça fait trois jours que je me casse la tête pour réussir à ce que le tableau "top partenaires" fasse la même taille en hauteur que l'ensemble du second tableau. et ceci sur tout les navigateurs (j'avais trouvé une solution, qui ne marchait malheureusement que sur GC et IE) ^^

Pour mieux vous faire comprendre : http://createworld.forumgratuit.org/forum

Quant au html:

Code:
<img src="http://i34.servimg.com/u/f34/09/04/98/73/bannnn10.jpg">

<table style="float:left;"><tr><th id="th"><font color="#5185b3" font face="Charlemagne STD">Top partenaires</font></th></tr><tr><td id="tab3_col1">

<a href="http://alfera.forumactif.com" class="postlink" target="_blank" rel="nofollow"><img src="http://image.noelshack.com/fichiers/2012/30/1343239285-boutonpart2.png"  style="border:#99c5eb 1px solid; margin-bottom: 1px;"alt="" /></a>

<a href="http://elysphere.forums-rpg.com/forum.htm" class="postlink" target="_blank" rel="nofollow"><img src="http://img802.imageshack.us/img802/8584/100x35copie.jpg"  style="border:#99c5eb 1px solid; margin-bottom: 1px;" alt="" /></a>

<a href="http://starwarsrpg.forumgratuit.fr/" class="postlink" target="_blank" rel="nofollow"><img src="http://i45.tinypic.com/110xh50.jpg"  style="border:#99c5eb 1px solid; margin-bottom: 1px;" alt="" /></a>
<a href="http://stargateandromeda.forumgratuit.org/"><IMG SRC= "http://img846.imageshack.us/img846/8834/starga11.jpg"  style="border:#99c5eb 1px solid; margin-bottom: 1px;"></a>

<a href="http://mafiadei.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i40.servimg.com/u/f40/17/30/75/81/bouton14.png"  style="border:#99c5eb 1px solid; margin-bottom: 1px;" alt="" /></a>


<a href="http://erodaacademy.creerforum.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://img838.imageshack.us/img838/4006/boutonl.png" style="border:#99c5eb 1px solid; margin-bottom: 1px;" alt="" /></a>

<a href="http://fartheraway.creer-forum.com/forum" class="postlink" target="_blank" rel="nofollow"><img src="http://i34.servimg.com/u/f34/09/04/98/73/bitonf10.png
" style="border:#99c5eb 1px solid; margin-bottom: 1px;" alt="" /></a>
 
<a href="http://petites-machineries.forumactif.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i49.servimg.com/u/f49/16/09/97/68/test_b11.png" style="border:#99c5eb 1px solid; margin-bottom: 1px;" alt="" /></a>


<br><br><br><br><br<br></td></tr></table><table style="float:left;"><tr><th id="th"><font color="#5185b3" font face="Charlemagne STD">Contexte</font></th><th id="th"><font color="#5185b3" font face="Charlemagne STD">STAFF</font></th><th id="th"><font color="#5185b3" font face="Charlemagne STD">Top-sites</font></th></tr><tr><td id="tab1_col1"><div align="justify">Olympus Tales est un jeu de rôle qui prend place au cœur de la Grèce Antique des mythes Vous avez rêvé de vivre l'histoire d'une divinité grecque, de vous allonger près d'une eau limpide en sirotant un nectar d'Ambroisie ? D'être une amazone guerrière et de chevaucher à travers les prés ? Que vous ayez décidé d'incarner un Dieu, un Titan, une Nymphe, une Créature, un Mortel, un Demi-Dieux, l'une des neuf Muses ou bien une Amazones, ce forum est fait pour vous ! </justify></td><td id="tab1_col2"><center><img src="http://i35.servimg.com/u/f35/11/05/36/70/eury10.png"><img src="http://i35.servimg.com/u/f35/11/05/36/70/arte10.png"> <br>
<img src="http://i35.servimg.com/u/f35/11/05/36/70/petti10.png">
<img src="http://i35.servimg.com/u/f35/11/05/36/70/petti10.png">
<img src="http://i35.servimg.com/u/f35/11/05/36/70/petti10.png"></center>
</td><td id="tab1_col3"><br><div align="center" style="margin-top:-20px;padding-top:-20px;"><img src="http://www.veryicon.com/icon/48/Cartoon/Legendora/AngelWing.png"><img src="http://www.veryicon.com/icon/48/Cartoon/Legendora/Art%20of%20Chemistry.png"><img src="http://www.veryicon.com/icon/48/Cartoon/Legendora/Axe.png"><img src="http://www.veryicon.com/icon/48/Cartoon/Legendora/Heroine.png"><img src="http://www.veryicon.com/icon/48/Cartoon/Legendora/Hero.png"><img src="http://www.veryicon.com/icon/48/Cartoon/Legendora/Music%203.png"></div></td></tr>
</table><table style="float:right;">


<tr><th id="th"><font color="#5185b3" font face="Charlemagne STD">Liens utiles</font></th><th id="th"><font color="#5185b3" font face="Charlemagne STD">Nouveautés</font></th><th id="th"><font color="#5185b3" font face="Charlemagne STD">Crédits</font></th></tr><tr><td id="tab1_col2">
<a class="navpa" href="http://olympustales.pro-forum.fr/t2-le-guide-des-7-etapes-la-premiere-chose-a-lire-avant-meme-de-sinscrire-tout-est-explique-clairement">Le guide des sept étapes</a>
<a class="navpa" href="http://olympustales.pro-forum.fr/t3-le-reglement-general">Règlement</a>
<a class="navpa" href="http://olympustales.pro-forum.fr/t11-le-contexte">Contexte</a>
<a class="navpa" href="http://olympustales.pro-forum.fr/t4-les-differents-types-de-personnages-et-leurs-caracteristiques">Races</a>
<a class="navpa" href="http://olympustales.pro-forum.fr/f4-fiches-de-presentations">Présentations</a>
<a class="navpa" href="http://olympustales.pro-forum.fr/t34-03-05-2012-la-premiere-intrigue">Intrigue</a>
 </td>
<td id="tab2_col1"><table><tr><td style="text align:center;">In RP</td><td style="text align:center;">Hors RP</td></tr><tr><td><blockquote style="font-size:10px;text-align:justify;overflow:auto;height:90px; width: 112px;margin-top:2px;padding:0px;background-color:#99c5eb;border:1px #5185b3 solid;-moz-border-radius:5px;float:center;padding-top:3px;"><font face="Chaparral Pro">*BLABLBLABLA*<br><br><br><br><br><br><br><br><br></font></td><td><blockquote style="font-size:10px;text-align:justify;overflow:auto;height:90px; width: 112px;margin-top:2px;padding:0px;background-color:#99c5eb;border:1px #5185b3 solid;-moz-border-radius:5px;float:center;padding-top:3px;"><font face="Chaparral Pro">*BLABLBLABLA*<br><br><br><br><br></font></td></table></td>
<td id="tab1_col3">
Design by Iris et Themys.
Concept by Iris et Themys.
Toute reproduction totale ou partielle est interdite.
 </td>

</tr></table>

Je vous préviens, je ne l'ai pas "épuré" il y a sans doute des choses inutiles dans ce-dernier.


Et au CSS qui lui corresspond:

Code:

#parto{
  float:left;}

#tab1_col1{
  width: 370px;
  float: center;
    border-right: #3E9696 2px dashed;
  border-left: #3E9696 2px dashed;
  border-bottom: #3E9696 2px dashed;
  padding-left: 15px;
  padding-top: 8px;
 padding-bottom: 15px;
  padding-right: 15px;
}

#tab1_col2{
  width: 180px;
    border-right: #3E9696 2px dashed;
  border-left: #3E9696 2px dashed;
  border-bottom: #3E9696 2px dashed;
 
 
  }
#tab1_col3{
  width: 100px;
    border-right: #3E9696 2px dashed;
  border-left: #3E9696 2px dashed;
  border-bottom: #3E9696 2px dashed;
  margin-top:  50px;

 
  }
#tab2_col1{
  width: 320px;
    border-right: #3E9696 2px dashed;
  border-left: #3E9696 2px dashed;
  border-bottom: #3E9696 2px dashed;
  text-align:center;
 
}


#tab3_col1{
  padding-top: 8px;
  width: 120px;
    border-bottom: #3E9696 2px dashed;
  border-right: #3E9696 2px dashed;
  border-left: #3E9696 2px dashed;

}
#th{
  background-color: #99c5eb;
  border-top: #3E9696 2px dashed;
  border-bottom: #3E9696 2px dashed;
  border-right: #3E9696 2px dashed;
  border-left: #3E9696 2px dashed;
  text-align: center;
  margin-top: 5px;
}

.navpa {
display: block;
background: #99c5eb;
text-shadow: black 1px 1px 1px;
font-family: times new roman;
font-size: 12px;
letter-spacing: 5px;
text-align: center;
text-transform: uppercase;
color: #ffffff!important; 
border-bottom: 1px #3E9696 dashed;
}


Merci d'avance Wink



Dernière édition par OlympusTales le Lun 10 Sep 2012 - 18:26, édité 1 fois

OlympusTales
Nouveau membre

Féminin
Messages : 18
Inscrit(e) le : 16/06/2012

http://olympustales.pro-forum.fr/
OlympusTales a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un tableau récalcitrant sur ma PA

Message par Scoubifitz le Mer 5 Sep 2012 - 16:09

bonojur,

pourquoi ne pas tout faire en un seul tableau ?

Top partenairesContexte STAFF Top-sites
photo
photo
photo
photo
photo
Olympus bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Liens utiles Nouveautés Crédits
lien
lien
lien
lien
In RP Hors RP

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un tableau récalcitrant sur ma PA

Message par OlympusTales le Mer 5 Sep 2012 - 21:12

A la base, en fait, j'avais fait un tableau différent pour les partenaires parce que nous n'étions pas sûres de la place que la case allait prendrre dans la PA. Je n'ai pas pensé tout réunir ^^


Et je n'y ai pas repensé xD Je suis idiote, c'est fou. J'édite ce message si je rencontre un nouveau problème ^^

EDIT: Eh bien, je n'arrive pas au même résultat que toi :s Les cases font toutes la même taille et je n'arrive pas a les altérer. Pourrais tu me dire comment tu as fait? (Mercimercimerci ^^)

OlympusTales
Nouveau membre

Féminin
Messages : 18
Inscrit(e) le : 16/06/2012

http://olympustales.pro-forum.fr/
OlympusTales a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un tableau récalcitrant sur ma PA

Message par Scoubifitz le Mer 5 Sep 2012 - 23:13

en fusionnant les cellules ...

le code :
Code:
<center><img src="http://i34.servimg.com/u/f34/09/04/98/73/bannnn10.jpg" /></center>
<table class="olympiaccueil" border="0">
<tr>
<th>Top partenaires</th>
<th colspan="2">Contexte </th>
<th >STAFF </th>
<th>Top-sites </th>
</tr><tr>
<td rowspan="3" valign="top" id="tab3_col1"><a href="http://alfera.forumactif.com" class="postlink" target="_blank" rel="nofollow"><img src="http://image.noelshack.com/fichiers/2012/30/1343239285-boutonpart2.png"  style="border:#99c5eb 1px solid; margin-bottom: 1px;"alt="" /></a><br />

<a href="http://elysphere.forums-rpg.com/forum.htm" class="postlink" target="_blank" rel="nofollow"><img src="http://img802.imageshack.us/img802/8584/100x35copie.jpg"  style="border:#99c5eb 1px solid; margin-bottom: 1px;" alt="" /></a><br />

<a href="http://starwarsrpg.forumgratuit.fr/" class="postlink" target="_blank" rel="nofollow"><img src="http://i45.tinypic.com/110xh50.jpg"  style="border:#99c5eb 1px solid; margin-bottom: 1px;" alt="" /></a><br />

<a href="http://stargateandromeda.forumgratuit.org/"><IMG SRC= "http://img846.imageshack.us/img846/8834/starga11.jpg"  style="border:#99c5eb 1px solid; margin-bottom: 1px;"></a><br />

<a href="http://mafiadei.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i40.servimg.com/u/f40/17/30/75/81/bouton14.png"  style="border:#99c5eb 1px solid; margin-bottom: 1px;" alt="" /></a><br />

<a href="http://erodaacademy.creerforum.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://img838.imageshack.us/img838/4006/boutonl.png" style="border:#99c5eb 1px solid; margin-bottom: 1px;" alt="" /></a><br />

<a href="http://fartheraway.creer-forum.com/forum" class="postlink" target="_blank" rel="nofollow"><img src="http://i34.servimg.com/u/f34/09/04/98/73/bitonf10.png
" style="border:#99c5eb 1px solid; margin-bottom: 1px;" alt="" /></a><br />

<a href="http://petites-machineries.forumactif.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i49.servimg.com/u/f49/16/09/97/68/test_b11.png" style="border:#99c5eb 1px solid; margin-bottom: 1px;" alt="" /></a><br /></td>
 
<td colspan="2" id="tab1_col1"><div align="justify">Olympus Tales est un jeu de rôle qui prend place au cœur de la Grèce Antique des mythes Vous avez rêvé de vivre l'histoire d'une divinité grecque, de vous allonger près d'une eau limpide en sirotant un nectar d'Ambroisie ? D'être une amazone guerrière et de chevaucher à travers les prés ? Que vous ayez décidé d'incarner un Dieu, un Titan, une Nymphe, une Créature, un Mortel, un Demi-Dieux, l'une des neuf Muses ou bien une Amazones, ce forum est fait pour vous ! </div></td>
 
  <td id="tab1_col2"><center><img src="http://i35.servimg.com/u/f35/11/05/36/70/eury10.png"><img src="http://i35.servimg.com/u/f35/11/05/36/70/arte10.png"> <br />
<img src="http://i35.servimg.com/u/f35/11/05/36/70/petti10.png">
<img src="http://i35.servimg.com/u/f35/11/05/36/70/petti10.png">
<img src="http://i35.servimg.com/u/f35/11/05/36/70/petti10.png"></center></td>
 
<td id="tab1_col3"><br><div align="center" style="margin-top:-20px;padding-top:-20px;"><img src="http://www.veryicon.com/icon/48/Cartoon/Legendora/AngelWing.png"><img src="http://www.veryicon.com/icon/48/Cartoon/Legendora/Art%20of%20Chemistry.png"><img src="http://www.veryicon.com/icon/48/Cartoon/Legendora/Axe.png"><img src="http://www.veryicon.com/icon/48/Cartoon/Legendora/Heroine.png"><img src="http://www.veryicon.com/icon/48/Cartoon/Legendora/Hero.png"><img src="http://www.veryicon.com/icon/48/Cartoon/Legendora/Music%203.png"></div></td>
</tr><tr>
<th>Liens utiles </th>
<th colspan="2">Nouveautés </th>
<th>Crédits </th>
</tr><tr>
<td id="tab1_col2">
<a class="navpa" href="http://olympustales.pro-forum.fr/t2-le-guide-des-7-etapes-la-premiere-chose-a-lire-avant-meme-de-sinscrire-tout-est-explique-clairement">Le guide des sept étapes</a>
<a class="navpa" href="http://olympustales.pro-forum.fr/t3-le-reglement-general">Règlement</a>
<a class="navpa" href="http://olympustales.pro-forum.fr/t11-le-contexte">Contexte</a>
<a class="navpa" href="http://olympustales.pro-forum.fr/t4-les-differents-types-de-personnages-et-leurs-caracteristiques">Races</a>
<a class="navpa" href="http://olympustales.pro-forum.fr/f4-fiches-de-presentations">Présentations</a>
<a class="navpa" href="http://olympustales.pro-forum.fr/t34-03-05-2012-la-premiere-intrigue">Intrigue</a></td>
 
  <td id="tab2_col2">In RP<br /><div style="font-size:10px;text-align:justify;overflow:auto;height:90px; width: 112px;margin-top:2px;background-color:#99c5eb;border:1px #5185b3 solid;border-radius:5px;padding-top:3px;margin:auto;"><font face="Chaparral Pro">*BLABLBLABLA*<br><br><br><br><br><br><br><br><br></font></div></td>
  <td id="tab2_col3">Hors RP<br />
    <div style="font-size:10px;text-align:justify;overflow:auto;height:90px; width: 112px;margin-top:2px;background-color:#99c5eb;border:1px #5185b3 solid;border-radius:5px;padding-top:3px;margin:auto;"><font face="Chaparral Pro">*BLABLBLABLA*<br><br><br><br><br><br><br><br><br></font></div></td>
<td id="tab1_col3">
Design by Iris et Themys.
Concept by Iris et Themys.
Toute reproduction totale ou partielle est interdite.
</td>
</tr>
</table>

le CSS modifié :

Code:
#tab1_col1,#tab1_col2,#tab1_col3,#tab2_col1,#tab2_col2,#tab2_col3,#tab3_col1{
border:#3E9696 2px dashed;
border-width:0 2px 2px 2px;
}
#tab1_col1{
width: 370px;
padding:8px 15px 15px 15px;
}
#tab1_col2{
width: 180px;
}
#tab1_col3{
width: 150px;
margin-top:50px;
}
#tab2_col1,#tab2_col2,#tab2_col3{
width: 320px;
text-align:center;
}
#tab2_col2{
border-width:0 0 2px 2px;
}
#tab2_col3{
border-width:0 2px 2px 0;
}
#tab3_col1{
padding-top: 8px;
width: 120px;
}
.olympiaccueil{
  width:820px;
  margin:auto;
text-align: center;
margin-top: 5px;
font-size:13px;
}
.olympiaccueil th{
background-color: #99c5eb;
border: #3E9696 2px dashed;
text-align: center;
margin-top: 5px;
color:#5185b3;
font:bold 13px Charlemagne STD; 
}

.navpa {
display: block;
background: #99c5eb;
text-shadow: black 1px 1px 1px;
font-family: times new roman;
font-size: 12px;
letter-spacing: 5px;
text-align: center;
text-transform: uppercase;
color: #ffffff!important;
border-bottom: 1px #3E9696 dashed;
}

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz 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