28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

je rencontre un soucis de mise en page. En fait j'ai ma partie header et le pied de page qui sont légèrement décalés vers la gauche.
Voici l'adresse pour plus de visibilité:
http://formaconsult.jexiste.fr/
Avec FireFox pas de soucis par contre avec Internet Explorer ça coince ??

je voudrais en fait corriger ces décalages.

Le code source du css :


<style type="text/css">
body {
background-image: url('img/fond.jpg');
background-attachment:fixed;
background-repeat:repeat-x;
background-position:top;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
text-align: justify;
margin: 0;
padding: 0;
}

#header {
height: 147px;
width: 800px;
}

#navigation {
background-image: url('img/navbar.jpg');
height: 22px;
text-align: center;
}

#navigation a{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #8CADC9;
text-decoration: none;
}

#conteneur {
position: absolute;
width: 800px;
left: 48%;
margin-left: -375px;
background-color:#5C7991;
border-left: 4px solid black;
border-right: 4px solid black;
}

#centre {
background-color:#FFFFFF;
margin-left: 240px;
padding-left: 15px;
padding-right: 15px;
padding-top: 20px;
padding-bottom: 20px;
border-left: 4px dashed #5C7991;
}

#centre p{
color:#5C7991;
}

#centre p.exupery {
color: #081826;
font-style: italic;
margin-left: 345px;
}

#centre img{
float:left;
margin:0 1em 1em 0;
padding-left: 4px;
padding-right: 4px;
padding-top: 4px;
padding-bottom: 4px;
border: 3px solid #5C7991;
}

#centre a {
color: #8CADC9;
text-decoration: none;
}

#centre a:hover {
color: #6099C9;
text-decoration: none;
}

#gauche {
position: absolute;
left:0;
width: 240px;
margin-left: 1px;
color:#C5D5E2;
}

#gauche p{
color:#AEB2B6;
font-size: 1.1em;
}

#pied {
height: 25px;
background-image: url('img/footer.jpg');
}

#pied a{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #8CADC9;
text-decoration: none;
}

#pied p{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #8CADC9;
text-decoration: none;
padding-top: 5px;
}

.menugauche {
list-style-type: none;
margin-left: 1px;
padding:0 25px 0 5px;
}

.menugauche li {
margin-left: 1px;
margin-bottom: 5px;
font-weight:bold;
font-size: 11px;
color: #8CADC9;
}

p {
margin: 0 0 10px 0;
font-weight:normal;
}

#centre p{color:"#5C7991"}

input {
font-family : sans-serif;
font-size : 12px;
}


</style>


et la page d'accueil :

<body>
<div id="conteneur">

	  <div id="header" align="center"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#3,0,0,0" width="800" height="147" align="middle">
<param name="SRC" value="bandeau.swf">
<param name="QUALITY" value="high">
<param name="BGCOLOR" value="#FFFFFF">
<embed src="bandeau.swf" pluginspage="http://www.macromedia.com/shockwave/download/" type="application/x-shockwave-flash" width="800" height="147" align="middle" quality="high">
</embed></object>

</div>
<div id="navigation"><a href="index.php?view=accueil">Accueil</a><font-color="#000000"> |</font>
  <a href="index.php?view=association">Association</a><font-color="#000000"> |</font>
  <a href="index.php?view=articles">Articles</a><font-color="#000000"> |</font>
  <a href="index.php?view=liens">Liens</a><font-color="#000000"> |</font>
  <a href="index.php?view=contacts">Contacts</a>
</div>
	  <div id="gauche"><br><br><h3>N e w s</h3>
	  
	  	
		<ul class="menugauche">
		<li>Le 15/11/05</li>
            <p>Début de la news n°1, il s'agit ici de l'emplacement de la news n°1</p>
		<li>Le 15/11/05</li>
            <p>Début de la news n°2, il s'agit ici de l'emplacement de la news n°2</p>
           	<li>Le 15/11/05</li>
            <p>Début de la news n°3, il s'agit ici de l'emplacement de la news n°3</p>
		<li>Le 15/11/05</li>
            <p>Début de la news n°4, il s'agit ici de l'emplacement de la news n°4</p>
		<li>Le 15/11/05</li>
            <p>Début de la news n°5, il s'agit ici de l'emplacement de la news n°5</p>
            <li>Le 15/11/05</li>
            <p>Début de la news n°6, il s'agit ici de l'emplacement de la news n°6</p>
		<li>Le 15/11/05</li>
            <p>Début de la news n°7, il s'agit ici de l'emplacement de la news n°7</p>
		<li>Le 15/11/05</li>
            <p>Début de la news n°8, il s'agit ici de l'emplacement de la news n°8</p>
		<li>Le 15/11/05</li>
            <p>Début de la news n°9, il s'agit ici de l'emplacement de la news n°9</p>
            <li>Le 15/11/05</li>
            <p>Début de la news n°10, il s'agit ici de l'emplacement de la news n°10</p>
		</ul>
		
	  </div><div id="centre">
  	  <p><i>... Être Homme, c'est précisément être responsable. C'est connaître la honte en face d'une misère qui ne dépend pas de soi.</i></p><p class="exupery">(Antoine de Saint Exupéry)</p>
            	<br>
        	<br>
        	<br>
	<br>
	<IMG SRC="/img/alzheimer.jpg" ALT="alzheimer.jpg" WIDTH=150 HEIGHT=195>
            La gériatrie (gérontologie clinique) est une spécialité médicale qui traite des maladies des sujets âgés. C'est Isaac Nasher qui , aux États unis, emploie le premier le terme de Gériatrie en 1909.
		<br>
		<br>		
		La gérontologie désigne l'étude des modalités et des causes des modifications que l'âge imprime au fonctionnement des humains, sur tous les plans (biologique, psychologique et social) et à tous les niveaux de complexité.
