sophie_dev Posté 4 Novembre 2009 Posté 4 Novembre 2009 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.
PotatoesJunky Posté 4 Novembre 2009 Posté 4 Novembre 2009 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.
Remi Posté 4 Novembre 2009 Posté 4 Novembre 2009 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)
sophie_dev Posté 4 Novembre 2009 Auteur Posté 4 Novembre 2009 (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é 4 Novembre 2009 par sophie_dev
sophie_dev Posté 4 Novembre 2009 Auteur Posté 4 Novembre 2009 je up désolée, mais je ne trouve tjs pas... Je me sers désormais de dreamweaver donc ca avance certaines choses, mais toujours rien pour centrer en vertical.... Je ne sais plus comment faire...
PotatoesJunky Posté 4 Novembre 2009 Posté 4 Novembre 2009 Ah, le centrage vertical, c'est une autre histoire... Un élément de solution ici (en anglais), et une illustration là
sophie_dev Posté 5 Novembre 2009 Auteur Posté 5 Novembre 2009 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>
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant