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

Bonjour à tous!

simple visiteuse d'habitude, je trouve en général l'astuce géniale qui débloque la situation en parcourant simplement le forum (merci à tous les contributeurs), mais là, même si le thème a été abordé plusieurs fois, je bloque...

j'ai, dans une position "carrousel", un slideshow dont les images sont immenses:1920px.
l'ensemble des contenus du site tiennent dans 940px, centré horizonalement dans ma page, sauf ce slideshow.

pour l'instant, j'ai plusieurs div qui contiennent le header, le carrousel, le contenu et le footer, comme des bandes l'une sur l'autre, avec une position relative, float left, width:100%, et text-align center.
Dans chaque bande se trouve une div de 940px de large, en position relative, float left, margin 0 auto, et text align left.

jusqu'ici, rien de bien difficile, et d'ailleurs tout est à sa place!

sauf... que dans ma div carrousel (qui se trouve dans la div bande-carrousel), les contenus immenses ne sont pas vraiment centrés.

voici ce que j'ai exactement:

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

Dans le <p> se trouve ma super image de 1920px par 400px.

Je souhaite que mon image soit centrée par rapport au reste du contenu (qui fait 940px de large, je vous le rappelle).

Mon problème:
selon la résolution de l'écran (text réalisé avec ctrl+ et ctrl- sur le navigateur), le centre exact de mon image se décale vers la gauche.
Plus la résolution de l'écan est basse et plus le centre est décalé, et quand j'ai énormément augmenté la résolution, au point que je vois l'image entière, là elle est parfaitement centrée.


le trait rouge figure le centre de l'image

j'ai testé différentes solutions, trouvée notamment sur ce forum, mais aucune ne me satisfait.
Par exemple, si je positionne ma div carrousel en absolute, margin-left 50% et left -960px, l'image est bien centrée, mais une scrollbar horizontale (que je n'arrive pas à virer) apparait et va jusqu'au bout de l'image.

bref, pouvez vous m'aider à centrer ma div/mon image?

merci d'avance
Claire
Modifié par Claire39 (28 Nov 2012 - 19:45)

Salut,

En gros tu as augmenté la taille de ton image jusqu'à ce qu'elle s'adapte à ton dézoom maximum et qu'elle prenne quand même toute la largeur de la zone, c'est bien ça ? Si c'est ça c'est une mauvaise façon de procéder, ton image sera lourde et pas très optimisée.

Mais bon pour répondre à ta question tu peux ajouter cette propriété sur ton #carrousel p :

#carrousel p {
    text-align: center;
}

Salut,

ta solution va conserver la scrollbar horizontale :s

Est-il envisageable de mettre tes images en background (solution la plus simple) ?

Ju

JulienFouquet a écrit :
ta solution va conserver la scrollbar horizontale :s

Avec un overflow-x: hidden ?

merci pour vos réponses, mais:

overflow-x:hidden, et text-align:center n'ont rien donné;
je ne peux pas me permettre de garder une scrollbar hideuse et qui en plus fiche en l'air une partie de l'interface (je ferais des screenshot si vous voulez),
je ne peux pas mettre l'image en arrière plan, le but est d'avoir un carrousel dans cette div, générée par un plugin (Joomla), qui appelle du contenu d'un article, donc, non, pas possible de la jouer comme ça.

d'autres idées?

Bonjour, tiens-tu absolument à garder la taille de tes images aussi élevée ? Sinon tu les rognes pour les faire correspondre à la taille de ta div carrousel.

Bonjour,

le graphisme ayant été approuvé par le client, je n'ai plus qu'à réussir à intégrer ce que le graphiste a créé...

je ne peux donc pas réduire la taille de l'image, qui doit correspondre à un affichage 1920 x 1200 px (écran 34 pouces)

j'ai fait un screenshot correspondant à ces paramètres:

#bande-carrousel
{
	position:relative; 
	float:left;
	width:100%;
	height:400px;
	text-align:center; 
	z-index:1;
}
#carrousel
{
	position:absolute;
	float:none;
	width:1920px;
	margin-left:50%;
	left:-960px;
	height:400px;
	text-align:center;
}
#carrousel p
{
	margin-top:0px;
	margin-bottom:0px;
	overflow-x:hidden;
	text-align: center;
}

voici ce que ça donne, vous comprendrez que cela ne peut pas se faire





