[Résolu] Centrer un contenu très grand sans scrollbar ni décalages

(reprise du message précédent)

Claire39 a écrit :
Bonjour,

l'overflow:hidden; était sans doute un test que j'ai oublié de corriger avant de poster hier.
j'ai bien remis tous les paramètres comme vous me l'indiquez, et j'obtiens la même chose que le 1er screenshot d'hier.

je note par ailleurs que si je donne au a un display:block; j'obtiens le 2e screenshot.

le site est actuellement développé en interne, je vais voir ce que je peux faire.

okay tu peut te servir de dabblet ou jsfiddle (ou autre utilitaire en ligne) par exemple et utiliser les images de http://lorempixum.com comme je l'ai fait dans l'exemple proposé.

En effet on peut descendre sur a et a img pour centré les images sans scroll.

++

Bonjour,

il m'a fallu un peu de temps avant de pouvoir mettre l'ébauche du site en ligne, mais c'est fait!
voici l'url:

seule la position de l'image dans le carrousel de la page d'accueil pose problème

ps: j'ai arrêté le défilement des images dans le carrousel pour vous éviter de vous arracher les cheveux.
Modifié par Claire39 (22 Nov 2012 - 10:43)

Bonjour,

comme vu plus haut , tu peut descendre sur les deux derniers elements : a et a img.

en modifiant ceci :

#bande-carrousel p [b]a[/b]
{ 
	text-align:center; 
	overflow:hidden; 
	margin-top:0px; 
	margin-bottom:0px;[b] display:block;[/b]
}

le résultat devrait être plus convaincant.

++

Le résultat est convaincant!

j'ai juste eu à séparer ceci afin de supprimer effectivement les marges haut/bas du paragraphe p

#bande-carrousel p {	
	margin-top:0px; 
	margin-bottom:0px; 
}

#bande-carrousel p a
{ 
	text-align:center; 
	overflow:hidden; 
	display:block;
}

je te remercie de ton soutien et de ton aide patiente

Claire39 a écrit :
je te remercie de ton soutien et de ton aide patiente

:) , ben , c'est le forum qui permet ça.

bonne continuation

argh!

IE7 refuse de bien faire!
j'ai essayé un display block sur l'image, mais rien n'y fait!
l'image est positionnée avec son centre exactement à l’extrême droite de l'écran.

des conseils?
merci!

Je suis donc entrain d'adapter mon thème à IE7 ( ), et je rencontre un problème pour positionner ma grande image.

reprenons:
j'obtiens une image parfaitement centrée avec les navigateurs modernes (et normaux) + IE8:

<div id="bande-carrousel>
    <p><a><img /></a></p>
</div>

#bande-carrousel p {	
	margin-top:0px; 
	margin-bottom:0px; 
}

#bande-carrousel p a
{ 
	text-align:center; 
	overflow:hidden; 
	display:block;
}

#bande-carrousel p a img 
{ 
	margin:0 -100%; 
	vertical-align:top; 
}

avec IE9:

#bande-image p a img 
{ 
	margin:0 -50%;
	vertical-align:top; 
}

mais ça coince avec IE7...
avec margin:0 -100%, j'obtiens ça:



avec margin:0 -50%;, j'obtiens ça:



Y aurait il une bonne âme pour m'aider à me dépatouiller de ce bazar?
merci

bonjour,

Pour IE7 ,
un margin-left seulement serait probablement plus adapté (l'exemple est-il encore en ligne ? )
ou un position:relative (en dernier recours) pour provoqué un reflow à l'affichage et reporter l'image en avant plan.

++

Bonjour GC-Nomade

j'avais du supprimer le site de test, le voilà remis en ligne:


j'ai essayé ce que tu me proposes dans ton post précédent, mais sans résultat pour le moment

edit: solution au problème trouvée, je supprime le lien
Modifié par Claire39 (28 Nov 2012 - 19:40)

Bonsoir,

j'ai enfin compris ce qui buggait avec IE7! (tralala!)

je cherchais la solution au problème au niveau de l'image, alors qu'elle se trouvait complètement ailleurs!

voici les modifs sur le template IE7, pour avoir un centrage de mon image:

#bande-carrousel
{
	position:relative;
	float:left;
	width:100%;
	height:400px;
	margin-top:-39px;
	text-align:left;
	background:#01235c;
	z-index:1;
}
#bande-carrousel p {	
	margin-top:0px; 
	margin-bottom:0px; 
	text-align:center; 
	overflow:hidden;
}

#bande-carrousel p a img {
	margin-left: -50%;
	vertical-align:top;
}

donc il fallait aligner le contenu de la bande générale à gauche pour que tout aille bien, et un margin-left: -50% au lieu de margin:0 -100%

Je remercie encore une fois GC-Nomade pour son soutien!
Bonne soirée