Il s'agit d'une approche des problèmes de la vie plutôt que d'une discipline autonome : toutes les avancées des sciences biologiques et des sciences humaines contribuent aux progrès de la gérontologie. Aucun institut, ni aucun spécialiste, ne peut prétendre en dominer tous les aspects.
La gérontologie embrasse quatre aspects en interaction constante :<br>

    * le vieillissement physique : la perte progressive de la capacité du corps à se renouveler ;<br>
    * le vieillissement psychologique : la transformation des processus sensoriels, perceptuels, cognitifs et de la vie affective de l'individu ;<br>
    * le vieillissement comportemental : résultat des changements ci-dessus dans le cadre d'un milieu donné et regroupant les aptitudes, attentes, motivations, image de soi, rôles sociaux, personnalité et adaptation ;<br>
    * le contexte social du vieillissement : l'influence qu'exercent l'un sur l'autre l'individu et la société. Cet aspect touche la santé, le revenu, le travail, les loisirs, la famille, etc. <br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
        	<br>
<IMG SRC="/img/haende.jpg" ALT="haende.jpg" WIDTH=150 HEIGHT=142>
Au fil des ans, tout personne acquiert une complexité, aussi bien au plan immunologique, neurophysiologique, que social et culturel par ses inter-relations avec le milieu physique et humain qui l'entoure. Si son organisation corporelle d'humain lui est donnée à la naissance elle acquiert au fil des saisons de la vie sa structure "d'humanitude" (A.Jacquard). L'humanitude va s'auto-construire jusqu'à la mort, en intégrant des données hétérogènes et en les transformant en "Moi".<br><br>

Si le soignant s'intéresse à la complexité du vivant il fonctionne dans une optique gérontologique. Cette procédure analyse les signes de l'organisme, mais les englobe dans l'appréciation du contexte, les relie au passé et au futur, gère le "chaos" qu'est susceptible de créer tout système vivant : générer des événements imprévisibles.<br><br>

Mais les soins de qualité pour les personnes âgées ont un coût : prendre son temps.
Comme on le prend pour les adolescents chez qui se retrouvent d'ailleurs des situations similaires à celles du grand âge : des détériorations mentales après accident de la route, des crises dépressives avec risque suicidaire, l'anxiété du lendemain, des anorexies ou boulimies, le même fonctionnement psychique devant les menaces sur leur identité, leur estime de soi.
Chacun, auprès de l'adolescent prend son temps pour ne pas créer des maux par ses mots....<br><br>


La vieillesse n'est pas une impasse thérapeutique, mais une avenue pour des thérapeutiques différentes où le soignant est «thérapeute» par ses attitudes, ses comportements, ses paroles...sa structure d'humanitude.        	
<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		</div>

 <div id="pied" align="center"><p>&copy; Copyright 2006 Association Forma Consult | Mentions légales</p>
	  

</body>
</html>


Merci pour vos idées. Smiley smile
Modifié par schisix (23 Nov 2005 - 10:35)
Bonjour,

Je ne sais pas exactement pour ton décalage, par contre, tant que nous y sommes, pourquoi tu utilises des images de fond pour ton menu et ton footer vu que ce sont des aplats?
si il y a un léger décalage à droite du bandeau en flash, et c'est la même chose au niveau du pied de page.
Administrateur
Salut schisix,

As-tu pensé à suivre la "Méthodologie pour résoudre les problèmes d'affichages", qui se trouve dans le sujet d'annonce de ce forum (celui qui est à lire absolument avant de poster ici) ? Smiley cligne