28234 sujets

CSS et mise en forme, CSS3

Centrer un div sans imposer sa dimention à la fenetre du navigateur

Bonjour

Je souhaite centrer une image dans un div sans quelle n'impose sa dimension à la fenetre du navigateur.

Si je mets ceci
#pied{
	position:absolute;
	right: 50%;

	width: 1740px;
	height : 766px;	
	background:  url("pied.png") no-repeat top;
	background-color: transparent;
	}

L'image se centre mais la fenêtre du navigateur m'ajoute un scrowlbar horizontal, considérant que la taille mini de ce qui est à afficher fait la taille de mon image.

Comment puis-je contourner le problème ?

Merci
l'image est cachée à moitié à gauche de l'écran sans soucis

si j'ajoute un margin right
#pied{
	position:absolute;
	right: 50%;
	margin-right : -813px;
	width: 1740px;
	height : 766px;	
	background:  url("pied.png") no-repeat top;
	background-color: transparent;
	}
oula il s'est passé un truc avec un glissé déplacé malheureux !

Le vrai message :

Bonjour

Je souhaite centrer une image dans un div sans quelle n'impose sa dimension à la fenetre du navigateur.

Si je mets ceci
#pied{
	position:absolute;
	right: 50%;

	width: 1740px;
	height : 766px;	
	background:  url("pied.png") no-repeat top;
	background-color: transparent;
	}

l'image est cachée à moitié à gauche de l'écran sans soucis

si j'ajoute un margin right
#pied{
	position:absolute;
	right: 50%;
	margin-right : -813px;
	width: 1740px;
	height : 766px;	
	background:  url("pied.png") no-repeat top;
	background-color: transparent;
	}
L'image se centre mais la fenêtre du navigateur m'ajoute un scrowlbar horizontal, considérant que la taille mini de ce qui est à afficher fait la taille de mon image.

Comment puis-je contourner le problème ?

Merci
cree un style pour ton image de sorte à ce qu'il contienne dans ton div

par exemple :



#div img 
{
  width: 1740px;
	height : 766px;
}



Aussi si tu souhaites donner une position particuliere tu peux ajouter padding soit left, bottom ... en foction de ce que tu veux !

esperant avoir compris ton problème et pouvoir t'aider
Bonjour
Merci de m'avoir répondu, en me relisant je me rends compte à quel point ma demande est tordue et pas claire...

avec l'image dans le div plutot qu'en background ca ne change rien.

ci joint une image qui illustre mon besoin
l upload/41515-aa.jpg
le vert et le rouge montre le conteneur principal du site de 980px de large incompressible et centré.
En dessous on voit en bleu la fameuse grande image, ici centrée à la position souhaitée.

Problème : la fenêtre du navigateur montre un scroll horizontal indiquant que tout ne tient pas à l’écran alors que le conteneur central de 980 a encore beaucoup de marge.

La question est de savoir comment avoir le même rendu mais avec le navigateur qui ne considère pas les bords de cette image comme du contenu incompressible (activation de la barre de defilement)

Merci
si il y'a un scroll vertical je pense bien que c'est pour des raisons de largeur !
vérifie bien margin-right : -813px; aussi joue avec les valeurs et tu verras certainement ! selon moi le problème peut venir de là !
margin-right : -813px; est là pour décaler le div et placer l'image à la position que je veux, en complément du right 50% qui permet de centrer l'image quelque soit la taille de la fenêtre du navigateur.

Le scrol horizontale s'affiche parce que la grande image est bien plus large que la fenêtre du navigateur (bien plus large que 980px). J'aimerai que le navigateur se contrefiche d'avoir l'image qui déborde de la fenêtre.
salut,
si ton image est arrière-plan (et ça a l'air de l'être), tu pourrais la placer en background, puis la centrer avec 
background-position:center;
.
Si tu souhaites tout de même la garder en <img>, tu dois appliquer un "overflow:hidden" au conteneur de ton image et le mettre en "position:relative" pour que l'image se positionne en fonction de celui-ci.
Sujet clos
Aller à