[Résolu] Balise <center>

Bonjour à tou(te)s,

Voilà plus de 2h que je recherche une solution à mon problème de dimension de ma balise <center>, qui contient un formulaire de contact par mail, et que je voudrais réduire en hauteur.
Il m'est impossible (que ce soit sous css, html, php, xml, etc...) de modifier la taille du conteneur de mon formulaire de contact mail.
Voici les codes que j'ai:

HTML:

<center>
<script type="text/javascript" src="swfobject.js"></script>
<div id="CC5819944">Form Object</div>
<script type="text/javascript">var so = new SWFObject("new.swf", "new.xml", "549", "424", "7,0,0,0", "#ffffff");so.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");so.addParam("quality", "high");so.addParam("scale", "noscale");so.addParam("salign", "lt");so.addParam("wmode", "transparent");so.addParam("FlashVars", "xmlfile=new.xml&w=549&h=424");so.write("CC5819944");</script> 
</center>

CSS:

#CC5819944{
width:580px;
margin:10px 0 0 0;
background-color : rgba(204, 204, 204, 0.4);
border-style:solid;
border-width:3px;
color:#000;
}

XML:

<?xml version="1.0" encoding="UTF-8"?>

<form url="new.php"
window="_self"
method="POST"
fontname="MS Sans Serif"
border="3"
width="549"
height="424"
bkcolor="0xFFFFFF"
transparent="t"
fontcolor="0x000000"
themecolor="0xFFFF99"
fontcolor2="#000000"
bkcolor2="#FFFFFF"
includeresults="false"
emailuser="true"
verifymessage="Votre adresse mail ne fonctionne pas !"
reqmessage="Tous les champs sont requis"
invalidemailmsg="Votre adresse n'est pas valide, merci de la corriger."
transition="0"
autoresponseincluderesults="f"
autoresponseaddtotop="f"
usephp="true"
disableclicktoactiveprompt="true"
extensions="*.txt;*.gif;*.jpg;*.jpeg;*.zip;*.doc;*.png;*.pdf;*.rtf"
>

<hidden
name="subject"
value="Demande professionnelle"
></hidden>

<textinput
name="name"
x="180"
y="43"
w="324"
h="22"
initvalue=""
bkcolor="0xFFFFFF"
fontname="Arial"
fontcolor="0x000000"
editable="true"
>
</textinput>

<textinput
name="Email Address"
x="180"
y="101"
w="323"
h="22"
initvalue=""
bkcolor="0xFFFFFF"
fontname="Arial"
fontcolor="0x000000"
emailbox="true"
editable="true"
restrict="email"
>
</textinput>

<textarea
name="comment"
x="180"
y="156"
w="322"
h="120"
initvalue=""
wordwrap="true"
editable="true"
bkcolor="0xFFFFFF"
fontsize="12"
fontname="Arial"
fontcolor="0x000000"
></textarea>

<submitbutton
name="Submit Button"
x="340"
y="333"
w="160"
h="40"
label="send"
fontname="Georgia"
fontcolor="0x000000"
image="/Images/envoyer.png"
fontsize="12"
></submitbutton>

<label
name="My Text 1"
x="36"
y="162"
w="122"
h="19"
text="Votre Message:"
fontbold="bold"
fontname="Arial CE"
fontcolor="0x000000"
fontsize="17"
></label>

<label
name="My Text 3"
x="36"
y="102"
w="100"
h="19"
text="Votre Email :"
fontbold="bold"
fontname="Arial CE"
fontcolor="0x000000"
fontsize="17"
></label>

<label
name="My Text 4"
x="36"
y="44"
w="94"
h="19"
text="Votre Nom :"
fontbold="bold"
fontname="Arial CE"
fontcolor="0x000000"
fontsize="17"
></label>

<resetbutton
name="Reset Button"
x="50"
y="333"
w="160"
h="40"
label="Reset"
fontname="Arial"
fontcolor="0x000000"
image="/Images/annuler.png"
fontsize="12"
></resetbutton>

</form>

Merci pour votre aide
Modifié par valttt (13 Apr 2016 - 17:50)

Bonjour,

Ton CSS cible l'élément dont l'id est #CC5819944, or je ne le vois nulle part dans le document HTML.

Pourquoi ne cibles-tu pas tout simplement l'élément HTML <center> en CSS ?

center { /* des trucs */ }

EDIT : de tête mais je ne suis pas sûr (<center> étant obsolète depuis belle lurette), il me semble que <center> ne centre que du contenu inline ou textuel, et non des blocs.
Modifié par Raphael (13 Apr 2016 - 15:08)

Salut,

Ton script à l'air super vieux donc les idées suivantes ne seront peut-être pas fonctionnelles...
Raphael n'a pas vu ton <div id="CC5819944"> car il est perdu dans tes <scripts> et que tu n'utilises pas la coloration syntaxique sur ton post, c'est pas simple de lire ton code.

Donc tu cibles bien ton id et tu pourrais éventuellement styler ce bloc mais tu dis qu'il t'est impossible de modifier cette <div>, pourquoi ? Ce bloc est généré en JS ?

Sinon, tu peux limiter la hauteur de <center> en commençant par remplacer cette balise obsolète comme le précise Raphael par une balise générique <div>.
Tu peux ensuite donner une classe à cette dernière, par exemple ".form-container".
Tu pourras donc ensuite faire un truc comme ça :

.form-container{
  text-align: center; /*pour retrouver le comportement du <center>*/
  height: 300px; /*ta hauteur limitée*/
  overflow: hidden; /*si tu veux que ta hauteur soit réellement limitée*/
  overflow-y: scroll; /*si tu veux une barre de défilement verticale*/
}

