bannière wix
Forum > XHTML / CSS > Centré une image verticalement

Centré une image verticalement

ok Le problème posé sur ce sujet a été résolu.
Auteurs Messages
Page : 1
icone offline stc # Posté le 13/11/2008 à 18h35
avatar de stc
Rang: membre
Salut, je fais cette page: http://oxydshoes.com j'aimerais que l'image contenant le logo soit centrée verticalement. Sur mon 15" il y a une bar de défilement. J'aimerais que, quel que soit la résolution de l'écran, on voit le logo centré verticalement et en haut et en bas les 2 espace noirs (sans barre de défilement).
Merci de votre aide.
tchao.
icone online funnycat # Posté le 13/11/2008 à 21h54
avatar de funnycat
Rang: administrateur
Bonjour stc.

Je me suis rendu sur cette page et je me rend compte que l'image fait 946 pixels de large. Le problème c'est qu'il y a une bonne partie de cette image qui est de la même couleur que l'image de fond. En coupant une partie de cette image il te serait possible de gagner 100 pixels à gauche + 80 pixels environ à droite.
De mon coté, avec mon écran 17 pouces l'image est bien centré sans problème. J'ai redimensionné la fenêtre de mon navigateur pour simuler un écran 15 pouces et en effet l'image n'est pas centré à cause du bord gauche de cette image qui prend 100 pixels.

Je te suggère donc de supprimer les bords de l'image non nécessaire. Non seulement tu pourra corriger ton problème mais l'image sera également plus légère et tu pourra ainsi gagner en vitesse d'affichage (idéal pour les visiteurs qui n'ont pas une connexion internet rapide).

Cordialement. smiley
Ma page préférée? Le dossier référencement qui présente une multitude d'informations utiles. smiley
Sinon hors internet je suis développeur web PHP.
icone offline stc # Posté le 14/11/2008 à 16h26
avatar de stc
Rang: membre
Heu t'as pas compris ce que je voulais dire funnycat je te parlais de centrer l'écran verticalement et non horizontalement. La j'ai mis dans le CSS de body un margin auto mais on ne vois pas de bande noire en haut!
Merci de m'aider.
icone online funnycat # Posté le 14/11/2008 à 18h16
avatar de funnycat
Rang: administrateur
Effectivement, je n'ai pas fais attention et j'ai cru que tu parlais de centrer horizontalement un élément.

Il faut savoir que l'HTML n'ai normalement pas un média où l'ont peut centrer horizontalement certains élément. Il est néanmoins possible de feinter un peu pour arriver à ses fins.

Au lieu de répondre à ta question directement ici, je vais te fournir un lien qui explique très bien ce que tu dois faire, puisqu'il te propose plusieurs solutions bien expliqué. Il faut se rendre sur l'aide de AlsaCreations pour consulter la question "comment centrer un élément verticalement". J'espère que cela va répondre à tes besoins.

EDIT:
Sinon, il y a un code relativement simple à utiliser découvert sur le site: CyberFormateur:
Code HTML:
Code:
<div class="centrer_photo">
<img src="photo.jpg" alt="" />
</div>

Code CSS:
Code:
.centrer_photo
{
position:absolute;
top: 50%;
margin-top: -XXpx; /* la moitié de la hauteur de l'image */
}


Cordialement.
Ma page préférée? Le dossier référencement qui présente une multitude d'informations utiles. smiley
Sinon hors internet je suis développeur web PHP.
Page : 1