[Résolu] Problème de positionnement div et fieldset...

Question

Eagle2000

2 Jul 2008 à 22:19

Bonjour à tous,

Bon ben voilà, je suis de nouveau coincé !
Je suis en train de refaire un site pour une association, et je suis en train de bosser sur la partie "Contact".
Pour cela, mes pages sont construites de la façon suivante :

Header

Body -> le body contient une div (id=conteneur) qui englobe son contenu

Footer

Pour ma partie "contact", cette div conteneur contient 2 fieldsets comme vous pouvez le voir sur ma capture.
1 à gauche (float: left;) et 1 à droite (float: right;).

Mon souci, c'est que sous IE7, la couleur de fond est bien positionnée derrière les fieldsets, en revanche sous Firefox, c'est comme sur la capture... Smiley decu

Pensant à une erreur de ma part, je les ai inclus dans une autre div (id=contact), mais rien n'a changé.
Pourtant mon problème vient bien de là, car si je force la hauteur de la div "contact" à height: 200px par exemple, la couleur descend bien derrière les fieldsets.

Voici le code CSS en question :


body {
	margin: auto;
	width: 1024px;
	border: 1px solid #000000;
	color: #000000;
	background-color: #3D3D3D;
	padding: 0;
	font-size: 12px;
	font-family: arial, sans-serif;
	text-align: center;
}

/* Mise en page du contenu central des pages */
div#conteneur {
	margin: auto;
	width: 994px;
	border: 0px solid #000000;
	color: #000000;
	background-color: #704522;
	padding: 15px 15px;
	text-align: left;
}

div#contact {
	margin: auto;
	text-align: center;
}

/****************/
/* AUTRE MOYENS */
/****************/
fieldset#contact_autre {
	text-align: left;
	width: 300px;
	margin-left: 50px;
	float: left;
}

/************/
/* PAR MAIL */
/************/
fieldset#contact_mail {
	text-align: left;
	width: 500px;
	margin-left: 25px;
	margin-right: 50px;
	float: right;
}

Auriez-vous une idée pour résoudre mon problème car là... je sèche.
Merci par avance de votre aide.

Modifié par Eagle2000 (04 Jul 2008 - 19:43)

Tony Monast

Modérateur

2 Jul 2008 à 22:32

Bonjour,

Si j'ai bien saisi le problème, voici ce que je ferais :


<div id="conteneur">
<fieldset ...>

</fieldset>

<fieldset ...>

</fieldset>

<div style="clear:both">&nbsp;</div>
</div>

L'idée est de mettre un élément avec un clear both à la fin du contenu flottant, mais toujours à l'intérieur du contenant. Les éléments flottants n'influencent plus la hauteur de leur conteneur, le clear permet de revenir dans le flux de la page.

Personnellement, j'utilise un div avec une class, et je déclare le clear:both dans ma feuille de style. Tu peux toutefois utiliser d'autres éléments.

Si je peux faire une remarque, je te dirais que le premier fieldset ne devrait pas être utilisé puisqu'il ne contient aucun champ de formulaire.

Dans le cas où ma solution n'est pas la bonne, pourrais-tu fournir aussi le code HTML?
Modifié par Tony Monast (02 Jul 2008 - 22:34)

Eagle2000

3 Jul 2008 à 18:17

Bonjour Tony.

J'ai essayé de rajouter la div comme tu me le conseillais, mais rien n'a changé... j'ai toujours ce problème de conteneur sous Firefox.
Pour le 1er fieldset, je suis entièrement d'accord avec toi... mais visuellement, je trouve plus esthétique d'avoir 2 "cadres" de même type, plutôt qu'un fieldset et un cardre autre fait avec CSS.

Je te mets donc ci-après le code qui génère mes pages en espérant que ça aide... (c'est du PHP Smiley smile

).

HEADER :


<?php
echo "<html lang=\"".$aConf["global"]["lang_abbreviation"]."\" dir=\"".$aConf["global"]["lang_direction"]."\">\n";
echo "    <head>\n";
echo "        <link rel=\"stylesheet\" href=\"".$sRacineSite."/themes/".$aConf["global"]["theme"]."/style.css\" type=\"text/css\" media=\"all\" />\n";
echo "        <link rel=\"shortcut icon\" href=\"".$sRacineSite."/images/favicon.ico\" type=\"image/x-icon\" />\n";
echo "        <link rel=\"icon\" href=\"".$sRacineSite."/images/favicon.ico\" type=\"image/x-icon\" />\n";
echo "        <title>".TITRE_BARRE_TITRES."</title>\n";
//On écrit les balises META
echo "        <meta http-equiv=\"Content-Type\" content=\"text/html; charset=".$aConf["global"]["lang_charset"]."\" />\n";
echo "        <meta http-equiv=\"Content-Style-Type\" content=\"text/css\" />\n";
echo "        <meta http-equiv=\"Content-Style-Type\" content=\"text/javascript\" />\n";
echo "        <meta http-equiv=\"Content-Language\" content=\"".$aConf["global"]["lang_abbreviation"]."\" />\n";
echo "        <meta name=\"author\" content=\"".NOM_DEVELOPPEUR."\" />\n";
echo "        <meta name=\"generator\" content=\"Bloc-Notes\" />\n";
echo "    </head>\n";
?>