A moins que je n'aie pas compris ta question...

EDIT : tu peux remplacer overflow-y: scroll; par overflow-y: auto; la barre de défilement ne s'affichera que si ton enfant est plus haut que ton parent...
Et remplacer le "height" par un "max-height", dans ton cas ça sera plus clean.
Modifié par MatthieuR (13 Apr 2016 - 16:16)

Merci pour votre aide.
Oui, je suppose, car pour fonctionner, ma page utilise les fichiers:
- contact.html
- contact.css
- new.php
- new.xml
- new.swf
- swfobject.js
- _index.php (je suppose que c'est pour l'utilisation de Wamp)
- _testmysql.php (je suppose que c'est pour l'utilisation de Wamp)

A titre d'info, je ne connais rien en codage html, css, java, php et autres....alors je crée mon site avec l'aide de plusieurs forum et cours sur le web et Kompozer, mais il ne comprends pas le java, alors je suis bloqué.
Oui, mon code est un peu vieux, car je l'avais utilisé pour la création de mon 1er site web (fait au bloc note il y à ~6 ans) et je veux utiliser le même formulaire de contact via mail sur ce dernier car
il fonctionnait du tonnerre
Je sais, je suis un peu taré

Si je veux diminuer la hauteur de mon formulaire, c'est justement pour ne pas avoir de scrollbar, donc j'ai enlevé la dernière ligne de code.
Dans ce cas, je perds le fond banc/avec transparence de mon formulaire (background-color : rgba(204, 204, 204, 0.4);), mais aussi les boutons pour envoyer ou annuler.
Modifié par valttt (13 Apr 2016 - 19:25)

Ok, on va reprendre un peu à la base.
Que veux-tu faire ?
Afficher ton formulaire dans une "boîte" plus petite ?
Comment veux-tu afficher un formulaire plus grand que son "container" sans ajouter de scrollbar ?
Sinon, il faut que tu réduises la hauteur chaque élément de ton formulaire, tes input, textarea, select, labels... et là tu gagneras en hauteur...

Peux-tu poster ici, le code html généré par ton XML, en fait ce que tu vois vraiment dans ton navigateur ("code source de la page") ? On y verra plus clair. Peut-être contact.html.

Merci MatthieuR,

Oui, je veux afficher mon formulaire dans une "boîte" plus petite, et pour cela il faudrait que j'arrive à réduire l'écart que j'ai (toutes les flèches rouge) pour au final diminuer la taille de mon container (flèche verte) afin que ma page s'affiche sans scollbar.



Contact.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

  
  <meta charset="UTF-8">

   <link rel="stylesheet" href="Contact.css"><title>Contact</title></head><body>
<div style="text-align: center;"><img style="width: 790px; height: 124px;" alt="" src="Images/Logo.png"> <br>

<img style="width: 318px; height: 97px;" alt="" src="Images/toto.png"><br>
<br>
</div>

<div id="texte_1"> Texte......
</div>
<center>
	
	<script type="text/javascript" src="swfobject.js"></script><div id="CC5819944">Form Object</div><script type="text/javascript">var so = new SWFObject("new.swf", "new.xml", "549", "400", "7,0,0,0", "#ffffff");so.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");so.addParam("quality", "high");so.addParam("scale", "noscale");so.addParam("salign", "lt");so.addParam("wmode", "transparent");so.addParam("FlashVars", "xmlfile=new.xml&w=549&h=400");so.write("CC5819944");</script> 

</center>
<br>
</body></html>

Ok, c'est un peu plus clair.
J'ai quand même l'impression que ton formulaire est un formulaire en Flash et là, t'es mal car tu n'as pas la main sur le fichier .swf sauf au travers du fichier .xml qui est le fichier de configuration du .swf.
Tu peux tester la modification des valeurs y="" des "textinput" pour voir si c'est mieux.

Dans tous les cas, c'est vraiment pas terrible et il faudrait penser à refaire ce formulaire en HTML5 bien propre avec un CSS bien propre. C'est pas compliqué et la partie la plus délicate doit être déjà faite (dans ton fichier new.php). Il faudrait d'ailleurs que tu postes ici le contenu de ce dernier fichier.

Tu as posté le contenu de ton fichier contact.html (depuis ton éditeur) ou bien le code source depuis ton navigateur ?

C'est bon, j'ai réussi ce que je voulais faire (en parti) car c'est pas fini, mais je sais que tu as raison, il faudrait que je fasse une page plus propre en html5.
Le problème est que je n'y connais vraiment rien et je tatonne pour trouver, mais bon, à part le formulaire, ma page est très simple.
C'est bien en modifiant le y que j'arrive à diminuer tout ça
De plus, c'est pas facile avec les éditeurs quand on n'y connais rien en html et autres language...

PS: c'est en copiant collant le contenu du fichier html que j'ai envoyer le contenu, mais le code source affiché est identique.
Le code source de la page au niveau du formulaire est impossible à avoir car c'est ouvert avec Flash player (??? j'y comprends rien...lol)

Je vais essayer de continuer et reviendrais vous donner des news.
Encore merci pour votre aide

Mil merci
C'est fini, j'ai exactement ce que je souhaitait obtenir, hormis le fait que si j'ouvre mon site sous IE, le fond de mon formulaire n'est plus présent, donc on ne voit pas "Votre nom:" etc... puisque le background est très foncé, et que l'écriture est noire.
Est-ce le fait que IE ne gère pas :

background-color : rgba(204, 204, 204, 0.4);

?

En clair, je crois qu'il serait plus sage de tout refaire au propre avec html5/css3.
Si vous avez des pistes, je suis preneur
Modifié par valttt (14 Apr 2016 - 09:00)