28173 sujets

CSS et mise en forme, CSS3

Soucis de placement de mes DIV et leur contenu...

Bonjour à tous,

Je suis désolé de venir à nouveau vous demander conseil... J'en suis quasiment à la fin de la mise en page de mon site... Il ne me reste qu'un soucis majeur : le <div> contenu. Illustration du soucis :

http://ombre.et.lumiere.free.fr/images/ie.jpg

Ici on voit que les bords gris s'allongent bien...

http://ombre.et.lumiere.free.fr/images/ff.jpg

Et là sous Firefox on voit que ça passe à travers le pied de page..

Mon code source html :

<body><center>
<div id="entete">
	<div id="ban">&nbsp;</div><div id="degdroit">&nbsp;</div>
</div>
<div id="corps">
	<div id="gauche">
		<div id="degentier">&nbsp;</div>
		<div id="menutot">
			<div id="menugauche">
			<ul class="menu">
<div class="menu"><div class="boxtitres"><div class="titres"><a href="index2.php?page=accueil" class="menu2">Accueil</a></div></div><div class="dmm1"><div class='dhm'>&nbsp;</div></div></div><div class="menu"><div class="boxtitres"><div class="titres"><a href="index2.php?page=prestations" class="menu">Prestations</a></div></div><div class="dmm1">&nbsp;</div></div><div class="menu"><div class="boxtitres"><div class="titres"><a href="index2.php?page=references" class="menu">Références</a></div></div><div class="dmm1">&nbsp;</div></div><div class="menu"><div class="boxtitres"><div class="titres"><a href="index2.php?page=livreor" class="menu">Livre d'or</a></div></div><div class="dmm1">&nbsp;</div></div><div class="menu"><div class="boxtitres"><div class="titres"><a href="index2.php?page=contact" class="menu">Contact</a></div></div><div class="dmm1"><div class='dbm1'>&nbsp;</div></div></div>			</div>
		</div>
		<div id="basmenu">&nbsp;</div>
	</div></ul>
	<div id="contenu">test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir</div>
</div>
<div id="pied">
	<div id="marge">&nbsp;</div>
	<div id="piedgauche">&nbsp;</div>
	<div id="mention">&nbsp;</div>
	<div id="basdroitecontenu">&nbsp;</div>
</div>



<!--
<table border="0" width="790" cellspacing="0" cellpadding="0" height="100%">
<ul style="list-style-type:disc;">
	<tr>
		<td width="785" height="102" colspan="3"><img src="images/banniere.jpg"></td><td class="degradedroit" rowspan="2">
			<table border="0" cellspacing=0 cellpadding=0 width="5" height="100%" style="vertical-align:top;">
				<tr>
					<td class="hautdroit"><div class="degdroith">&nbsp;</div></td>
				</tr>
				<tr>
					<td class="milieudroit"><div class="carredroitegris">&nbsp;</div></td>
				</tr>
				<tr>
					<td class="basdroit"><div class="bgrisb">&nbsp;</div></td> 
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td width="155" height="100%">
			<table border="0" cellspacing="0" cellpadding="0" width="155" height="100%" style="vertical-align:top;">
				<tr>
					<td class="hautg"><div class="degradentiergauche"></div></td>
					<td width="5" height="60" valign="bottom">&nbsp;</td>
				</tr>
			
<tr><td class="menu"><div class="titres"><a href="index.php?page=accueil" class="menu2">Accueil</a></div></td><td width="5" height="50" style="background-color:#cacaca;" valign="top"><div class="bgrish"></div></Td></tr><tr><td class="menu"><div class="titres"><a href="index.php?page=prestations" class="menu">Prestations</a></div></td><td width="5" rowspan="4"><div class="bgrism"></div></td></tr><tr><td class="menu"><div class="titres"><a href="index.php?page=references" class="menu">Références</a></div></td></tr><tr><td class="menu"><div class="titres"><a href="index.php?page=livreor" class="menu">Livre d'or</a></div></td></tr><tr><td class="menu"><div class="titres"><a href="index.php?page=contact" class="menu">Contact</a></div></td></tr>			<tr>
				<td class="basg">&nbsp;</td><td width="5" height="60" valign="top"><div class="bgrisb">&nbsp;</div></td>
			</tr>
			<tr>
				<td class="carreg" colspan="2"><div class="carregauchegris">&nbsp;</div></td>
			</tr>
			</table>
		</td>
		<td class="contenu">
		Depuis quelques temps, Kirin Tor est en proie à la folie meurtrière. Les combats ne cessent, au détriment de ce pour quoi nous nous battons : la paix, la joie, l'amusement… De grands rassemblements ont lieu, mais pas pour passer des soirées communes… Simplement pour détruire la Horde, se lancer corps et âme dans les feux du Cœur du Magma, ou bien défier le Repère de l'Aile Noire entre autres…<br><br>		
		</td>
	</tr>
	<tr>
		<td colspan="4" class="piedpagegauche">
			<table border="0" cellspacing="0" cellpadding="0" width="790" height="50">
				<tr>
					<td height="30" width="30"><div class="carregauchegris">&nbsp;</div></td>
					<td height="30" width="530">&nbsp;</td>
					<td width="230" rowspan="3" height="50" class="plumebas" align="center"><div class="basdroite"><a href='index.php?page=mentions' class='mentions'>Mentions</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='index.php?page=mentions' class='mentions'>Légales</a></div></td>
				</Tr>
				<tr>
					<td height="5" width="560" colspan="2" style="vertical-align:top;">
						<table border="0" width="560" cellspacing="0" cellpadding="0">
							<tr>
								<td width="500"><div class="carregrisbas">&nbsp;</div></td>
								<td width="60"><div class="degdroit">&nbsp;</div></td>
							</tr>
						</table>
					</Td>
				</tr>
				<tr>
					<td height="15" width="560" colspan="2">&nbsp;</td>
				</tr>
			</table>					
		</td>
	</tr>
