18041 sujets

Questions générales et questions de débutants

[ RÉSOLU ] Problème avec formulaire & Background

Bonjour à toute la communauté

Voilà, j'ai mon site internet avec un background... Je l'ai fait en CSS et avec une div dans le corps html

tout marche bien sauf que lorsque je veux mettre un formulaire, le background se met toujours en avant plan par rapport au formulaire, pourtant dans le html il est bien placé en arrière...

code HTML
<div id="background"></div>


code CSS
#background {
	width:1000px;
	height:1200px;
	display:block;
	float:left;
	position:absoluted;
	top:0px;
	left:50%;
	margin-left:-500px;
	background-color:#ffffff;
}


code formulaire dans html

<form id="contactFormPro" method="POST" action="./WebPro_CFP_Validator.php?javascript=no">
<fieldset>
<p id="contactNameBlock">
<!-- %NameErrorPlaceholder -->
<label for="contactName">Name:</label><br />
<input type="text" name="contactName" id="contactName" value="" />
</p>
<p id="contactEmailBlock">
<!-- %EmailErrorPlaceholder -->
<label for="contactEmail">E-mail:</label><br />
<input type="text" name="contactEmail" id="contactEmail" value="" />
</p>
<p id="contactPhoneBlock">
<!-- %PhoneErrorPlaceholder -->
<label for="contactPhone">Phone:</label><br />
<input type="text" name="contactPhone" id="contactPhone" value="" />
</p>
<p id="contactWebsiteBlock">
<!-- %WebsiteErrorPlaceholder -->
<label for="contactWebsite">Website:</label><br />
<input type="text" name="contactWebsite" id="contactWebsite" value="" />
</p>
<p id="contactMessageBlock">
<!-- %MessageErrorPlaceholder -->
<label for="contactMessage">Message:</label><br />
<textarea name="contactMessage" id="contactMessage" rows="10" cols="85"></textarea>
</p>
<div id="captchaBlock">
<!-- %CaptchaErrorPlaceholder -->
<span id="captcha">
<img src="./core/WebPro_Captcha.php?reload=yes" />
</span><br />
<label for="captchaCode">Code:</label>
<input type="text" name="captchaCode" value="" id="captchaCode"/>
</div>
<div id="submitButtonWrapper">
<input class="contactFormSubmit" type="submit" name="contactFormSubmit" id="contactFormSubmit" value="Send Message" />
</div>
</fieldset>
</form>
</div>



Voilà, j'ai fais des recherches mais pas trouvé de réponses
Modifié par properso (04 Jul 2011 - 11:10)
Salut,

Pour ma part j'ai tendance a utilisé des z-index, c'est pas glorieux mais c'est rapide:
#background 
{
 z-index: 10;
}
#corps 
{
 z-index: 20;
}
@properso > Personnellement, je ne comprends pas très bien ton code CSS pour ton div #background. Smiley rolleyes Que veux-tu faire en fait?
Tu dis que tout marche bien, mais d'ici, on ne voit pas grand chose ...
Ne devrais-tu pas mettre ton formulaire dans ton div #background?
Modifié par lddsoft (01 Jul 2011 - 18:15)
position:absolute;
position:absoluted;

heu, c'est pas toi qui te trompes ???

Sanoc :
oui, ça fonctionne avec les z-index
je ne connaissais pas cette fonction, ça permet de définir les avants-arrières plans de la div, c'est ça ??
Ah bon y'a un d???
Je suis pas aller vérifier j'ai une flemme xD
Sa doit surement faire la même chose

Ouep z-index défini les niveaux d'affichage. Personnellement je les maitrise très mal alors je vais pas trop t'expliquer les cas d'utilisation mais regarde au car sur google.

Il y a pas mal de balise peu connu a savoir: min-width, z-index, etc...
Mais bon des fois sa sert, mais on apprend sur le tas Smiley cligne

@lddsoft ->

Non son background est derrière comme son nom le laisse penser, il doit avoir un gros panneaux de décoration et son contenu par dessus.


