Aller au contenu

Centrer une image sur une page

sophie_dev

Par sophie_dev
dans (X)HTML et CSS

 Partager

Sujets conseillés

sophie_dev

sophie_dev

Posté
Posté

Bonjour,

j'essaie désespérément de créer un site pour présenter ma maison.

Donc je voudrais quelque chose de très simple, quelques photos sur chaque page, un bouton pour aller de l'une à l'autre...

Mais je suis depuis plusieurs jours déjà sur la page d'accueil sur laquelle je voudrai mettre 1 photos centrée en plein milieu de la page, et un bouton en dessous marqué "Entrer".

Mais rien que ca, ca ne marche pas.

J'ai fais une feuille (X)Html + feuille de style css mais dès que cela marche sur firefox, c'est tout tordu sur IE6, et inversement.

Quelqu'un pourrait il me dire comment centrer une foutue image sur une page et comment faire pour que cela fonctionne sous n'importe quel explorateur, car là, je suis en train de faire une crise de nerf...

Pareil pour le bouton entrer en dessous, quel code utiliser en css ?

Merci par avance pour votre aide, ca relève d'une question de santé là lol.

Sophie.

Lien vers le commentaire
Partager sur d’autres sites
PotatoesJunky

PotatoesJunky

Posté
Posté

Quelques éléments de solutions ci-dessous (il existe d'autres méthodes, mais celles-ci sont parmi les plus courantes) :

Pour centrer une image :

CSS > .centrer {text-align: center;}

HTML > <p class="centrer"><img src="URL de l'image" alt="description sommaire de l'image" /></p>

Pour le bouton :

1) en image, même chose, si ce n'est qu'on rajoute la balise de lien > <p class="centrer"><a href="URL de la page où on envoie le visiteur"><img src="URL de l'image" alt="description sommaire de l'image" /></a></p>

2) en texte simple, on définit une class CSS (ou uen id) avec les attributs (police, style, couleurs, etc...) qu'on applique en HTML > <p class="centrer"><a href="URL de la page où on envoie le visiteur">Entrer</a></p>

A noter que de plus en plus de professionnels n'optimisent plus leur code pour IE6, qui est totalement obsolète et dépassé et d'ailleurs en perte de vitesse : sa part de marché se réduit chaque mois au profit des autres navigateurs, y compris IE7 et 8 qui posent nettement moins de problèmes.

Lien vers le commentaire
Partager sur d’autres sites
Remi

Remi

Posté
Posté

Une autre solution en pur CSS :

img{display:block;margin:0 auto;}

(et tu peux mettre autre chose que 0 si tu veux des marges en haut et en bas des images)

Lien vers le commentaire
Partager sur d’autres sites
sophie_dev

sophie_dev

Posté
  • Auteur
Posté (modifié)

Merci pour vos réponses...

J'ai essayé ta solution Rémi, mais cela ne centre pas l'image en vertical. Niveau horizontal, c'est nickel, mais pas en vertical, elle est pratiquement collée en haut.

Et quand je change la valeur 0 de margin, cela me colle tout dans le coin en haut à gauche... Et ce, en utilisant n'importe quelle valeur, que je remplace le 0 par 20, 30, -20 , etc...

Je ne vois plus comment faire...

Quant à la solution de Junky, c'est pratiquement pareil... l'image n'est pas centrée dans la hauteur.

Modifié par sophie_dev
Lien vers le commentaire
Partager sur d’autres sites
sophie_dev

sophie_dev

Posté
  • Auteur
Posté

Merci pour tout, j'ai fini par trouver.

j'ai fais ca et ca marche nickel:

CSS:

.img {
position:absolute;

/* Centrer verticalement */
top: 50%;
margin-top: -266px;

/* Centrer horizontalement */
left: 50%;
margin-left: -360.5px;
}
.img2 {
position:absolute;

/* Centrer verticalement */
top: 100%;
margin-top: -67px;

/* Centrer horizontalement */
left: 50%;
margin-left: -17px;

et en HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Created on: 03/11/2009 -->
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="index.css" />

<style type="text/css">
<!--
body {
	background-color: #333333;

}
-->
</style><div class="img"><img src="images/atrium repbis.jpg" alt="" /></div>
<div class="img2"><img src="images/Entrer.bmp" alt="" /></div>


<body>

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...