Positionnement lien/boutons dans une table
Bonjour,
Je rencontre quelque problemes pour positionner des boutons a l'interieur d'une table.
Je dois en fait les centrer sur la ligne mais malgre la propriete align=center, ils s'obstinent a rester a gauche.. :(
Voici une partie du html
<table border="1" width="450" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4" align="center">
<a href="javascript:createNewProject();" class="custombtn">
<span style="width:68px;">
New ...
</span>
</a>
<a href="javascript:doAction('delete');" class="custombtn">
<span style="width:68px;">
Delete
</span>
</a>
</td>
</tr>
</tab>
et du css
a.custombtn {
cursor:pointer;
display:block;
float:left;
font:bold 0.917em Helvetica, Arial, sans-serif;
height:22px;
margin-right:3px;
padding:0 5px 0 0;
text-align:center;
text-decoration: none;
}
a.custombtn span {
color:#333;
display: block;
height:22px;
line-height:23px;
padding:0 1px 0 6px;
text-decoration:none;
white-space:nowrap;
}
a.custombtn { background:url(../images/j_button2_right_cap.png) no-repeat top right; }
a.custombtn span { background:url(../images/j_button2_left.png) no-repeat top left; }
J'ai deja pas mal fouiller dans les tuto css pour rajouter des display et de float.. mais en vain (j'y connais vraiment pas grand chose)
Merci d'avance pour votre aide! :)
Je rencontre quelque problemes pour positionner des boutons a l'interieur d'une table.
Je dois en fait les centrer sur la ligne mais malgre la propriete align=center, ils s'obstinent a rester a gauche.. :(
Voici une partie du html
<table border="1" width="450" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4" align="center">
<a href="javascript:createNewProject();" class="custombtn">
<span style="width:68px;">
New ...
</span>
</a>
<a href="javascript:doAction('delete');" class="custombtn">
<span style="width:68px;">
Delete
</span>
</a>
</td>
</tr>
</tab>
et du css
a.custombtn {
cursor:pointer;
display:block;
float:left;
font:bold 0.917em Helvetica, Arial, sans-serif;
height:22px;
margin-right:3px;
padding:0 5px 0 0;
text-align:center;
text-decoration: none;
}
a.custombtn span {
color:#333;
display: block;
height:22px;
line-height:23px;
padding:0 1px 0 6px;
text-decoration:none;
white-space:nowrap;
}
a.custombtn { background:url(../images/j_button2_right_cap.png) no-repeat top right; }
a.custombtn span { background:url(../images/j_button2_left.png) no-repeat top left; }
J'ai deja pas mal fouiller dans les tuto css pour rajouter des display et de float.. mais en vain (j'y connais vraiment pas grand chose)
Merci d'avance pour votre aide! :)
Configuration: Windows XP Firefox 3.0.10
3 réponses
-
Essaye ca : (j'ai faut au plus simple, pas sur à 100% que ça marche, mais sinon il existe d'autre solutions)
<table border="1" width="450" cellspacing="0" cellpadding="0"> <tr> <td colspan="4" align="center"> <p style="text-align:center;"> <a href="javascript:createNewProject();" class="custombtn"> <span style="width:68px;"> New ... </span> </a> <a href="javascript:doAction('delete');" class="custombtn"> <span style="width:68px;"> Delete </span> </a> </p> </td> </tr> </tab> -
Ca na marche pas... En fait javais plus ou moins deja essaiye en mettant <td align=center> et en rajoutant la balise <p> qui encadre mes boutons mais en vain..
C'est quoi les autres solutions?
Merci! -
En enlevant deux trois trucs dans le css (les float et des display) cela marche, même sans le <p> que j'avais rajouté initialement (peut être qu'il sera quand même à rajouter suivant ton intégration)
<style> a.custombtn { cursor:pointer; font:bold 0.917em Helvetica, Arial, sans-serif; height:22px; margin-right:3px; padding:0 5px 0 0; text-align:center; text-decoration: none; } a.custombtn span { color:#333; height:22px; line-height:23px; padding:0 1px 0 6px; text-decoration:none; white-space:nowrap; } </style> <table border="1" width="450" cellspacing="0" cellpadding="0"> <tr> <td colspan="4" align="center"> <a href="javascript:createNewProject();" class="custombtn"> <span style="width:68px;"> New ... </span> </a> <a href="javascript:doAction('delete');" class="custombtn"> <span style="width:68px;"> Delete </span> </a> </td> </tr> </tab>
