[Resolu] Tableau 100% déforme div sous IE

Question

damjal

22 Nov 2005 à 13:10

Salut,

J'utilise un tableau dans un div, je sais que c'est pas bien, mais je trouve ça plus pratique...
le code fonctionne bien sous firefox : les cellules de mon tableau se redimentionnent correctement, mais pas sous IE dans lequel mon tableau s'étend au delà du width du div.

voici mon code :


<html>
<head>
<title>Document sans titre</title>
<style>
#b_menu_haut {
	width:446px;
	height:18px;
	border:solid 2px #d8e4f1;
}
.sub_lien { 
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none; 
	background: #f4f4f4;
	cursor: pointer;
	text-decoration:underline;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bolder;
	color: #666666;
}
</style>

<meta http-equiv="Content-Type" content="text/html">
</head>

<body>
<div id=b_menu_haut>                                                                                                                                                                  
<table width="100%" border="0" cellpadding="0" cellspacing="0">                                                                                                                       
<tr>
<td height="1" valign="top" bgcolor="#DEF7FF">
Dimension normale du DIV</td></tr>                                                                                                                          
</table>                                                                                                                                                                              
<table width=446 cellspacing=0 cellpading=0>                                                                                                                           
<form name=menu_haut method=post action=index.php>                                                                                                                                    
<input type=hidden name=sid value=Ffud46qiJljTG8q>                                                                                                                                    
<tr>                                                                                                                                                                                  
<td align=center>                                                                                                                                                                     
<input type=submit name=serviceutileo value="Services Utileo" class=sub_lien>                                                                                                         
</td>                                                                                                                                                                                 
<td align=center style="background:#DEF7FF" class=textegras>CGV</td>                                                                                                                  
<td align=center>                                                                                                                                                                     
<input type=submit name=declare_site value="Déclarer un site" class=sub_lien>                                                                                                         
</td>                                                                                                                                                                                 
<td align=center><input type=submit name=contact value="Mail" class=sub_lien></td>                                                                                                    
<td><input type="submit" name="gestion_unite" value="Gestion des 6600 unités" 
class="sub_lien" onclick="document.menu_haut.action='attrib.php';">
</td>     
</tr>            
</form>                                                                                                                                                                               
</table>	                                                                                                                                                                            
<table width="100%" border="0" cellpadding="0" cellspacing="0">                                                                                                                       
<tr>
<td height="1" valign="top" bgcolor="#DEF7FF">
Dimension normale du DIV</td></tr>                                                                                                                          
</table>                                                                                                                                                                              
</div>                                                                                                                                                                                

</body>
</html>

Merci d'avance pour votre aide
Modifié par damjal (22 Nov 2005 - 22:55)

~~supprimé~~

22 Nov 2005 à 14:04

damjal a écrit :
je sais que c'est pas bien, mais je trouve ça plus pratique...

plus pratique pour qui...? pour toi, développeur du site ?
je pense que ce tableau pourrait très simplement être remplacé par une autre mise en page. Avantages : code plus lisible, page plus conforme aux recommandations d'accessibilité, mise à jour plus facile, et positionnement plus précis des éléments, et donc, élimination de ce type d'interprétation de "mix" entre div et tables...

Je te conseille egalement de faire attention aux id, class etc à mettre entre guillemets.
Modifié par yyoupla (22 Nov 2005 - 14:32)

damjal

22 Nov 2005 à 14:35

ok d'accord, j'ai l'impression qu'il va falloir que je me penche sur un remplacement de mon tableau !
Ce sera en effet plus propre.
Une question en passant, où est l'intérêt de mettre des guillemets ? c'est pour d'autres navigateurs que mozilla ou IE ?

~~supprimé~~

22 Nov 2005 à 14:42