</ul>
</table>
<center><p class='copy'><b>Copyright &copy Ronan TEXIER 2006</b></p></center>-->
</center>
</body>



Et mon code source CSS


body{
background-image:url("images/fond2.jpg");
background-attachment:fixed;
background-repeat: no-repeat;
background-position: 70% 50%;
font:1em Arial,"times new roman",Geneva,Helvetica,sans-serif;
margin:0;
padding:0;
}

/* liens des menus*/
a.menu:link {color:#cacaca;text-decoration:none;font-family:arial;font-size:14px;font-weight:bolder;}
a.menu:visited {color:#cacaca;text-decoration:none;font-family:arial;font-size:14px;font-weight:bolder;}
a.menu:hover {color:#000000;text-decoration:none;font-family:arial;font-size:15px;font-weight:bolder;}

/* lien actuel */
a.menu2:link {color:#797979;text-decoration:none;font-family:arial;font-size:15px;font-weight:bolder;}
a.menu2:visited {color:#797979;text-decoration:none;font-family:arial;font-size:15px;font-weight:bolder;}
a.menu2:hover {color:#000000;text-decoration:none;font-family:arial;font-size:15px;font-weight:bolder;}

/* liens des sousmenus*/
a.soustitre:link {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;}
a.soustitre:visited {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;}
a.soustitre:hover {color:#000000;text-decoration:none;font-family:arial;font-size:13px;font-weight:bolder;}

/* lien actuel sous menu*/
a.soustitre2:link {color:#797979;text-decoration:none;font-family:arial;font-size:13px;font-weight:bolder;}
a.soustitre2:visited {color:#797979;text-decoration:none;font-family:arial;font-size:13px;font-weight:bolder;}
a.soustitre2:hover {color:#000000;text-decoration:none;font-family:arial;font-size:13px;font-weight:bolder;}

/* lien pour les mentions légales */
a.mentions:link {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;font-style:italic;}
a.mentions:visited {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;font-style:italic;}
a.mentions:hover {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;font-style:italic;}

/* haut de page */
#entete
{
width:790px;
height:102px;
z-index:1;
}

/* milieu de page */
#corps
{
width:790px;
height:420px;
z-index:2;
background-image:url('images/carregris.jpg');
background-repeat: repeat-y;
background-position: 16px;
margin:0px;
padding:0px;
}

/* partie menu */
#gauche
{
width:160px;
float:left;
text-align:left;
}

/* contenu cellule */
#contenu
{
position:relative;
width:580px;
height:420px;
font-family:Arial,"times new roman",Geneva,Helvetica,sans-serif;
font-size:12px;
vertical-align:top;
float:right;
border-right:5px solid;
border-right-color:#cacaca;
}

#p
{
clear: both;
}

#pied
{
position:relative;
width:790px;
height:50px;
z-index:3;
}


/* bannière */
#ban
{
position:relative;
background-image:url('images/banniere.jpg');
background-repeat: no-repeat;
width:780px;
height:102px;
float:left;
}

/* degradé à droite de la bannière */
#degdroit
{
position:relative;
background-image:url('images/deghaut.jpg');
background-repeat: no-repeat;
background-position:bottom;
height:102px;
width:5px;
font-size:1px;
float:right;
}

/* degradé en haut à gauche du menu */
#degentier
{
width:160px;
height:60px;
background-image:url('images/deggtot.jpg');
background-repeat: no-repeat;
background-position: 16px 0%;
text-align:right;
}

/* cellule de menu */
div.menu
{
width:160px;
height:40px;
text-align:left;
background-image:url("images/plumemenu.jpg");
background-repeat: no-repeat;
}

/* cellule de sousmenu */
div.sousmenu
{
width:160px;
height:30px;
text-align:left;
background-color:#ffffff;
}

/* titres du menu */
div.boxtitres
{
position:relative;
background:none;
width:153px;
height:38px;
border-color:#ffffff;
float:left;
}

/* titres du menu */
div.titres
{
position:relative;
background:none;
margin-top:6px;
margin-left:44px;
}

div.boxsousmenu
{
position:relative;
background:none;
width:153px;
height:28px;
border:1px solid;
border-color:#ffffff;
float:left;
}

/* format des titres des sous menu*/
div.soustitres
{
position:relative;
background:none;
margin-left:15px;
}

/* partie haute du degradé de droite du menu*/
div.dhm
{
position:relative;
background-image:url('images/deghaut.jpg');
background-repeat: no-repeat;
background-position: top;
height:40px;
width:5px;
font-size:1px;
}

div.dmm1
{
position:relative;
background-color:#cacaca;
width:5px;
height:40px;
font-size:1px;
float:right;
}

div.dmm2
{
position:relative;
background-color:#cacaca;
width:5px;
height:30px;
font-size:1px;
float:right;
}

div.dbm1
{
position:relative;
background-image:url('images/degbas.jpg');
background-repeat: no-repeat;
background-position:bottom;
height:40px;
width:5px;
font-size:1px;
}

div.dbm2
{
position:relative;
background-image:url('images/degbas.jpg');
background-repeat: no-repeat;
background-position:bottom;
height:30px;
width:5px;
font-size:1px;
}

#basmenu
{
width:5px;
background-color:#ffffff;
background-image:url('images/deghaut.jpg');
background-repeat: no-repeat;
background-position:bottom;
height:40px;
margin-left:16px;
}

#marge
{
position:relative;
width:16px;
float:left;
}

#piedgauche
{
position:relative;
border-left:5px solid;
border-bottom:5px solid;
width:525px;
height:40px;
float:left;
border-color:#cacaca;
font-size:1px;
}

#mention
{
position:relative;
width:230px;
height:50px;
float:left;
background-image:url('images/plumebas.jpg');
background-repeat: no-repeat;
}

#basdroitecontenu
{
position:relative;
width:5px;
height:30px;
background-image:url('images/degbas.jpg');
background-repeat: no-repeat;
float:right;
}

/* copyright bas de page */
p.copy
{
color:#cacaca;
font-family:arial;
font-size:12px;
font-style:italic;
}

/* format des puces des sous menus */
ul.menu
{
list-style-type:disc;
color:#797979;
margin: 0;
padding: 0;
list-style-position:inside;
}

</style>
<!--
<style>
/*------------------------------------------- LIENS -----------------------------------------------------*/
/* liens des menus*/
a.menu:link {color:#cacaca;text-decoration:none;font-family:arial;font-size:14px;font-weight:bolder;}
a.menu:visited {color:#cacaca;text-decoration:none;font-family:arial;font-size:14px;font-weight:bolder;}
a.menu:hover {color:#000000;text-decoration:none;font-family:arial;font-size:15px;font-weight:bolder;}

/* lien actuel */
a.menu2:link {color:#797979;text-decoration:none;font-family:arial;font-size:15px;font-weight:bolder;}
a.menu2:visited {color:#797979;text-decoration:none;font-family:arial;font-size:15px;font-weight:bolder;}
a.menu2:hover {color:#000000;text-decoration:none;font-family:arial;font-size:15px;font-weight:bolder;}

/* liens des sousmenus*/
a.soustitre:link {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;}
a.soustitre:visited {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;}
a.soustitre:hover {color:#000000;text-decoration:none;font-family:arial;font-size:13px;font-weight:bolder;}

/* lien actuel sous menu*/
a.soustitre2:link {color:#797979;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;}
a.soustitre2:visited {color:#797979;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;}
a.soustitre2:hover {color:#000000;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;}

/* lien pour les mentions légales */
a.mentions:link {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;font-style:italic;}
a.mentions:visited {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;font-style:italic;}
a.mentions:hover {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;font-style:italic;}

/*------------------------------------------- TD --------------------------------------------------------*/

/* td de contenu */
td.contenu
{
width:640px;
font-family:Arial,"times new roman",Geneva,Helvetica,sans-serif;
font-size:12px;
vertical-align:top;
padding:30px;
padding-top:50px;
height:100%;
}

/* -------------------------------------------------*/

/* td droite degradé */
td.degradedroit
{
width:5px;
height:100%;
vertical-align:top;
}

/* -------------------------------------------------*/

/* td du haut avec le dégradé */
td.hautg
{
width:150px;
height:60px;
}

/* -------------------------------------------------*/

/* td du bas de menu avec le dégradé */
td.basg
{
background-image:url("images/deghaut.jpg");
background-repeat: no-repeat;
background-position: 11% 100%;
width:150px;
height:60px;
}

/* td de menu */
td.menu
{
background-image:url("images/plumemenu.jpg");
background-repeat: no-repeat;
background-position: 0% 100%;
font-family:Arial,"times new roman",Geneva,Helvetica,sans-serif;
font-size:14px;
font-style:italic;
color:#999999;
width:150px;
height:50px;
}

/* td de sous menu */
td.sousmenu
{
vertical-align:top;
font-family:Arial,"times new roman",Geneva,Helvetica,sans-serif;
font-size:14px;
font-style:italic;
color:#999999;
width:150px;
height:25px;
}

/* td haut pour degradé de droite */
td.hautdroit
{
width:5px;
height:30px;
}

/* td milieu pour degradé de droite */
td.milieudroit
{
width:5px;
height:100%;
}

/* td bas pour degradé de droite */
td.basdroit
{
width:5px;
height:30px;
}


/* td du carre gris continu */
td.carreg
{
width:155px;
height:100%;
}

/* -------------------------------------------------*/

/* td pour la barre droite du menu */
td.bgris
{
width:5px;
height:100%;
vertical-align:top;
}

/* -------------------------------------------------*/

/* td pour le pied de page à gauche */
td.piedpagegauche
{
width:790px;
height:50px;
vertical-align:top;
}

/* td pour les mentions légales */
td.plumebas
{
background-image:url('images/plumebas.jpg');
background-repeat: no-repeat;
background-position: 100% 50%;
height:50px;
width:230px;
vertical-align:top;
}

/*------------------------------------------------- DIV ---------------------------------------------------*/

/* degradé en haut à gauche */
div.degradentiergauche
{
background-image:url('images/deggtot.jpg');
background-repeat: no-repeat;
background-position:0% 50%;
width:5px;
height:60px;
margin-left:16px;
}

/* -------------------------------------------------*/

/* div pour le haut de la barre droite du menu */
div.bgrish
{
position:relative;
background-image:url("images/deghaut.jpg");
background-repeat: no-repeat;
background-position: 0% 100%;
width:5px;
height:30px;
}

/* div pour le haut de la barre du milieu du menu */
div.bgrism
{
z-index:2;
background-color:#cacaca;
width:5px;
height:100%;
}


/* div pour le haut de la barre basse du menu */
div.bgrisb
{
z-index:3;
background-image:url("images/degbas.jpg");
background-repeat: no-repeat;
background-position: 0% 100%;
width:5px;
height:30px;
}

/* format des titres du menu*/
div.titres
{
position:relative;
background:none;
margin-top:6px;
margin-left:43px;
}

/* format des titres des sous menu*/
div.soustitres
{
position:relative;
background:none;
margin-top:6px;
margin-left:20px;
font-size:12px;
padding-left:5px;
padding-right:5px;
font-weight:bolder;
}

/* -------------------------------------------------*/

/* carre de gauche qui s'allonge */
div.carregauchegris
{
position:relative;
margin-left:16px;
background-color:#cacaca;
width:5px;
height:100%;
}

/* -------------------------------------------------*/

/* degradé droit haut */
div.degdroith
{
position:relative;
margin-top:70px;
z-index:1;
background-image:url("images/deghaut.jpg");
background-repeat: no-repeat;
background-position: 0% 100%;
width:5px;
height:30px;
}

/* carre de droite qui s'allonge */
div.carredroitegris
{
position:relative;
z-index:2;
background-color:#cacaca;
width:5px;
height:100%;
}

/* dégradé droit bas */
div.degdroitb
{
position:relative;
margin-top:70px;
z-index:3;
background-image:url("images/deghaut.jpg");
background-repeat: no-repeat;
background-position: 0% 100%;
width:5px;
height:30px;
}

/* -------------------------------------------------*/

/* barre grise du bas à gauche pied de page */
div.carrepiedgauche
{
position:relative;
background-color:#cacaca;
width:100%;
height:5px;
}

/* carre bas qui s'allonge */
div.carregrisbas
{
position:relative;
margin-left:16px;
background-color:#cacaca;
width:500px;
height:5px;
font-size:1px;
}

/* degradé droit en pied de page */
div.degdroit
{
background-image:url('images/degdroite.jpg');
background-repeat: no-repeat;
width:30px;
height:5px;
font-size:1px;
}

/* -------------------------------------------------*/

/* plume en bas à droite */
div.basdroite
{
position:relative;
margin-top:14px;
font-size:12px;
font-weight:bolder;
font-family:arial;
font-style:italic;
color:#cacaca;
}

/*------------------------------------------------------- copyright ---------------------------------------------*/
p.copy
{
color:#cacaca;
font-family:arial;
font-size:12px;
font-style:italic;
}


Je suis vraiment désolé de devoir encore vous demander conseil... Sachez que j'ai fait des recherches sur le problème ; comme solution trouvée j'ai l'overflow : auto avec la scrollbar mais bon c'est pas du tout ce que je désire en design... Sinon j'ai tenté des height 100% sans succès... J'ai surtout trouvé des "il y a des soucis de compatibilité sur la longueur des contenus" mais pas les solutions à y apporter...

Le soucis vient surtout du fait que je suis obligé de donner des valeurs height: x px; pour ma <div#corps> (située entre #entete et #pied).

Enfin le menu est dynamique (administrable via les BDD) d'où le codage pour la barre grise à sa droite...

Dans l'attente merci des futures réponses... Smiley confus
Modifié par sanosuke85 (17 Mar 2006 - 11:43)
Bonjour à tous,

Je suis toujours bloqué sur ce sujet... J'ai beau chercher... J'ai regardé les tutorials sur les flux et je comprends comment ça fonctionne ; mais le problème reste ce soucis de ne pas avoir de hauteur fixe à mon contenu ; les height 100% auto etc ne fonctionnent pas... J'ai tenté de ne pas mettre de height rennonçant à ma barre qui s'allonge à gauche... Le soucis à présent c'est que le flux principal se fait à partir de mon menu car lui a des valeurs height fixes... Donc mon pied de page va démarrer finalement sous le menu et non sous le contenu (partie texte)... C'est vraiment galère.... Le bottom:0; au pied de page ne résoud pas le soucis car c'est pour la hauteur de la fenêtre et non du site en lui même... Comme vous pouvez le voir je chercher je cherche mais toujours rien...
Bonjour Sanosuke,

Essaies voir :

#contenu
{
position:relative;
width:580px;
height:auto;
font-family:Arial,"times new roman",Geneva,Helvetica,sans-serif;
font-size:12px;
vertical-align:top;
float:right;
border-right:5px solid;
border-right-color:#cacaca;
}


Avec un height à 420 px, tu fixes la hauteur de ton div. Donc FF s'arrête à 420 px ! Smiley eek
Avec un height: auto; tu lui laisses gérer la hauteur en fonction du contenu.

A+ Smiley cligne
Bonjour,

Normalement, pour corriger ce problème, il faut : 


html, body {
  height : 100%;
}

#conteneur {
  height: auto !important;
  height: 100%;
  min-height:100%;
}


en + des autres propriétés, bien sûr.

Si la page était en ligne, il serait plus facile d'assurer le réponse ...
Smiley cligne
Je viens de voir vos réponses il est 3h20 je vous dirai ce qu'il en est demain Smiley cligne merci en tout cas et à très vite. J'ai fait pas mal de modifications en faute de mieux pour ce soucis (sans height et magouilles pour arriver à faire tenir le pied de page) mais bon ce n'est pas très "propre" donc ça m'ennuie.. je tenterai la mise en ligne aussi suite à ta demande Vero.

Merci encore !
en fait tu dois mettre ca :

div#corps{
    height: auto !important; /* pour FF */
    height:420px; /* taille minimale pour IE */
    min-height:420px; /* taille minimale pour FF */
}


et tu enlèves la propriété height dans div#contenu

Avec ca, si ta #contenu est vide, #corps à toujours sa taille minimale, et si #contenu a une taille qui dépasse celle de #corps, #corps va s'agrandir en fonction de #contenu.
Et bien ma foi... les trois height indiqués donnent bien ce qu'il faut... Il me reste plus qu'à gérer la taille d'affichage pour que mon menu à gauche puis s'afficher comme il se doit (il est dynamique donc si je rajoute ou diminue des menus et sous-menus ça va faire changer la taille minimale à avoir -> vive php, mysql et les calculs hehe Smiley cligne )... En tout cas merci à tous pour vos réponses... je vais ENFIN pouvoir me sortir de la mise en page pour me consacrer au contenu pur...

Merci ! * s'incline *
Bien... Je suis désolé mais je dois reprendre le sujet... voici le lien de mon site :

http://texier.ronan.free.fr/index2.php

Si vous regardez sous IE, la bordure de droite est entière... Sous FF elle ne prends pour longueur que celle indiquée dans le <style> du contenu... J'ai tenté avec un 100% sur ma <div> #contenu ainsi que sur ma <div> #corps mais ça ne change rien...

Mon code css (visible dans le code source) :


body{
background-image:url(<? echo '"' . $url . 'images/fond' . $fondrand . '.jpg"';?>);
background-attachment:fixed;
background-repeat: no-repeat;
background-position: 70% 60%;
font:1em Arial,"times new roman",Geneva,Helvetica,sans-serif;
margin:0;
padding:0;
height:100%;
text-align: center;
}

/* liens des menus*/
a.menu:link {color:#cacaca;text-decoration:none;font-family:arial;font-size:14px;font-weight:bolder;}
a.menu:visited {color:#cacaca;text-decoration:none;font-family:arial;font-size:14px;font-weight:bolder;}
a.menu:hover {color:#000000;text-decoration:none;font-family:arial;font-size:15px;font-weight:bolder;}

/* lien actuel */
a.menu2:link {color:#797979;text-decoration:none;font-family:arial;font-size:15px;font-weight:bolder;}
a.menu2:visited {color:#797979;text-decoration:none;font-family:arial;font-size:15px;font-weight:bolder;}
a.menu2:hover {color:#000000;text-decoration:none;font-family:arial;font-size:15px;font-weight:bolder;}

/* liens des sousmenus*/
a.soustitre:link {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;}
a.soustitre:visited {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;}
a.soustitre:hover {color:#000000;text-decoration:none;font-family:arial;font-size:13px;font-weight:bolder;}

/* lien actuel sous menu*/
a.soustitre2:link {color:#797979;text-decoration:none;font-family:arial;font-size:13px;font-weight:bolder;}
a.soustitre2:visited {color:#797979;text-decoration:none;font-family:arial;font-size:13px;font-weight:bolder;}
a.soustitre2:hover {color:#000000;text-decoration:none;font-family:arial;font-size:13px;font-weight:bolder;}

/* lien pour les mentions légales */
a.mentions:link {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;font-style:italic;}
a.mentions:visited {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;font-style:italic;}
a.mentions:hover {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;font-style:italic;}

/* global pour le centrage */
#global
{
position:relative;
margin-left:auto;
margin-right:auto;
width:790px;
text-align: left;
height: auto;
height:100%;
min-height:100%;
}

/* haut de page */
#entete
{
position:relative;
width:790px;
height:102px;
z-index:1;
}

/* milieu de page */
#corps
{
position:relative;
width:790px;
z-index:2;
margin:0px;
padding:0px;
height: auto;
height:460px;
min-height:460px;
background-image:url('images/carregris.jpg');
background-repeat: repeat-y;
background-position:16px;
}

/* partie menu */
#gauche
{
position:relative;
width:160px;
float:left;
text-align:left;
padding:0px;
margin:0px;
}

/* contenu cellule */
#contenu
{
position:relative;
width:600px;
font-family:Arial,"times new roman",Geneva,Helvetica,sans-serif;
font-size:12px;
vertical-align:top;
float:right;
padding:0px;
margin:0px;
padding-right:20px;
text-align:justify;
border-right:5px solid;
border-right-color:#cacaca;

}

#pied
{
position:relative;
width:790px;
height:60px;
z-index:3;
padding:0px;
margin:0px;
}


/* bannière */
#ban
{
position:relative;
background-image:url('images/banniere.jpg');
background-repeat: no-repeat;
width:780px;
height:102px;
float:left;
}

/* degradé à droite de la bannière */
#degdroit
{
position:relative;
background-image:url('images/deghaut.jpg');
background-repeat: no-repeat;
background-position:bottom;
height:102px;
width:5px;
font-size:1px;
float:right;
}

/* degradé en haut à gauche du menu */
#degentier
{
position:relative;
width:160px;
height:60px;
background-image:url('images/deggtot.jpg');
background-repeat: no-repeat;
background-position: 16px 0%;
text-align:right;
}

/* cellule de menu */
div.menu
{
position:relative;
width:160px;
height:40px;
text-align:left;
background-image:url("images/plumemenu.jpg");
background-repeat: no-repeat;
}

/* cellule de sousmenu */
div.sousmenu
{
position:relative;
width:160px;
height:30px;
text-align:left;
background-color:#ffffff;
}

/* titres du menu */
div.boxtitres
{
position:relative;
background:none;
width:153px;
height:38px;
border-color:#ffffff;
float:left;
}

/* titres du menu */
div.titres
{
position:relative;
background:none;
margin-top:6px;
margin-left:44px;
}

div.boxsousmenu
{
position:relative;
background:none;
width:153px;
height:28px;
border:1px solid;
border-color:#ffffff;
float:left;
}

/* format des titres des sous menu*/
div.soustitres
{
position:relative;
background:none;
margin-left:15px;
}

/* partie haute du degradé de droite du menu*/
div.dhm
{
position:relative;
background-image:url('images/deghaut.jpg');
background-repeat: no-repeat;
background-position: top;
height:40px;
width:5px;
font-size:1px;
}

div.dmm1
{
position:relative;
background-color:#cacaca;
width:5px;
height:40px;
font-size:1px;
float:right;
}

div.dmm2
{
position:relative;
background-color:#cacaca;
width:5px;
height:30px;
font-size:1px;
float:right;
}

div.dbm1
{
position:relative;
background-image:url('images/degbas.jpg');
background-repeat: no-repeat;
background-position:bottom;
height:40px;
width:5px;
font-size:1px;
}

div.dbm2
{
position:relative;
background-image:url('images/degbas.jpg');
background-repeat: no-repeat;
background-position:bottom;
height:30px;
width:5px;
font-size:1px;
}

/* degradé en bas à gauche du menu */
#degentier2
{
position:relative;
width:160px;
background-color:#ffffff;
background-image:url('images/deghaut.jpg');
background-repeat: no-repeat;
background-position: 16px bottom;
height:50px;
}

#piedgauche
{
position:relative;
background-image:url('images/carregris.jpg');
background-repeat: repeat-x;
background-position:0px 55px;
margin:0px;
padding:0px;
width:174px;
height:60px;
float:left;
font-size:1px;
text-align:left;
}

#marge
{
width:16px;
float:left;
height:60px;
background-color:#ffffff;
}

#ajust
{
position:relative;
background-color:#cacaca;
width:5px;
height:55px;
font-size:1px;
float:left;
margin:0px;
padding:0px;

}

#piedcentre
{
position:relative;
width:350px;
height:80px;
background-image:url('images/carregris.jpg');
background-repeat: repeat-x;
background-position: 0px 55px;
font-size:1px;
float:left;
}

#droitpied
{
position:relative;
background-image:url('images/degdroite.jpg');
background-repeat: no-repeat;
margin:0;
padding:0;
width:30px;
height:5px;
float:left;
font-size:1px;
margin-top:55px;
}

#mention
{
position:relative;
width:230px;
height:75px;
float:left;
background-image:url('images/plumebas.jpg');
background-repeat: no-repeat;
background-position:bottom;
}

#basdroitecontenu
{
position:relative;
width:5px;
height:60px;
background-image:url('images/degbas.jpg');
background-repeat: no-repeat;
float:right;
}

/* copyright bas de page */
p.copy
{
color:#cacaca;
font-family:arial;
font-size:12px;
font-style:italic;
}

/* copyright bas de page */
p.contenu
{
padding-right:20px;
padding-left:20px;
padding-top:30px;
}

/* format des puces des sous menus */
ul.menu
{
list-style-type:disc;
color:#797979;
margin: 0;
padding: 0;
list-style-position:inside;
}

</style>


Et le code html en code source :


<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" lang="fr" content="creation, site, internet, web, empreintes du web, sites, empreintes, empreinte, ronan, texier, Ronan, Texier, RONAN, TEXIER, développement, réalisation, référencement, référencer, créer, freelance, free lance, indépendant, développeur, infographiste, graphiste, développement de sites web, devis, maquettes, prestations, prestation, html, flash, animation flash, php, mysql, bases de données, hébergement, referencement, création, creer, Web, Internet, Flash, javascript, Webmaster, webmaster" />
<meta name="description" lang="fr" content="Web Creations par Ronan Texier, independant (freelance) - Tout type de site web (statique, dynamique) - graphiste - webmaster - herbergement - referencement - devis - Site personnalise" />
<meta name="reply-to" content="texier.ronan@free.fr" />
<meta name="category" content="internet" />
<meta name="author" lang="fr" content="ronan TEXIER" />
<meta name="copyright" content="Ronan Texier 2006" />
<title>Empreintes du Web - Créations Internet par Ronan Texier</title>
<link rel="SHORTCUT ICON" href="http://texier.ronan.free.fr/plume.ico" />
</head>

<body>
<div id="global">
<div id="entete">
	<div id="ban">&nbsp;</div><div id="degdroit">&nbsp;</div>
</div>
<div id="corps">
	<div id="gauche">
		<div id="degentier">&nbsp;</div>
		<div id="menutot">
			<div id="menugauche">
			<ul class="menu">

<div class="menu"><div class="boxtitres"><div class="titres"><a href="index2.php?page=accueil" class="menu">Accueil</a></div></div><div class="dmm1"><div class='dhm'>&nbsp;</div></div></div><div class="menu"><div class="boxtitres"><div class="titres"><a href="index2.php?page=prestations" class="menu">Prestations</a></div></div><div class="dmm1">&nbsp;</div></div><div class="menu"><div class="boxtitres"><div class="titres"><a href="index2.php?page=references" class="menu2">Références</a></div></div><div class="dmm1">&nbsp;</div></div><div class="sousmenu"><div class="boxsousmenu"><div class="soustitres"><li><a href="index2.php?page=references&rub=cv" class="soustitre2">Cv en ligne</a></li></div></div><div class="dmm2">&nbsp;</div></div><div class="sousmenu"><div class="boxsousmenu"><div class="soustitres"><li><a href="index2.php?page=references&rub=sites" class="soustitre">Sites réalisés</a></li></div></div><div class="dmm2">&nbsp;</div></div><div class="sousmenu"><div class="boxsousmenu"><div class="soustitres"><li><a href="index2.php?page=references&rub=autres" class="soustitre">Autres créations</a></li></div></div><div class="dmm2">&nbsp;</div></div><div class="menu"><div class="boxtitres"><div class="titres"><a href="index2.php?page=livreor" class="menu">Livre d'or</a></div></div><div class="dmm1">&nbsp;</div></div><div class="menu"><div class="boxtitres"><div class="titres"><a href="index2.php?page=contact" class="menu">Contact</a></div></div><div class="dmm1"><div class='dbm1'>&nbsp;</div></div></div>			</div>
		</div>
		<div id="degentier2">&nbsp;</div>		
	</div></ul>
	<div id="contenu"><p class="contenu">

	test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voirtest pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voirtest pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir
	test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voirtest pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voirtest pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voirtest pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voirtest pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voirtest pour voir test pour voir test pour voir test pour voir test pour voir test pour voir test pour voir</p></div>
</div>
<div id="pied">
	<div id="piedgauche"><div id="marge">&nbsp;</div><div id="ajust">&nbsp;</div></div>
	<div id="piedcentre">&nbsp;</div>
	<div id="droitpied">&nbsp;</div>
	<div id="mention">&nbsp;</div>
	<div id="basdroitecontenu">&nbsp;</div>
</div>
</div>

</body>
</html>


Voilà.... Merci d'avance encore pour votre aide....

PISTE : je me demande si c'est pas un soucis de gestion des flux...
Je tente d'aider un peu ceux qui pourraient être suceptible de m'aider (c'est français ce que je viens de dire... enfin j'espère Smiley cligne )...

Pour comprendre le soucis : j'ai un <div> #corps qui englobe le #menu dynamique et le #contenu (#menu est une suite de <div> en float:left; et #contenu un <div> en float:righ;). Le <div> contenu possède une bordure de 5px pour la barre qui s'allonge sur la droite... Je ne lui applique aucune hauteur mais si le texte est assez long ça va jusqu'au bas pour rejoindre le dégradé vers le blanc (en bas à droite donc de la page au dessus de la plume calée tout en bas à droite). comme on me l'a conseillé c'est donc le #corps qui possède une valeur height : 423px; ainsi que le min-height ET le height:auto;

Soucis :
- donc ma bordure de droite ne prend toute la hauteur que s'il y a assez de texte...
- ma bordure de gauche ne prends qu'en hauteur que la hauteur définie sous FireFox elle ne s'allonge pas... Pourtant le pied de page qui est dans un <div> #pied est bien mis en bas... Si j'applique une hauteur quelconque à <div> #contenu le pied de page est alors affecté à la hauteur donnée (comme l'image tout en haut du post)...

Ma structure graphique est assez complexe je pense effectivement... Je pourrais trouver des alternatives pour contourner ça graphiquement (ex : ne mettre qu'un petit dégradé à droite en dessous du menu puis un autre en fin de bas de page à gauche) mais bon c'est ne pas résoudre le soucis... Et pour ma part ce n'est pas satisfaisant... Voir frustrant Smiley cligne

Voilà j'espère aider un peu plus sur le problème... Merci d'avance aux futurs posteurs Smiley cligne
Bonjour Sanosuke85,

Pour prendre le problème dans le bon sens, je t'invite tout d'abord à consulter le rapport d'analyse du validateur HTML du W3C sur ta page.

Tu ne peux pas mettre de <div> à l'interieur d'un <ul>, ça n'est pas valide.
Un <ul> attend un élément de liste <li>.
Au passage je t'invite à recoder ton menu en utilisant <ul> et <li> uniquement. Tu obtiendras le même résultat avec un code valide et bien moins compliqué. L'utilisation de <div> imbriquées rend ton code illisible.
a écrit :
Pourtant le pied de page qui est dans un <div> #pied est bien mis en bas...


Mets un "border: 1px solid green;" dans #pied, et tu seras surpris de voir où il se situe sur ta page.

Tu ouvres un <div id="menutot"> et #menutot est introuvable dans ton CSS ?

Il manque un </div> pour fermer <div id="global">.

Bref ton code html est approximatif et souffre de maladresses.

a écrit :
Ma structure graphique est assez complexe je pense effectivement... Je pourrais trouver des alternatives pour contourner ça graphiquement (ex : ne mettre qu'un petit dégradé à droite en dessous du menu puis un autre en fin de bas de page à gauche) mais bon c'est ne pas résoudre le soucis... Et pour ma part ce n'est pas satisfaisant... Voir frustrant


Tu as privilégié le rendu graphique en négligeant la structure de ton code html. Si tu souhaites vraiment développer en html/css il faut d'abord concevoir la structure de ta page avec un balisage html valide et sémantique et appliquer la mise en forme avec CSS dans un deuxième temps.

Dans ton cas on se trouve dans une impasse. Tant que ton code html ne sera pas valide, tu pourras toujours bidouiller dans ta CSS sans jamais trouver de solutions.

Si tu ne l'as pas déjà fait je t'invite à consulter les conseils d'Alsacréations pour débuter avec CSS et HTML.

Navré de ne pouvoir t'aider plus que cela, mais avec ton code actuel c'est peine perdue.

A+
Salut CoingPomme

Je te remercie pour ta réponse et ta franchise. Effectivement je suis surpris de la position de mon pied de page mais cela montre bien un soucis dans tout ça...

Je pense que je vois trop les choses dans une vision "graphique" avant une vision "codée"... Je vais revoir tout depuis le début. J'ai parcouru les divers tutoriels du site et j'y ai trouvé des choses déjà intéressantes. Mais je vais continuer de m'y pencher.

Et première chose : remettre en ordre mon code html effectivement et tenter de "l'alléger"...

Merci de ton aide je donnerai l'évolution de tout ça sur ce post. Smiley cligne
Sujet clos
Aller à