Aller bon codage, et au plaisir Smiley cligne
(je suis de passage, moi c'est le SdZ ma communauté)
Modifié par sanoc (01 Jul 2011 - 18:40)
Bonjour, si tu veux de l'aide, il serait bon de donner plus d'explications ou le code complet de ta page...

Je me pose les mêmes questions que Iddsoft...

Et pour finir:

position: absolute;


est la bonne syntaxe
Il a une div de background... Elle va au fond comme son nom l'indique.
Il a un formulaire qui ne fait pas parti de cette div, donc qui fait parti d'une autre.

De la je ne vois pas ce qui manque dans son explication, certes c'est pas très clair, mais si on touche un peu on voit ou est le problème et il y a toute les information.

Bon de toute manière le sujet est résolu, donc pas bien grave.
(sa me revient comme sa, mais je crois que z-index marche peut être que avec les absolute, je dit sa mais vérifie bien xD)
properso a écrit :
position:absolute;
position:absoluted;

heu, c'est pas toi qui te trompes ???


Non, non ce n'est pas lui. Smiley cligne
a écrit :
properso a écrit :
position:absolute;
position:absoluted;

heu, c'est pas toi qui te trompes ???



->Non, non ce n'est pas lui. cligne


Mais c'est pas l'autre non plus...
Vient plutôt m'expliquer pourquoi mon template il est plein d'erreur xD
@sanoc > Merci de veiller à utiliser un français correct sur ce forum Smiley cligne .

P.S.: en ce qui concerne le sens du mot "background", sache que j'ai été agrégé d'anglais pendant plus de 30 ans Smiley cligne Smiley cligne .

sanoc a écrit :
(je suis de passage, moi c'est le SdZ ma communauté)

C'est pas vraiment une pub pour elle!
Modifié par lddsoft (01 Jul 2011 - 20:16)
Oula Mr s'énerve....

a écrit :
Merci de veiller à utiliser un français correct sur ce forum

Je ne suis pas bon en français, cependant:
-Je m'efforce de faire une correction orthographique sur mes post afin de corrigé le plus gros
-Je n'écris pas en SMS
-Je ne me permet pas beaucoup de jargon afin de ne pas en perdre en route parfois

Donc il faudra repasser plus tard pour un français correct, d'ici que j'ai pu prendre des cours... Pour autant j'assume pleinement cela et tu a raison, je ne chercherai pas la petite bête

P.S.: en ce qui concerne le sens du mot "background", sache que j'ai été agrégé d'anglais pendant plus de 30 ans a écrit :


Je ne connais pas ton âge, ta profession, ton milieu social, ni même la taille de ta cheville... Il n'y avait donc rien de bien méchant, je préciser cela car pas plus tard que ce matin un petit comprenait pas Background.

De plus le 'laisse penser' laisser place a un doute, car il aurait pu coder salement et laisser une ancienne div pour combler le trou... Voir même avoir plusieurs background...

a écrit :
C'est pas vraiment une pub pour elle!

Qui te parle de pub, je signaler juste que sa ne servait a rien de me demander un autre truc ici. Il savait ou me trouver si besoin était! (Ne t'inquiète pas je viens d'avoir ma réponse et je ne tarderai plus)

Cependant je te signale que je n'ai que 17ans, ce qui fait de moi un 'amateur'. Pour autant j'arrive a aider les autres, et je tourne aussi sur infodunet dans mes heure perdu pour aider des gens dans tout les domaines...

Alors perd pas ton temps a venir pleurer dans les jupes, bouge tes phalanges, va aider du monde, va aider ta femme/ ton homme, aimer tes enfant.

Pour ma part je viens de passer toute mon après midi a attendre une réponse, et j'ai répondu a une 20ène de question en attendant.

Une autre remarque?
Tes pas vraiment une pub pour celle la non plus...tu continue de parler sur ce sujet résolu depuis la première réponse... tu perd du temps d'aide... tu te sent attaquer sans raison...
Modifié par sanoc (01 Jul 2011 - 20:39)
Ne le prends pas forcément mal, tu as pris pour pas mal de gens aussi xD
Mais je suis la pour donner une réponse et changer de topic, je n'aime pas me prendre le nez.

Bonne soirée a toi aussi
bon, pour ma part, j'ai eu la solution à ma réponse...


je suis désolé si je n'ai pas été clair, mais le background était bien de la page et non du formulaire, j'ai mis du code z-index et ça fonctionne bien...

Pour ma première demande d'aide, ne vous disputez pas, je demandais une aide amicale, ma première explication était peut-être pas très claire...

La plupart du temps, j'essaye de trouver les solutions par moi-même avec google et alsacreation qui me sont d'une grande aide Smiley smile

Merci beaucoup à tous de votre aide Smiley smile
Bonjour properso,

En fait, les z-index ici ne servent strictement à rien.
Les 2 erreurs dans ton code étaient les suivantes :
1- orthographe de "absolute",
2- absence de "position: relative;" pour le formulaire ou le div qui le contient (tu ne donnes pas tout le code)
Preuve de ce que j'avance :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>positionnement z-index</title>
    <style type="text/css">
/*<![CDATA[*/
#background {
	width:1000px;
	height:1200px;
	display:block;
	float:left;
	position:absolute;
	top:0px;
	left:50%;
	margin-left:-500px;
	background-color:#ccc;
}
#corps {
	position: relative;
	background: #ffff33;
	width:1000px;
	margin:0 auto;
}
    /*]]>*/
    </style>
  </head>
  <body>
<div id="background">&nbsp;</div>
<div id="corps">
	<form action="#">
		<fieldset>
		<legend><b>Vos coordonnées</b></legend>
			<p>Votre nom : <input type="text" size="15" /></p>
			<p>Votre prénom : <input type="text" size="15" /></p>
			<p>Votre adresse mail : <input type="text" size="15" /></p>
		</fieldset>
	</form>
</div>
  </body>
</html>

Comme tu le vois, pas de z-index et ça fonctionne (du moins ça devrait...)
Sujet clos
Aller à