Problème de taille de cellules (HTML/CSS)

Version imprimable

10/09/2011, 02h01
raphael753

Problème de taille de cellules (HTML/CSS)

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

http://i286.photobucket.com/albums/l...53/Capture.png

Merci beaucoup,

Raphael

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:

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

10/09/2011, 11h17
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:



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

Code:

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

Il y a longtemps que je n'ai pas vu de balise :) 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é ?
10/09/2011, 12h14
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.
10/09/2011, 19h59
raphael753

Merci beaucoup pour votre aide !

Ca marche impec
10/09/2011, 20h38
pistouille

1 pièce(s) jointe(s)

Bonjour
Voila ce que je vois sous Linux Ubuntu
Cordialement Pistouille
11/09/2011, 01h15
Atomya Rise

super :ccool: !

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

Bonne continuation !
12/09/2011, 22h46
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.