Discussion :

[Iceman77]

Bonjour à tous,

j'ai un petit souci dans la mise en forme d'un site, qui se traduit par le fait qu'un champ texte d'un formulaire semble déborder à droite (visuellement le champ texte en question ne se "ferme" pas à droite). Je pense qu'il y a un mélange entre les attributs size et style dans les balises, mais ce n'est pas simple... Sinon je pensais à un problème dans les spécifications de IE7, à voir si tout le reste échoue. J'ai parcouru les forums mais rien ne semble pouvoir s'appliquer dans mon cas...

Je vous mets le code simplifié de la ligne à la suite :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<table cellspacing="0" cellpadding="0"> 
<tr> 
<th>Date</th> 
<td colspan="3" style="white-space:nowrap;width:15%;" ><input type="text" size="30"></td> 
<th>Type</th> 
<td colspan="2" style="white-space:nowrap"><input type="text" size="2" style="width:auto;vertical-align:middle" ></td> 
<th>Auteur</th> 
<td style="white-space:nowrap;width:30%;" > <input type="text" size="60"></td> 
</tr> 
</table>

Je ne suis pas un spécialiste des css et ce problème est bien embêtant pour la mise en forme de la page, vouyez-vous ce qu'il faudrait changer pour que le champ "Auteur" ne déborde plus à droite ?

Merci d'avance^^Configuration: Windows XP
Internet Explorer 7.0

[kaiser59]

Salut,

La meilleure chose à faire est d'abandonnée les tables, tu peux très bien faire ton formulaire avec d'autres balises, il existe des exemples sur le web.

Exemple vite fais :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<p style="width:600px;text-align:left;"><label style="float:left;width:250px;font-style:italic;">Nom :</label><input type="text" name="nom" size="20" /></p>
<p style="width:600px;text-align:left;"><label style="float:left;width:250px;font-style:italic;">Prénom :</label><input type="text" name="prenom" size="20" /></p>
<p style="width:600px;text-align:left;"><label style="float:left;width:250px;font-style:italic;">Adresse :</label><textarea name="adresse" cols="40" rows="3" /></p>

[HiRoN]

Salut,

Je viens d'essayer ton code et je n'arrive pas à visualiser l'erreur... (testé sous IE7 )
As-tu essayé de voir le comportement en réduisant le size="60" ? ou en diminuant le width:30% ?

De +, pourquoi avoir appliqué un white-space:nowrap; ? (je n'en vois pas l'utilité)

EDIT : +1 sur ce que te propose kaiser59