Problème de taille de cellules (HTML/CSS) [Résolu]

[raphael753]

J'ai un petit problème avec un tableau d'un de mes sites qui me rend fou !

Comme vous pouvez le voir sur a capture d'écran, mes cellules ne sont pas alignés, après deux troi blanches, je me résigne à demander de l'aide sur le forum, car je ne veux pas entamer la troisième

Si quelqu'un est particulièrement doué avec firebug, il aura ma reconnaissance éternelle !

Ce des tableau mis les un à la suite des autres et malgré le fait que je fasse un td width= directement dans le code de la cellule, celle ci dépend apparemment de la longueur du nom, elle ne fait jamais la taille spécifiée !

http://www.toscanrestaurant.fr/19-pizzas-mega



Merci beaucoup,

Raphael

[Atomya Rise]

Bonjour,

ton problème est tout à fais normal.
Regarde, tu définis une largeur totale de 1400px pour la ligne entière de ton tableau, alors que tu définis une largeur de 900px à ton tableau global.... sans compter les espaces supplémentaire que tu as, due au cellspacing et cellpadding manquant sur ton tableau...

essaye ceci, tu verras la différence...

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<li class="ajax_block_product">
	<p class="new_product"></strong></p>
	<table cellspacing="0" cellpadding="0" class="tabletest" width="900" border="1">
		<tr>        
			<td width="200px">   
				<h3><a href="http://www.toscanrestaurant.fr/pizzas-mega/125-margherita.html" title="">Margherita</a></h3>
			</td>
			<td width="400px">
				<p>Tomate, mozzarella</p>
			</td>
			<td width="100px" align="right">
				<p class="pprice">18,50 €</p>
			</td>
			<td width="100px" align="right">
				<b id="categorie_product_view"><a rel="ajax_id_product_125" href="http://www.toscanrestaurant.fr/cart.php?add&amp;id_product=125&amp;token=958e7fff7d620cd4df71d16251957905">Commander</a></b><br>
			</td>
			<td width="100px" align='right'>
				<b id="categorie_product_view"><a href="http://www.toscanrestaurant.fr/pizzas-mega/125-margherita.html" title="Ajouter un ingredient">Ajouter un ingredient</a></b>
			</td>
		</tr>
	</table>
</li>
 
<li class="ajax_block_product">
	<p class="new_product"></strong></p>
	<table cellspacing="0" cellpadding="0" class="tabletest" width="900" border="1">
		<tr>        
			<td width="200px">   
				<h3><a href="http://www.toscanrestaurant.fr/pizzas-mega/126-reine.html" title="">Reine</a></h3>
			</td>
			<td width="400px">
				<p>Tomate, mozzarella, jambon, champignons</p>
			</td>
			<td width="100px" align="right">
				<p class="pprice">19,00 €</p>
			</td>
			<td width="100px" align="right">
				<b id="categorie_product_view"><a rel="ajax_id_product_126" href="http://www.toscanrestaurant.fr/cart.php?add&amp;id_product=126&amp;token=958e7fff7d620cd4df71d16251957905">Commander</a></b><br>
			</td>
			<td width="100px" align='right'>
				<b id="categorie_product_view"><a href="http://www.toscanrestaurant.fr/pizzas-mega/126-reine.html" title="Ajouter un ingredient">Ajouter un ingredient</a></b>
			</td>
		</tr>
	</table>
</li>

Si tu indenté ton code, je pense que déjà, tu t'y retrouverais bien mieux

[Auteur]

bonjour,

il y a quand même quelque chose qui me surprend dans ton code : tu utilises une liste et dans chaque item tu y place 1 ligne d'un tableau.

Ça ne serait pas plus simple de faire 1 tableau et d'enlever cette liste ?


En passant :

Code :

<p class="new_product"></strong></p>

Il manque l'ouverture de la balise <strong>, et le texte. Si ce paragraphe doit être vide autant le supprimer !

Code :

<b id="categorie_product_view"><a href="http://www.toscanrestaurant.fr/pizzas-mega/125-margherita.html" title="Ajouter un ingredient">Ajouter un ingredient</a></b>

Il y a longtemps que je n'ai pas vu de balise <b> Peut-être qu'il faudrait ajouter le style bold dans la feuille de style de tes cellules.
Après je suis surpris de voir un attribut id dans ce genre de balise. Quel en est l'utilité ?

[NoSmoking]

bonjour à tous,
je rajouterai, passe par des class, cela te simplifiera la vie en cas de modification et éclaircira ton code.

Ainsi OUT les balises Hx encadrant des balises A et autres P dans les TD qui ne sont pas forcément utile.

[raphael753]

Merci beaucoup pour votre aide !

Ca marche impec

[pistouille]

Bonjour
Voila ce que je vois sous Linux Ubuntu
Cordialement Pistouille

[Atomya Rise]

super !

N'hésite pas à voter pour les réponses qui t'ont aidés, et surtout, mettre ton message en résolu

Bonne continuation !

[NoSmoking]

encore une petite remarque

Code :

<td width="200px">

s'écrit simplement

Code :

<td width="200">

si tu as le temps essaies de passer par les classes quand même.