BODY :


<body>

<div id="bandeau_haut">
	<div id="logo">
		<a href="<?php echo $sRacineSite; ?>/index.php" class="" title="<?php echo $aLang["infobulle"]["accueil"]; ?>"><img src="<?php echo $sRacineSite.PATH_IMAGES_SITE; ?>logo_150.png" title="<?php echo $aLang["infobulle"]["accueil"]; ?>" alt="<?php echo $aLang["infobulle"]["accueil"]; ?>" /></a>
	</div>	
</div>

<div id="barre_menus_conteneur">
        <ul id="menu_horizontal">
		<li class=""><a href="<?php echo $sRacineSite; ?>/index.php" title="<?php echo $aLang["infobulle"]["accueil"]; ?>"><?php echo $aLang["menus"]["accueil"]; ?></a></li>
		<li class=""><a href="<?php echo $sRacineSite.PATH_NEWS; ?>" title="<?php echo $aLang["infobulle"]["news"]; ?>"><?php echo $aLang["menus"]["news"]; ?></a></li>
		<li class=""><a href="<?php echo $sRacineSite.PATH_EVENEMENTS; ?>" title="<?php echo $aLang["infobulle"]["evenements"]; ?>"><?php echo $aLang["menus"]["evenements"]; ?></a></li>
		<li class=""><a href="<?php echo $sRacineSite.PATH_FORUM; ?>" title="<?php echo $aLang["infobulle"]["forum"]; ?>"><?php echo $aLang["menus"]["forum"]; ?></a></li>
			<li class=""><a href="<?php echo URL_WEBMAIL; ?>" target="_blank" title="<?php echo $aLang["infobulle"]["webmail"]; ?>"><?php echo $aLang["menus"]["webmail"]; ?></a></li>
		<li class=""><a href="<?php echo $sRacineSite.PATH_CONTACT; ?>" title="<?php echo $aLang["infobulle"]["contact"]; ?>"><?php echo $aLang["menus"]["contact"]; ?></a></li>
	</ul>
</div>


