28173 sujets

CSS et mise en forme, CSS3

[résolu] Décalage entre corps et pied de page sous IE

Bonjour,
J'ai un problème avec la page d'accueil du site qui est à l'adresse suivante :
http://www.christianboissel.com
Sous internet explorer le pied de page est décalé d'environ 20 pixels vers le bas et rien à faire, j'ai essayé pas mal de choses, je n'arrive pas à régler ce problème.

voici la partie html :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>

	<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Christian Boissel, musicien et compositeur</title>
<meta name="description" content="Christian boissel, musicien et compositeur" />
<meta name="keywords"  content="musicien, compositeur, angélique ionatos, piano,
musique de scène, musique de films" />
<link type="text/css" rel="stylesheet" href="styles1.css" title="styles" />
	</head>
	<body>

<!-- son ouverture -->
<embed 
src="sons/accueil.mp3" 
width="1" 
height="1" 
autostart="true" 
loop="false" 
controller="false"
pluginspage="http://quicktime.apple.com">
  </embed>

			
			<div id="global">
				<div id= "fondglobal">
				<h1>Christian Boissel, musicien et compositeur</h1>

		<!-- menu de navigation générale-->
				<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">accueil</a></li>
<li><a href="actualites.html">actualit&eacute;s</a></li>
<li><a href="profil.htlm">profil</a></li>
<li><a href="discographie.htlm">discographie</a></li>
<li><a href="en_ecoute.html">en &eacute;coute</a></li>
<li><a href="photos.html">photos</a></li>
<li><a href="presse.html">presse</a></li>
<li><a href="mailto:contact@christianboissel.com">contact</a></li>
<li><a href="liens.html">liens</a></li>
</ul>
</div><!--fin de menu -->
		


							<!--contenu général-->
	<div id="contenu">
<p>Christian
    Boissel cr&eacute;e la musique de sc&egrave;ne de <em>Pedro et le Commandeur</em> d&acute;Omar
    Porras &agrave;  la
    Com&eacute;die Fran&ccedil;aise du 3 septembre au 10 d&eacute;cembre 2006. La premi&egrave;re
    se d&eacute;roulera
    le 2 D&eacute;cembre.<br>

	<br>

    Les spectacles <em>La piti&eacute; dangereuse</em> et <em>El Don Juan</em> dont
    il a compos&eacute; la musique
    tournent actuellement dans toute la France. <br>
  

  Son dernier disque <em>Alas pa' volar</em> - <em>Ang&eacute;lique Ionatos Canta
  Frida Kahlo</em> - sorti chez <em>Na&iuml;ve</em> est actuellement disponible.
  <br></p>
		</div><!--fin de contenu-->

	<div id="actu">
<a href="http://www.amazon.fr/Canta-Frida-Kahlo-Alas-Volar/dp/B000090WAS/sr=1-3/qid=1166304189/ref=sr_1_3/402-2309645-3465752?ie=UTF8&s=music" target=blank><img src="pochettes/alas_para_volar_rouge.jpg"/></a>
<p>&quot;Plaintes, rondes et incantations portent &agrave; une lente incandescence,avec une solennit&eacute; sublime.&quot;
			<br><em>Ludovic Perrin / Lib&eacute;ration</em>
					*********************************************
</p>
	</div><!--fin actu-->
	</div><!--fin de fondglobal-->
	</div><!--fin de global-->

<div id="footer"></div><!-- fin de footer -->
		

</body>
</html>


voici le CSS
/* ------------------------------------ */
/*                                      */
/*            Généralités               */
/*                                      */
/* ------------------------------------ */

body {
	background: #3D2D24;
	color: black;
	margin: 0;
	text-align: center;
	font-size: 90%;
}


h1 {
	text-indent: -5000px;
	margin: 0;
	padding: 0;
	font-size: 1px;
	line-height: 1px;
	text-decoration: none;
}


/* ------------------------------------ */
/*                                      */
/*        global & fondglobal           */
/*                                      */
/* ------------------------------------ */

#global {
	width: 807px;
	margin: 0 auto;
}


#fondglobal {
	width: 807px;
	height: 600px;
	background: url(design/body.jpg) left top no-repeat;
	margin: 0 auto;
}


/* ------------------------------------ */
/*                                      */
/*                Menu                  */
/*                                      */
/* ------------------------------------ */


#navcontainer
{
font-family: Arial,Sans-Serif;
margin: 0 auto;
padding: 0;
width: 100%;
}

#navlist
{
width: 70%;
text-align: center;
margin: 50px 0 0 0;
padding: 0;
text-indent: 0;
list-style-type: none;
}

#navlist li
{
padding: 0;
margin: 0;
text-indent: 0;
display: inline;
}

#navlist li a
{
letter-spacing: -1px;
text-decoration: none;
color: #3D2D24;
font-size: 1em;
padding: 0 2px;
border-top: .5em dotted #F50303;
}

#navlist li a:hover,#navlist a#current
{
color: #ffff;
border-top: none;
font-size: 1.5em;
}

#navlist a#current { color: #FDD230; }

/* ------------------------------------ */
/*                                      */
/*              contenu                 */
/*                                      */
/* ------------------------------------ */

#contenu p {  
font-family:Arial,Sans-Serif;
font-size: 90%;	 
text-align: justify;
color: #3D2D24;
width: 330px;
margin: 145px 0 0 380px ;
padding: 60px 0 0 30px;
}

#contenu p:first-letter {  
font-weight: bold;
font-size: 1.3em;
}

#actu {
margin: 0;
padding: 0 52px 0 410px;
	
}

#actu img {
float: left;
margin: 25px 20px 0 0;
padding: 0;
border: none;

}

#actu p {
font-family:Arial,Sans-Serif;
position: relative;
top:85px;
right: 20px;
font-size: 76%;
font-weight: lighter;
color: #FED130;
text-align: left;

}

/* ------------------------------------ */
/*                                      */
/*            Footer                    */
/*                                      */
/* ------------------------------------ */

#footer {
	width: 807px;
	height: 144px;
	background: url(design/footer.jpg) left bottom no-repeat;
	margin: 0 auto;
}


Merci à tous pour votre aide !!!
Modifié par mmeyn (29 Mar 2007 - 19:38)
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Salut,
ce n'est pas le pied de page qui se décale, c'est le paragraphe qui est dans actu. Tu l'as mis en position relative avec des coordonnées, autant dire qu'il se met un peu où il veut Smiley smile mets plutôt #actu en position relative et lui en absolute, là, les coordonnées que tu lui octroies seront respectées.

Have swing
merci beaucoup pour ton aide !
Smiley biggrin
J'ai passé plusieurs heures sur ce petit problème avant de me décider à le soumettre dans le forum
Comment signaler que le problème est résolu ?
Sujet clos
Aller à