28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Je me heurte à un problème assez génant dans un formulaire : sous IE (je n'ai pas testé avec d'autres versions de IE).
Le textarea s'affiche correctement lors du chargement de la page, mais lorsqu'on veut ajouter du texte à la suite, le textarea change de taille pour dépasser de la page.
Voici le code HTML de la partie incriminée :

<form action='index.php' method='post'>
    <dl>
        <dt>Nom du formulaire</dt>
        <dd>
            <dl>
                <dt>Nom affich&eacute; dans le menu</dt>
                <dd><input type='text' name='menuname' value="Retour à l&#039;accueil" /></dd>
                <dt class='textarea'>Contenu</dt>
                <dd class='textarea'><textarea rows='200' cols='100'  name='pagecontent'>(...je coupe le contenu)</textarea></dd>
            </dl>
        </dd>
        <dd><input type='submit' name='confirm' value='Enregistrer' /></dd>
    </dl>
</form>

Voici les règles CSS qui s'appliquent :

form dd dd{
    text-align:right;
}
contenu form dd dd input{
    width:200px;
}
form dl dl dt {
    float:left;
    clear:both;
}
form dt.textarea {
    float:none;
}
form dd.textarea textarea{
    width:100%;
    height:300px;
}


Pouvez vous m'aider, me guider ? Je n'arrive pas à trouver d'info sur internet....

Merci
hum il dépasse de quel côté ?
si tu définis des valeurs pour cols et rows dans ta balise <textarea>, celles-ci prévalent sur les valeurs de width et height CSS...

Essaye de les enlever, et de spécifier uniquement la taille en CSS
Merci pour tes réponses :
Ça dépasse sur la droite.
Cependant, note que :
1) Il semble que ça soit justement les valeurs de CSS qui prévalent sur les row et col (c'est du moins ce que j'observe).
2) Ce n'est pas valide de ne pas spécifier de valeur de rows et cols.
je n'ai lu nulle part que les attributs cols et rows étaient obligatoires.
d'ailleurs, cela serait plutot étrange, vu que c'est uniquement de la mise en forme, et non du contenu. Donc à définir en css, et non dans la balise textarea.

Pour revenir à ton probleme, l'architecture dt/dl semble poser problème, car si on sort le textarea de cette imbrication, le scroll se fait normalement.

voilà une piste, je n'ai rien d'autre pour l'instant Smiley langue
Modifié par yyoupla (15 Nov 2005 - 21:39)
Mon site est écrit en XHTML 1.1,
Mais de toute façons, je doute que ça règle le problème vu que c'est le CSS qui semble l'emporter
QuentinC, tu aurais un lien où cette déclaration est spécifiée ?

Ghusse,ton problème est-il que la barre de scroll n'aparait pas sous IE quand le contenu est long ?
Si c'est ça, c'est réglé en sortant le textarea des dt/dl...
donc structure à revoir
Bah, j'en doute vu que le textarea a une taille normale si on touche à rien, et juste le fait d'écrire 1 seul caractère la fait partir en sucette... seulement sous IE...
Sinon, je veux bien tenter de le virer des dl...
essaye juste de déplacer ton textarea en dehors de la strcuture dt/dl
(ou d'en mettre un autre, pour voir la différence)
le width:100% semble poser problème.
si tu fixe la largeur du textarea à une valeur fixe, le scroll fonctionne normalement...
Oui, mais le problème, c'est que tout le monde n'utilise pas la même résolution d'écran....
Arrivez vous à reproduire ce comportement ?
Bonjour

J'ai exactement le même problème et je tourne en rond dessus sans solution. Est-ce que tu as trouvé une solution ?
Je vois ça dans plusieurs sites ou il a des formulaires avec text area.
Merci du suivi si tu as une solution (autr que celle de jeter IE à la poubelle, certains n'ont pas le choix de leur navigateur !)
je ne connais pas l'origine du bug mais

essai ca


/*form dt.textarea {
    float:none;
}*/
form dd.textarea textarea{
	width:100%;
	height:300px;
	_float:right;
	_width:95%;
	_margin-left: 5%;
}


A+
Modifié par gege71 (27 Mar 2006 - 12:54)
Yes !!!
en tous cas pour le problème de gege71 (j'espère pour lui qu'il repassera par ici !)

pour le mien maintenant il va falloir que je cherche la "quantité minimale de code qui reproduit le bug" ce qui risque d'être plus coton. Mais au moins, je sais que d'autres rencontrent ce bug et qu'il doit bien y exister une solution. Ca redonne le courage de chercher !
merci merci Smiley smile
je suis naze... j'avais pas fait attention a qui m'a répondu ! j'espère qu'au moins tu auras bien ri Smiley ravi
Et Ca y est, j'ai enfin réussi à appliquer ta soluce à mon problème et je la transmets sur wikinimst d'où venait le code original. Le problème était en passant en mode édition sur xlwiki.free.fr et sur les autres wikis utiilsant le même moteur.
encore merci.