Problème de centrage d'image + scrollbar

Bonjour.

J'ai un petit soucis tout bête de centrage d'image dans un div, en réalite ça fonctionne plus ou moins mais pas dans tout les navigateurs notament firefox.

L'adresse est là : Ma page qui ne fonctionne pas

Sous internet explorer : tout fonctionne correctement.

Sous Firefox : les marges sont correctement présentées, mais toutes mes images sont alignées à gauche de mon div et elles sortent du cadre de mon div. le cadre n'est présent uniquement pour me rendre compte de lamise en page, je 'enleverrais aprés.

Sous AOl : ça fonctionne correctement sauf que j'ai une scrollbar en bas horizontale en 800x600. mais sur AOl ca déc.....souvent :colere2:

Je vous donne mon code html :

<body>


<?php //Ici on inclue le bloc menu gauche enregistré dans blocmenugauche.php avec les dimensions de 1000px x 1700 px
include("blocmenugauche.php");
?>


<div id="conteneur4">
<h1>L'EDUCATION</h1>
<h2>Comment marcher</h2>
<p>hf fsfhf sfsf ffsf dslsjd sdfslfj lfl dldfj sfj j lj klj lkjlkj lkj kllkj lkjlk lkjlkj lkjlk kjlkj lkjlkj lkjlkj lkjlkj lkjlkj
jjlkj lkjlkj lkjlk lkjlk lkjlk lkjlk lkj jlk jlk jlk j lkj lkj ldfiue ktjhih eeheiuh hrtii nreihiy y eriucb iiry iuy ziui iuiuy zeiryr ciuzeryry ciuzeury cczeiruiur zeri izrhiaz</p>

<img src="PHOTOS/dressage11juin0628.jpg" class="image" alt="Athos juin 2006 en pleine séance de dressage" />

<p>jljlkjlk lkljl kjeljel elgj dflkgjlgj lkgj jerlg jrlkg jelrkgj lkgj rlkg jerlkgj lrkgj jerlkgj lkgj rlkgj </p>

<img src="PHOTOS/papaetAthosbagarre4juin0645.jpg" class="image" alt="Athos 4 JUIN 2006." />

<div id="retour">
<a href="monhistoire7.php"><img src="flechegauche.gif" class="retour" alt="Vers la page 7 : le retour du beau temps" /></a><a href="monhistoire9.php"><img src="flechedroite.gif" class="retour" alt="Vers la page 9 : juin 2006 première séance d'éducation" /></a>
</div>
</div>
</body>
</html>

Et mon code css :

#conteneur4 {
position: absolute;
top: 40px;
margin-left: 22%;
width: 77.6%;
height: 100%;
border-style: solid;
border-color: red;
border-width: 1px;
}
#conteneur4 h1 {
text-align: center;
color: blue;
}
#conteneur4 h2 {
color: red;
text-align: left;
padding-left: 5.5%;
}
#conteneur4 p {
margin: 0 0 0 1em;
text-indent: 45px;
text-align: justify;
width: 86%;
margin-left: 7%;
margin-bottom: 20px;
}
.image {
text-align: center;
display: block;
margin-bottom: 20px;
}
#retour {
text-align: center;
}
.retour {
border-style: none;
padding-left: 10px;
margin-top: 20px;
}

Je vous remercie pour votre aide, surtout que cà doit être simple mais je n'y arrive pas :colere2:

Kawawachikamach

25 juin 2006 à 22:07:22

http://escrime-3-frontieres.fr/

Kaesar

26 juin 2006 à 8:24:46

Une autre technique ..

efficace

.centrer
{
text-align: center;
}

normalement ca marche !!

26 juin 2006 à 17:37:49

Merci à toi, je viens d'essayer et ca fonctionne, je n'ai plus que 2 soucis :

Sous Firefox en 1024x768 j'ai mes images qui sortent de mon div mais bon à la limite ce n'est pas grave puisque ensuite j'enlève la bordure, la bordure était là uniquement pour me rendre compte de la mise en page. par contre j'ai mon h2 qui est un peu décalé vers la gauche et mon h1 qui est aussi un peu décalé du haut par rapport aux autres navigateurs.

Par contre en 800x600 sous AOL j'ai un scrollbar horizontal, comment il faut faire pour l'enlever

?

Merci à vous

Page qui ne fonctionne pas

image dans un div

Problème de centrage d'image + scrollbar

Supprimer

Modérer

Signaler le message aux modérateurs