28220 sujets

CSS et mise en forme, CSS3

[Résolu] Formulaire inclus dans un header : décalage

Bonjour,

je fais mon 1er site en utilisant les CSS (bravo !) :

- site centré de 760px de largeur;
- un header;
- un menu en dessous;

(il y aura par la suite un second menu à gauche et le corps du texte à droite, le tout sous le 1er menu)

CSS :

body {
margin: 0;
padding: 0;
text-align:center;
background-color: #CCCCAA;
}
#conteneur {
position: relative;
width: 760px;
margin-left: auto;
margin-right: auto;
text-align:left;
background-color: #CCCCCC;
border: 1px solid #666666;
}
#header {
height: 125px;
background: url(./header.jpg) no-repeat;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #666666;
}
#menuhaut {
height: 30px;
color: #666666; 
}


Dans le header, je voudrais mettre un formulaire d'inscription au site.

Je créé donc des id pour le login, mot de passe et bouton d'envoi, et je mets tout ca dans mon header (pour pouvoir les positionner comme je veux) :

CSS : 

#headerlogin {
color: #666666;
margin-top: 41px;
margin-left: 675px;
}
#headerlogin input {
font-size: 10px;
color: #666666;
}
#headerpass {
color: #666666;
margin-left: 675px;
}
#headerpass input {
font-size: 10px;
color: #666666;
}
#headersubmit {
color: #666666;
margin-top: 3px;
margin-left: 638px;
}
#headersubmit input {
font-size: 10px;
color: #666666;
}


HTML : 

<body>
<div id="conteneur">
	  <div id="header">
		<form method="post" action="client.php">
		<div id="headerlogin">
			<input type="text" name="utilisateur" size="9">
		</div>
		<div id="headerpass">
			<input type="password" name="motdepasse"  size="9">
		</div>
		<div id="headersubmit">		
			<input type="submit" value="Envoyer">
		</div>
		</form>  
	  </div>
	  <div id="menuhaut">	
		LE MENU  
	  </div>

</div>
</body>


Le résultat ici

Tout ca marche bien dans IE, mais pas sous Firefox Smiley bawling ... Je pense que ca vient du fait que Firefox décale le background du header à cause du formulaire, mais comment résoudre ce problème ?

J'ai essayé en mettant des padding dans le header au lieu de mettre des margin dans les id du formulaire mais ca ne fonctionne pas non plus...

une idée ?
Salut,

C'est vrai que c'est plutot bizarre : car tu as mis du margin pour #headerlogin et Mozilla semble l'afficher pour le #header ... d'ailleurs si tu rajoute un espace derriere <DIV id=header> ca passe nikel. Ce qui donne : <DIV id=header>&nbsp;

Mais je te conseil plutot de remplacer ton margin-top : 41px par padding-top :41px ; et le pb sera régler !
Oui j'ai essayé avec le padding-top, mais ça décale le problème vers le bas Smiley rolleyes (marge au dessus du menu)

Bon avec l'espace ça a l'air de marcher, c'est pas très propre mais bon... merci !

EDIT :

Bon alors autre solution, j'ai enlevé le "superflu" : 


#headerlogin input {
margin-top:41px;
margin-left: 675px;
font-size: 10px;
color: #666666;
}
#headerpass input {
margin-left: 675px;
font-size: 10px;
color: #666666;
}
#headersubmit input {
font-size: 10px;
color: #666666;
margin-top: 3px;
margin-left: 638px;
}


Et là ca marche... va comprendre Smiley confus

Y'a juste la taille des zones input qui apparait différemment sous IE suivant le type (texte ou password) mais bon c'est pas très grave...

EDIT 2 : résolu aussi, question de famille de police non définie Smiley cligne
Modifié par gsk (13 Apr 2005 - 16:19)
Bonjour,
pour avoir eu un problème similaire, il semble que Mozilla reconnaît le type "champs de formulaire", et applique sa css par défaut. Le mieux serait donc d'utiliser la balise adaptée ("<fieldset></fieldset>") pour ton champ / bloc, au lieu de multiples "div", et d'appliquer la css / mise en forme à ton champ...

Arf ! je composais ma réponse le temps que tu envoyais la tienne... Smiley smile
Modifié par Macpom (13 Apr 2005 - 16:19)
Sujet clos
Aller à