l'intérêt est de respecter la syntaxe correcte.
même si les navigateurs interprètent le code, il vaut mieux respecter les règles.
on "pourré aicrire come sa", on comprendrait, mais ca serait moins correct, moins lisible et moins accessible. (que donnerait un logiciel d'interprétation vocale par exemple...)

Si tu as besoin d'aide pour un passage à une écriture plus propre, n'hésite pas Smiley cligne

damjal

22 Nov 2005 à 14:56

oui, je comprend le discours, je suis malheureusement instinctivement un peu feignant... mais je me soigne !

j'ai jeté un coup d'oeuil dans les tutos, l'utilisation des css pour les tableaux est intéressant, mais je ne vois pas comment obtenir le redimenssionnement automatique des cellules qui est bien pratique avec les tableaux quand on manque de place et que le contenu des cellules est différent.
Il manque aussi les bordures des cellules...


.menuhaut {
float: right; /* on aligne le menu vertical à droite de son conteneur, head3 */
margin-right: 10px;
margin-top: 10px;
}

.menuhaut a {
font-size: 16px;
font-weight: bold;
color: #060C6F;
text-decoration: none; /* pour éviter le soulignement au survol */
margin-left: 20px; /* espacement entre chaque sous-menu */
}

<div class="menuhaut">
  <a href="...">Accueil</a>
  <a href="...">Produits</a>
  <a href="...">Catalogue</a>
  <a href="...">Forum</a>
  <a href="...">Contacts</a>
</div>

Il doit bien y avoir une solution avec un overflow visible dans chaque cellules, qui alors devrait être chacune définies dans un div... ça me parait beaucoup de code en perspective.

Tu doit connaitre des astuces là dessus ?

~~supprimé~~

22 Nov 2005 à 15:09

pour une application de type menu, tu peux t'inspirer des modèles existants:
http://css.alsacreations.com/Galeries-de-menus-en-CSS

tu auras un exemple de bordures, et les "cases" s'ajustent automatiquement à leur contenu

damjal

22 Nov 2005 à 15:13

impeccable, avec ça je suis servi

Merci beaucoup pour ton aide

A plus

~~supprimé~~

22 Nov 2005 à 15:16

un petit [Résolu] ? Smiley cligne

damjal

22 Nov 2005 à 15:18

oups oublié...

[Résolu]

dommage qu'il ne figure pas dans la liste des tags sous la fenêtre de saisie...

Raphael

Administrateur

22 Nov 2005 à 15:22

damjal a écrit :
dommage qu'il ne figure pas dans la liste des tags sous la fenêtre de saisie...

Bah, ça prend 2 minutes.
Je pense que c'est pas chèr payé de perdre 2 min lorsqu'on vient de résoudre son problème, non ?

Oryo

22 Nov 2005 à 15:27

Feignant jusqu'au bout lol Smiley lol

damjal

22 Nov 2005 à 17:49

en fait c'est surement parce que le sujet n'était pas tout à fait résolu, que j'ai oublié de le préciser...

Après maintes tentatives de création de menus avec css, j'ai réussi à en faire un qui me plaisait, mais 2 problèmes reste présents :

- Je ne sais pas comment faire pour que les largeurs des <li> s'étendent automatiquement pour qu'au bout du compte le menu tienne pile poil dans ma boite div. (si pas possible, tant pis, je le ferait en "dur")
- impossible de réduire les marges internes de mes boutons submit (apparemment ce n'est pas possible..., et c'est très embétant !)


<html>
<head>
<title>Interface membre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.sub_lien { 
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none; 
	background: #f4f4f4;
	cursor: pointer;
	text-decoration:underline;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bolder;
	color: #666666;
}

#navcontainer
{
margin: 0;
padding: 0 0 0 0px;
}

#navcontainer UL
{
list-style: none;
margin: 0;
padding: 0;
}

#navcontainer LI
{
display: block;
margin: 0;
padding: 0;
float: left;
width: auto;
color: #444;
display: block;
width: auto;
text-decoration: none;
background: #f4f4f4;
margin: 0;
padding: 0px 0px;
border-left: 1px solid #fff;
border-right: 1px solid #aaa;
border-bottom: 1px solid #336699
}

#b_logo_gauche {
	margin: 0;
	padding: 0;
	float:left;
	width:240px;
	height:232px;
}
#b_info_haut {
	margin-bottom:0;
	margin-top:0;
	margin: 0;
	padding: 0;
	float:left;
	width:446px;
	height:232px;
	border:solid 2px #d8e4f1;
	background:#F1F5FA
}