donc j'ai soit une div carrousel positionnée en relatif dont le contenu se balade et se décentre (mais pourquoi???)
soit une div carrousel positionnée en absolute qui créé une scrollbar horizontale et une coupe des autres div aléatoire (le fond des div header et contenu, par exemple, ne devraient pas "s'arrêter" comme ça, mais prendre toute la largeur!)

auriez vous d'autres idées?

Bonjour,

un topic similaire : http://forum.alsacreations.com/topic-4-63989-1-Centrer-image-dans-div-plus-petite.html
je n'avais pas forcement bien saisi la question , mais il y a des pistes. Ma contribution etait : http://dabblet.com/gist/3801744

Cdt,
GC
Modifié par gc-nomade (12 Nov 2012 - 13:09)

Bonjour GC-nomade,

je n'arrive pas à comprendre où vous voulez en venir avec votre contribution sur l'autre topic.
j'avais bien lu ce ancien topic, sans comprendre la solution proposée.

bonjour,

L'architecture de base <elementhtml><img /></elementhtml>

le principe se base sur le style inline-block de l'image et les marges négatives pour réduire virtuellement l'espace quelle requiert dans son parent.


L'image se cale sur le base-line et est ajustable avec deux moyens pour le centrage vertical:
1) le line-height
2) le vertical-align:

Pour le centrage horizontal:
1) text-align:center sur le parent

on debute alors par exemple avec comme CSS:

elementhtml {
height:250px;
line-height:250px;
text-align:center;
}
elementhtml img {vertical-align:middle;}

les marges négatives :
si un élément fait 100px de large et que l'on applique margin-left:-100px; , il n'occupe plus que 100px -100px=0 d'espace en theorie, donc aucune largeur ., idem pour la hauteur.

Oups =>Les marges négatives vertical:
En réduisant virtuellement l'espace, ou plutôt la hauteur que l'image va occuper, son alignement sur le base-line s'en trouve aussi modifier.

Il nous faut alors un second élément qui se centre parfaitement et qui soit plus haut que l'image, pour que celle-ci s'aligne dessus.
Sans marges négative avec une hauteur de 100% (de 250px; sur un line-height de 250px;) cet élément occupe toute la hauteur , l'image virtuellement réduite en hauteur grâce au marge négatives vient alors s'aligner dessus .
Cette élément peut-être insérer dans le html (un <span>) ou via les pseudo-éléments : ::before ou ::after.

elementhtml:before {
content:' ';
display:inline-block;
height:100%; 
width:0;
vertical-align:top; /* elimine l'espace reservé au jambage de texte sous l'élement */
}

L'utilité des marges négatives ?
Laisser l'image sortir de son parents sans quelle se cogne sur les bords , et sans provoquer les barre de scroll

Cdt,
GC

donc, si je comprends bien,
j'ai
1 div carrousel qui est mon conteneur,
1 p qui contient:
1 img

Div#carrousel fait 100% de large, donc la largeur complète du navigateur,
la largeur de p n'est pas réglée, l'image fait 1920px de large.

je dois donner à p un display inline-block, une largeur de 100px et une marge gauche de -100px (largeur virtuelle de p = 0px)

ensuite je place img avec un text-align centré sur p

pour le centrage vertical, je n'en n'ai pas besoin, donc je ne m'en occupe pas.

ai-je bien compris?

soit ceci:

#carrousel
{
	position:relative;
	float:left;
	width:100%;
	height:400px;
	text-align:center;
}

#carrousel p
{
	display:inline-block; 
	width:100px;
	margin-left:-100px;
        text-align:center;
        margin-bottom:0px;
        margin-top:0px; 
}

#carrousel img
{
	display:inline-block;
	position:absolute;
	width:1920px;
	left:-960px;
	margin-left:50%;
}

et en HTML:

<div id="carrousel>
    <p><img /></p>
</div>

avec ceci, j'obtiens la même chose que mes deux derniers screenshots

:) non

La structure a styler est <p><img/></p>

p {text-align:center;}
img {margin:0 -100%;vertical-align:top;}

Serait suffisant .

démo pour voir en fait : http://dabblet.com/gist/4059656 .Le deuxième paragraphe en overflow:visible est juste pour montrer que l'image se centre.
Modifié par gc-nomade (12 Nov 2012 - 15:35)

merci de me mâcher le travail, je comprends un peu mieux...
d'ailleurs ça marche maintenant!

il ne me reste plus qu'à transformer les p et img (statiques) en carrousel...

la suite de mes aventures demain!

:)

Suite à l'intervention de GC-nomade, j'ai bien réussi à centrer parfaitement un paragraphe contenant une image de 1920px dans mon site.