<div id="conteneur">
	<div id="contact">
		<fieldset id="contact_mail">
			<legend><?php echo $aLang["contact"]["legende_mail"]; ?></legend>

			<p>
				<label for="civilite_contact" class="contact"><?php echo $aLang["contact"]["civilite_contact"]; ?></label>
				<input type="radio" id="civilite_melle" name="civilite_contact[]" value="1" class="radio_civilite" />
				<?php echo $aLang["contact"]["civilite_melle"]; ?>
						
				<input type="radio" id="civilite_mme" name="civilite_contact[]" value="2" class="radio_civilite" />
				<?php echo $aLang["contact"]["civilite_mme"]; ?>
						
				<input type="radio" id="civilite_mr" name="civilite_contact[]" value="3" class="radio_civilite" />
				<?php echo $aLang["contact"]["civilite_mr"]; ?>
			</p>
			<p>
				<label for="nom_contact" class="obligatoire contact"><?php echo $aLang["contact"]["nom_contact"]; ?></label>						
				<input type="text" id="nom_contact" name="nom_contact" maxlength="255" value="" class="contact" />
			</p>
			<p>
				<label for="prenom_contact" class="obligatoire contact"><?php echo $aLang["contact"]["prenom_contact"]; ?></label>						
				<input type="text" id="prenom_contact" name="prenom_contact" maxlength="255" value="" class="contact" />
			</p>
			<p>
				<label for="adresse_contact" class="contact"><?php echo $aLang["contact"]["adresse01_contact"]; ?></label>
				<textarea id="adresse_contact" name="adresse_contact" class="contact contact_adresse"></textarea>
			</p>
			<p>
				<label for="cp_contact" class="contact"><?php echo $aLang["contact"]["cp_contact"]; ?></label>						
				<input type="text" id="cp_contact" name="cp_contact" maxlength="255" value="" class="contact" />
			</p>
			<p>
				<label for="ville_contact" class="contact"><?php echo $aLang["contact"]["ville_contact"]; ?></label>						
				<input type="text" id="ville_contact" name="ville_contact" maxlength="255" value="" class="contact" />
			</p>
			<p>
				<label for="tel_contact" class="contact"><?php echo $aLang["contact"]["telephone_contact"]; ?></label>						
				<input type="text" id="tel_contact" name="tel_contact" maxlength="10" value="" class="contact contact_numero_tel" />
				<span class="format_saisie"><?php echo $aLang["contact"]["format_tel"]; ?></span>
			</p>
			<p>
				<label for="portable_contact" class="contact"><?php echo $aLang["contact"]["portable_contact"]; ?></label>						
				<input type="text" id="portable_contact" name="portable_contact" maxlength="10" value="" class="contact contact_numero_tel" />
				<span class="format_saisie"><?php echo $aLang["contact"]["format_tel"]; ?></span>
			</p>
			<p>
				<label for="mail_contact" class="obligatoire contact"><?php echo $aLang["contact"]["email_contact"]; ?></label>			
				<input type="text" id="mail_contact" name="mail_contact" maxlength="255" value="<?php echo $sValeurMailUser; ?>" class="contact" />
			</p>
			<p>
				<label for="destinataire" class="obligatoire contact"><?php echo $aLang["contact"]["message_destinataire"]; ?></label>						
				<select id="destinataire" name="destinataire" class="contact">
					<option value="" selected="selected"><?php echo $aLang["contact"]["destinataire_choix"]; ?></option>
					<option value="1"><?php echo $aLang["contact"]["destinataire_bureau"]; ?></option>
					<option value="2"><?php echo $aLang["contact"]["destinataire_president"]; ?></option>
					<option value="3"><?php echo $aLang["contact"]["destinataire_vice-president"]; ?></option>
					<option value="4"><?php echo $aLang["contact"]["destinataire_secretaire"]; ?></option>
					<option value="5"><?php echo $aLang["contact"]["destinataire_vice-secretaire"]; ?></option>
					<option value="6"><?php echo $aLang["contact"]["destinataire_tresorier"]; ?></option>
					<option value="7"><?php echo $aLang["contact"]["destinataire_vice-tresorier"]; ?></option>
					<option value="8"><?php echo $aLang["contact"]["destinataire_webmaster"]; ?></option>
				</select>
			</p>
			<p>
				<label for="objet" class="obligatoire contact"><?php echo $aLang["contact"]["message_objet"]; ?></label>						
				<input type="text" id="objet" name="objet" maxlength="255" value="" class="contact" />
			</p>
			<p>
				<label for="message" class="obligatoire contact"><?php echo $aLang["contact"]["message_contenu"]; ?></label>
				<textarea id="message" name="message" class="contact contact_message"></textarea>
			</p>
				
			<div class="zone_bouton">
				<input type="submit" name="valider" id="valider" value="<?php echo $aLang["boutons"]["envoyer"]; ?>" />
			</div>
		</fieldset>

		<fieldset id="contact_autre">
			<legend><?php echo $aLang["contact"]["legende_autre"]; ?></legend>

			<div class="contact_moyen"><?php echo $aLang["contact"]["courrier_postal"]; ?></div>
			<br />
			<p class="contact_courrier">
				Association Machin Chose
				<br />
				XX rue Tartanpion Trucmuch
				<br />
				XXXXX PetaOuchnok
				<br />
				France
			</p>
				
			<br />
				
			<div class="contact_moyen"><?php echo $aLang["contact"]["telephone"]; ?></div>
			<br />
			<p class="contact_telephone">
				Vous pouvez nous contacter :
				<br />
				<span class="gras">du lundi au vendredi</span>
				<br />
				<span class="gras">de 18h00 à 20h00</span>
				<br />
				au : <span class="gras">01-02-03-04-05</span>
			</p>
		</fieldset>
	</div>
</div>

FOOTER :


<?php
//On écrit le pied de page
echo "    <div id=\"bandeau_bas\">\n";
echo "        <div id=\"credit_pied_page\">\n";
//On affiche les crédits
echo $sCredit."\n";
echo "        </div>\n";
echo "    </div>\n";

echo "</body>";
echo "</html>";
?>

Voilà, en espérant avoir un peu plus de chance Smiley cligne

Merci à tous.

ghost

4 Jul 2008 à 16:19

Salut,

Un pti overflow: auto; sur ton bloc conteneur? Smiley cligne

Eagle2000

4 Jul 2008 à 19:43

Salut Ghost.

Merci, merci et encore merci ! Smiley biggrin

Tout fonctionne parfaitement.

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Problème de positionnement div et fieldset...