Positionnement en float : le div centre part vers le bas

Question

ninikkhuet

20 Jul 2006 à 12:48

Bonjour,

au début pour la page d'accueil de mon site web (http://www.kwalai.com), j'utilisais ce modèle qui utilise le positionnement absolu :
http://css.alsacreations.com/modeles/modele10.htm
seulement je me suis rendue compte que si jamais le div de gauche dépasse en taille le div du centre, mon pied de page est caché par le div de gauche.

J'ai donc décidé de suivre ce modèle qui utilise les float :
http://css.alsacreations.com/modeles/modele16.htm
mais alors maintenant ça fonctionne impec avec Mozilla Firefox, alors que le div du centre est complètement en bas de la page avec Internet Explorer Smiley ohwell

Snif..C'est pas la première fois que je me prends la tête sur cette page d'accueil et s'il y avait quelqu'un qui pouvait m'aider, ce serait génial !

Voici mon code :


<!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>#NOM_SITE_SPIP - Bienvenue sur le site du Cameroun</title>
	<style type="text/css">@import url('#DOSSIER_SQUELETTE/sommaire.css');</style>
</head>

<body>

<div id="conteneur">

	  <div id="header">
	  	<INCLURE(haut.php3)>
		<form action="recherche.php3" method="get" class="formrecherche">
		  <p align="center" style="background-color:#99CCFF; font-size:12px; font-weight:bold">
		   <label>Rechercher dans les articles de Kaï Walaï :
		   <input type="text" id="formulaire_recherche" class="formrecherche" name="recherche" /></label>
		   <input type="hidden" name="num" value="0">
		   <input type="submit" name="Valider" value="C'est parti !" />
		  </p>
		</form>
	  </div><!--id="header" -->
	  
	  <br />

	  <div id="gauche">
	  	<!-- Tableau des rubriques -->
	  	<table>
		<!--Première Ligne du tableau-->
		<tr>
		  <td><a href="actualite.php3" class="lien_gris">Actualit&eacute;s</a></td>
		  <td>
		  	 <BOUCLE_dern_art_hist(ARTICLES){id_rubrique=3}{par date}{inverse}{0,1}>	
				<a href="histoire.php3?id_article=#ID_ARTICLE" class="lien_gris"> Histoire</a>
		  	 </BOUCLE_dern_art_hist>
		  </td>
		  <td>
		 	<BOUCLE_dern_art_musik(ARTICLES){id_secteur=2}{par date}{inverse}{0,1}> 
				<a href="musik.php3?id_article=#ID_ARTICLE" class="lien_gris"> Musique</a>
			</BOUCLE_dern_art_musik></td>
		  <td>&nbsp;</td>
		</tr>
		
		<!--Deuxième Ligne du tableau-->
		<tr>
		  <td>
		   <BOUCLE_dernier_article_assoc(ARTICLES){id_secteur=25}{par date}{inverse}{0,1}>	
			<a href="associations.php3?id_article=#ID_ARTICLE" class="lien_gris"> Associations</a>
		  </BOUCLE_dernier_article_assoc>
		  </td>
		  <td><a href="horoscope.php3" class="lien_gris">Horoscope</a></td>
		  <td>
		   <BOUCLE_dernier_article_pharma(ARTICLES){id_secteur=22}{par date}{inverse}{0,1}> 
		    <a href="pharmacies.php3?id_article=#ID_ARTICLE" class="lien_gris"> Pharmacies</a>
           </BOUCLE_dernier_article_pharma>
		  </td>
		</tr>
		
		<!--Troisième Ligne du tableau-->
		<tr>
		  <td><a href="#" class="lien_gris">Business/Finances</a></td>
		  
		  <td>
		  	<BOUCLE_dern_art_humour(ARTICLES){id_rubrique=58}{par date}{inverse}{0,1}>
		  		<a href="humour.php3?id_article=#ID_ARTICLE" class="lien_gris"></a>
		  	</BOUCLE_dern_art_humour>
			<span class="lien_gris">Humour</span>
		  </td>
		  
		  <td>
		  	<BOUCLE_dern_art_sante(ARTICLES){id_rubrique=11}{par date}{inverse}{0,1}><a href="sante.php3?id_article=#ID_ARTICLE" class="lien_gris">Sant&eacute;</a>
            </BOUCLE_dern_art_sante>
		  </td>
		</tr>
		
		<!--Quatrième Ligne du tableau-->
		<tr>
		  <td><a href="cinema.php3" class="lien_gris">Cinéma</a></td>
		  <td><a href="immobilier.php3" class="lien_gris">Immobilier</a></td>
		  <td>
		  	<BOUCLE_dernier_article_soc(ARTICLES){id_rubrique=57}{par date}{inverse}{0,1}><a href="societe.php3?id_article=#ID_ARTICLE" class="lien_gris"></BOUCLE_dernier_article_soc>
		  	<span class="lien_gris"> Société </span></a>
		  </td>
		</tr>
		
		<!--Cinquième Ligne du tableau-->
		<tr>
		<td>
		 <BOUCLE_dernier_article_edu(ARTICLES){id_secteur=10}{par date}{inverse}{0,1}>	
			<a href="education.php3?id_article=#ID_ARTICLE" class="lien_gris"> Education</a>
		  	</BOUCLE_dernier_article_edu>
		 </td>
		 <td><a href="jeux.php3" class="lien_gris">Jeux</a></td>
		 <td>
		  <ul id="nav">
			<li class="lien_gris">Shopping
			<ul>
			<li><a href="shopping.php3?id_rubrique=41" class="rubrique" style="text-decoration:none">Biens</a></li>
			<li><a href="shopping.php3?id_rubrique=42" class="rubrique" style="text-decoration:none">Services</a></li>
			</ul>
			</li>
		   </ul>
		  </td>
		</tr>
		
		<!--Sixième Ligne du tableau-->
		<tr>
		<!-- Je récupère le dernier article de la rubrique Beauté pour passer son numéro en paramètre de la page beauté -->
		  <td>
			<BOUCLE_dernier_article_beaute(ARTICLES){id_rubrique=23}{par date}{inverse}{0,1}>	
			<a href="beaute.php3?id_article=#ID_ARTICLE" class="lien_gris"> Espace Beauté</a>
			</BOUCLE_dernier_article_beaute>
		  </td>
		 <td><a href="meteo.php3" class="lien_gris">M&eacute;t&eacute;o</a></td>
		 <td><a href="sport.php3" class="lien_gris">Sport</a></td>
		</tr>
		
		</table>
		
		<br />
	
		<!-- derniers films sortis -->
		<table width="99%" style="border:1px solid #ffcc00;">
		  <tr>
			<th height="25" align="left" style="background-color:#ffcc00;" class="titre_rubrique">Wala&iuml; ! Cin&eacute;ma</th>
		  </tr>
		  <tr>
			<td style="padding:5px">
				<BOUCLE_article_avant_premiere(ARTICLES){id_rubrique=8}{0,1}>
					[(#LOGO_ARTICLE|left||reduire_image{90,90})]
					<a href="cinema.php3" class="lien">#TITRE</a>
					<div class="texte">#CHAPO</div>
					<br />
				</BOUCLE_article_avant_premiere>
				
				<BOUCLE_article_cinema(ARTICLES){id_rubrique=7}{par date}{inverse}{0,3}>
				<img title="Cinéma" src="Images/cinema.gif" border="none" />&nbsp;<a href="cinema.php3" class="lien">#TITRE</a>
				<br />
				</BOUCLE_article_cinema>
			</td>
		  </tr>
		</table>
		
		<br />
		
		<!-- dernières musiques recensées sur le site -->
		<table width="99%" style="border:1px solid #ffcc00;">
			<tr>
			  <td height="25" align="left" style="background-color:#ffcc00;" class="titre_rubrique">Wala&iuml; ! Musiques</td>
			</tr>
			<tr>
			  <td>
			  <BOUCLE_article_musik(ARTICLES){id_secteur=2}{par date}{inverse}{0,5}>
				<img title="Note" src="Images/note.jpg" border="none" />&nbsp;<a href="musik.php3?id_article=#ID_ARTICLE" class="lien">#TITRE</a><span class="texte"> de #SOUSTITRE</span>
				<br />
			</BOUCLE_article_musik></td>
			</tr>
		</table>
		
		<!-- Espace réservé aux pub -->
		<table align="center">
		 <tr class="titre_rubrique" style="color:#000000;"><td align="center">(Publicité)</td></tr>
		 <tr valign="top"><td align="center"><img src="Images/Pub/pub3_sommaire.jpg" alt="Pub" /></td></tr>
		</table>		
	  </div><!-- id="gauche" -->
	  
	  <div id="droite">
	  	<table width="99%" height="50%">
			<tr align="center" class="titre_rubrique" style="color:#000000;"><td>(Publicité)</td></tr>
			<tr valign="top"><td align="center"><img src="Images/Pub/pub1_sommaire.jpg" alt="Pub" /></td></tr>
		</table>
		<br />
		<table width="99%">
			<tr align="center" class="titre_rubrique" style="color:#000000;"><td>(Publicité)</td></tr>
			<tr valign="top"><td align="center"><img src="Images/Pub/pub2_sommaire.jpg" alt="Pub" /></td></tr>
		</table>
	  </div><!-- id="droite" -->
	  
  	<div id="centre">
  	  <!-- Tableau qui contient les derniers articles publiés de la rubrique Actualités-->
		<table width="99%" style=" border:1px solid #03983B;">
		  <tr style="background-color:#03983B;" class="titre_rubrique">
			<td width="50%" align="left">L'actualit&eacute;</td>
			<td width="49%" align="right"><script language="JavaScript" type="text/javascript">date();</script></td>
		  </tr>
		  <tr>
			<td bgcolor="#FFFFFF" align="left" style="padding:5px" colspan="2">
			  <BOUCLE_article_actu(ARTICLES){id_rubrique=1}{par date}{inverse}{0,5}>
				<div><a href="#URL_ARTICLE" class="lien">#TITRE </a></div>
				<div class="texte">#CHAPO <a href="#URL_ARTICLE" class="lien">[Suite...]</a></div>
				<br />
			  </BOUCLE_article_actu>
			</td>
		  </tr>
		</table>
		
		<br />
		
		<!-- Tableau qui contient les derniers articles publiés de la rubrique Sport -->
		<table width="99%" style=" border:1px solid #03983B;">
		  <tr style="background-color:#03983b;" class="titre_rubrique">
			<td width="50%" align="left">Le sport</td>
			<td width="49%" align="right"><script language="JavaScript" type="text/javascript">date();</script></td>
		  </tr>
		  <tr>
			<td bgcolor="#FFFFFF" style="padding:5px" colspan="2">
				<BOUCLE_article_sport(ARTICLES){id_secteur=6}{par date}{inverse}{0,5}>
				<div><a href="#URL_ARTICLE" class="lien">#TITRE </a></div>
				<div class="texte">#CHAPO <a href="#URL_ARTICLE" class="lien">[Suite...]</a></div>
				<br />
			  </BOUCLE_article_sport>
			</td>
		  </tr>
		</table>
  	</div><!-- id="centre" -->
	
	<!-- Copyright -->
	<div id="pied">
		<?php include('bas.php'); ?>
	</div>

</div><!-- id="conteneur" -->

</body>
</html>

----------------------------------------------------------------------

et mon CSS :


/* CSS Document pour la page sommaire.html */
.titre_rubrique {
	color:#FFFFFF;
	font-size:14px;
	font-weight:bold;
}
.lien {
	text-decoration:underline;
	color:#0000FF;
	font-weight:bold;
	font-size:12px;
}
.texte {
	text-align:justify;
	font-size:12px;
}
.titre_spip{
	text-decoration:underline;
	color:#0000FF;
	font-weight:bold;
	font-size:14px;
}

.lien_gris {
	color:#666666;
	font-size:13px;
	text-decoration:underline;
}

body {
font-family: "Times New Roman", "Courier New", Arial, sans-serif;
margin: 0;
padding: 0;
border:1px solid #9900FF;
}
#header {
height: 130px;
border:1px solid #99FFFF;
}
#conteneur {
position: absolute;
width: 100%;
border:1px solid #FF99FF;
}
#centre {
margin-left: 32%;
margin-right: 22%;
border:1px solid #669933;
}
#gauche {
float:left;
width: 30%;
border:1px solid #FFCC33;
}
#droite {
float:right;
width: 20%;
border:1px solid #0000FF;
}
#pied {
clear:both;
padding:5px;
font-size:12px;
text-align:center;
border:1px solid #FF0000;
}


#nav, #nav ul { /* toutes les listes */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#nav a {
display: block;
width: 5em;
}

#nav li { /* tous les items de liste */
float: left;
width: 5em; /* largeur obligatoire, sinon opera devient fou */
cursor:pointer;
}

#nav li ul { /* listes de deuxième niveau */
position: absolute;
background: #99CCFF;
width: 5em;
left: -999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
}

#nav li ul a:hover { /* listes de deuxième niveau */
background-color:#EEEEEE;
}

#nav li:hover ul, #nav li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
left: auto;
}

Merci
Nine
Modifié par ninikkhuet (20 Jul 2006 - 12:52)

Sujet clos

CSS et mise en forme, CSS3

Positionnement en float : le div centre part vers le bas