CSS et Formulaires

Bonjour,

Voila 2006 qui se termine avec un problème de CSS.


Je passe mes vacances à la réalisation de mon site web.
Pour ce faire, j'utilise PHP5, CSS et HTML. La page est page est découpée en 3 parties:
En haut, le header avec le logo.
A gauche, le menu graphique (un css spécial arrivera pour les mal-voyants).
Le reste, la page .

Le contenu actuel, se compose d'une page d'accueil, de news, de mon C.V. et d'un formulaire de contact.

Le résulat est génial sous Firefox (la transparence PNG est encore à implémenter pour IE), sauf le formulaire.

Comme vous pouvez le voir ici , le 2eme champ est renvoyé après le menu.
alors que je voudrais quelque chose comme cela la , avec le menu en plus
Voici le code litigieux.

#menu {
	float:left;
	margin-top: 0px;
	left:0;
	width: 250px;
	/*height: 450px;*/
}

Si je le retire de mon CSS cela fontionne correctement.
Voici le CSS complet.

html,body {
	color:white;
	background-color:black;
	background-image:url(resources/pictures/Asgardian_Background.png);
	background-attachment: fixed;
	background-repeat:no-repeat;
}

/* Cut the page into some "frames" */
#WebPage {
	position: absolute;
	width: 1024px;
}
#logo {
	margin-left: 660px;
	width: 1000px;
}
/* Define the default style for the site */
#Content{
	color:white;
	font-family: "Times New Roman", Arial;
	font-size: x-small;
	margin-left: 250px;
	margin-right: 25px;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: small;	
}
body>div#Content{
	font-size: small;
}
#Content h1 {
	font-family: Veranda, Arial;
	font-size: 2em;
	color: white;
}
#Content h2 {
	font-size: 1.5em;
	color: white;
}
#Content p {
	font-size: 1em;
	color: white;
}
#Content p:first-letter {
	font-size: 1.5em;
	color: white;
	font: bold;
}
#menu {
	float:left;
	margin-top: 0px;
	left:0;
	width: 250px;
	/*height: 450px;*/
}

#Contact {
	color:white;
	font-family: "Times New Roman", Arial;
	
	font-size: medium;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	padding-top: 10px;
	padding-left: 20px; 
	border: 1px solid #666;
        padding-right: 20px; 
        margin-bottom: 10px;
	font: bold;

}
#Contact input {
        width: 300px;
        margin-bottom: 10px;
}

#Contact textarea {
float: left;
        width: 700px;
        margin-bottom: 10px;
        padding-right: 20px;
margin-right: 50px;
}

#Contact label {
        display: block;
        text-align: left;
        float: left;
        width: 150px;
        padding-right: 20px;
}

#Contact .caseacocher {
	width:1em;
}

#Contact br {
        clear: left;
} 

.boutonEnvoi {
	width: 75px;
	margin-left: 10px;
}

Je ne comprend pas ce qui se produit .
J'ai vraiment besoin d'une solution, c'est si moche.

Merci

salut a toi

je veut bien t'aider mes comme ca ca va etre un peu dur il faudra que tu me conctate par msn et que l'on voit ensemble avec les fichiers c'est mieux!

si tu est ok voila mon MSN VivaTheBoss@hotmail.fr

Voila @++

edit : je vient de voir un peu ton site et c'est pas super super rien que dans

#menu {
float:left;

si tu veut que sous IE et FF tu est le meme rendu niveau placement il faut ajouter Display:inline;
Modifié par Viva (31 Dec 2006 - 16:40)

Bonjour,

Tu as un probléme de sortie de float avec ton menu, plutot que de tenter des choses farfelues, je te conseille de placer ton menu en absolute

#menu {
	position: absolute;
	width: 250px;
	/*height: 450px;*/
}

Cela devrait réger ton problème je pense