</style>

</head>

<body topmargin=0 leftmargin=0>
<div id=b_logo_haut>
	<img src="../pics/800_haut.gif" width="800" height="160">
</div>
<div id=b_logo_gauche>
	<p>&nbsp;</p>
	<div align=center>
		<br>
  		JALLON Damien
  		<br>
  		<input type=button value=déconnexion name=decon onclick="window.location='../index_temp.php?sid=HTbs8lgh0lyyNdv&deconn=1'" class=bouton>          
  	</div>
</div>
<div id=b_info_haut>
	<form name=menu_haut method=post action=index.php>
	<input type=hidden name=sid value=HTbs8lgh0lyyNdv>
	<div id="navcontainer">
		<ul id="navlist">
			<li><span class=textegras>Services&nbsp;Utileo</span></li>
			<li><input type=submit name=condition value=CGV class=sub_lien></li>
			<li><input type=submit name=declare_site value="Declarer un site" class=sub_lien></li>
			<li><input type=submit name=contact value="Mail" class=sub_lien></li>
			<li><input type="submit" name="gestion_unite" value="Gest.&nbsp;des&nbsp;2&nbsp;unités" class="sub_lien" onclick="document.menu_haut.action='attrib.php';"></li>
		</ul>
	</div>
	</form>
	<p class="titre">Info UTILEO</p>
	<p class="texte">Vous devez déclarer vos sites pour les insérer dans les différents services</p>
</div>
</body>
</html>

Voila, ça continue...

A vot'bon coeur !

damjal

22 Nov 2005 à 17:56

petite précision : le problème des marges internes aux boutons est beaucoup plus embétant sous IE que sous Firefox car elles sont beaucoup plus grande quand la value du bouton est plus grande...

~~supprimé~~

22 Nov 2005 à 19:00

pour que tes <li> s'adaptent à la largeur du contenu, il suffit de leur donner une valeur en pourcentage (25% pour 4 éléments par exemple).
Attention toutefois à l'interpétation des largeurs de boïte

Pour ta deuxième question, peux tu poster une image de ce que tu voudrais obtenir ?

damjal

22 Nov 2005 à 20:14

merci pour ta réponse

1) je determinerai les bons pourcentage de chaque li en fonction de la taille que je désire obtenir pour chacun.
2) ci dessous l'image des boutons (pas terrible, mais on voit les marges quand même)

on peut y voir que malgré que les boutons soit affichés avec la même classe dans laquelle j'ai positionné margin:0, le bouton Mail a des marges insignifiantes alors que le bouton "Déclarer un site" a des marges énormes. (se sont des boutons submit)


.sub_lien { 
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none; 
	background: #f4f4f4;
	cursor: pointer;
	text-decoration:underline;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bolder;
	color: #666666;
	margin:0;
}

les marges existent toujours, et son d'autant plus grandes que la value du bouton est grande, impossible de les retirer.

Voila

Encore merci pour ton aide
Modifié par damjal (22 Nov 2005 - 20:15)

~~supprimé~~

22 Nov 2005 à 20:34

hum effectivement, je n'ai pas trouvé de solution, à part d'utiliser des images à la place des boutons texte.
http://www.ampsoft.net/webdesign-l/image-button.html

damjal

22 Nov 2005 à 22:54

oui, mais non, les images ça m'intéresse pas bien, je pense que je vais rester sur les <li> et faire mes submit par des onclick.
et adieu les tableaux !

Merci encore

Bye

~~supprimé~~

22 Nov 2005 à 22:57

onClick = pb d'accessibilité... Smiley rolleyes

damjal

23 Nov 2005 à 11:30

oui, je reconnais mais je n'ai pas vraiment le choix, il faut que je fasse un submit, et tant qu'on ne pourra pas enlever les marges internes des boutons, je ne pourrait pas utiliser les boutons !

Sujet clos