ça se complique avec le fait que dans une page, ce paragraphe devient un carrousel qui fait défiler des div contenant des paragraphes contenant des liens contenant des images.

voilà le html tel que me le fournit Firebug:

<div id="bande-carrousel">
    <div id="lofass29" class="lof-ass " style="height:400px; width:auto;">
        <div class="lofass-container  lof-css3 grey ">
            <div class="preload"><div></div></div>
            
            <div class="lof-main-wapper" style="height:400px; width:1920px;">
                    <div class="lof-main-item ">
                        <p><a href="http://localhost/mmpo/index.php?option=com_flexicontent&Itemid=3&cid=1&id=2&view=items" title="Slider entreprise"><img src="http://localhost/mmpo/images/lofthumbs/1920x400/images/stories/slider/slider6.jpg" title="Slider entreprise" ></a> </p>
                    </div> 
                    <div class="lof-main-item">
                        <p><a href="http://localhost/mmpo/index.php?option=com_flexicontent&Itemid=5&cid=1&id=3&view=items" title="Slider études"><img src="http://localhost/mmpo/images/lofthumbs/1920x400/images/stories/slider/slider6.jpg" title="Slider études" ></a> </p>
                    </div> 
                    <div class="lof-main-item">
                        <p><a href="http://localhost/mmpo/index.php?option=com_flexicontent&Itemid=9&cid=1&id=7&view=items" title="Slider catalogues"><img src="http://localhost/mmpo/images/lofthumbs/1920x400/images/stories/slider/slider6.jpg" title="Slider catalogues" ></a> </p>
                    </div> 
                    
            </div>
        
        </div>
    </div> 
</div>

du côté CSS du template:

html { 
	overflow-x:hidden;
	width:100%; 
}

#bande-carrousel
{
	position:relative;
	float:left;
	width:100%;
	height:400px;
	text-align:center;
	background:pink;
	z-index:1;
}

#bande-carrousel p 
{ 
	display:inline-block; 
	text-align:center; 
	overflow:visible; 
	margin-top:0px; 
	margin-bottom:0px; 
}

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

le CSS du plugin qui génère le carrousel:

.lof-ass{ }

.lof-ass .lofass-container{
	position:relative;
	margin:0px auto;
	width:auto; 
	height:auto	; 
	overflow:hidden;	
	text-align:center; 
}

.lof-ass .lof-main-wapper{
	position:relative;
	margin:0px auto;
	padding:0px;
	overflow:hidden;
	text-align:center; 
	height:100%;
}

.lof-ass .lof-main-wapper .lof-main-item{
	overflow:hidden;
	padding:0px;
	margin:0px;
	height:100%;
	width:100%;
	position:absolute;
}

.lof-ass .lof-main-wapper .lof-main-item img{
	padding:0px;
}

Il doit y avoir un problème au niveau du css du plugin, parce que voici un screenshot de mon carrousel:


et si je passe la propriété de l'image à

#bande-carrousel img 
{ 
	
	vertical-align:top; 
}

j'obtiens de nouveau ça:


bref, je n'avance pas!

avez vous encore un peu d'aide en réserve pour moi?

heu, pour le p , c'etait: overflow:hidden; et pas de display! sauf block, valeur par défaut de cette element.

enfin, la structure produite par le carroussel , qui est une vrai soupe, n'est pas forcement adapter et differe.
on a :

<div class="lof-main-item">
                        <p><a href="http://localhost/mmpo/index.php?option=com_flexicontent&Itemid=9&cid=1&id=7&view=items" title="Slider catalogues"><img src="http://localhost/mmpo/images/lofthumbs/1920x400/images/stories/slider/slider6.jpg" title="Slider catalogues" ></a> </p>
                    </div> 

du coup on repartirai alors avec:

p {overflow:hidden;text-align:center;}
p a img {margin:0 -100%;vertical-align:top;}

Avec une page en ligne, nous verrions mieux ce que ce carroussel fait vraiment et ce que le js modifie à la volée

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.

Bonjour,

Je n'ai pas tout lu, mais est-ce qu'il serait possible que tu mettes à disposition une page de ton problème en ligne, afin que l'on puisse tester les modifications directement avec l'inspecteur d'éléments?
Ça simplifierai grandement la démarche.

Merci.

edit: oups quelqu'un a déjà demandé 2 messages plus haut.
Modifié par Raphi (14 Nov 2012 - 10:52)

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.

++