Geckozone

Bsoir tout le monde

Je me demande comment on fait pour centrer une image dans un div, vu que "align: center" ne fonctionne pas et que mettre l'attribut align="center" sur le div n'est pas valide...

O

Généralement pour éviter d'avoir à chercher comment foutre une fichu centralisation à une image je la mets en background d'un div ou autre truc du genre.

et comment tu centres le div alors ?

#img {
position: absolute;
margin-left: auto;
margin-right: auto;
}

Je sais pas si c'est static absolute ou relative qui est le plus approprié, à vue de nez je dirais static et absolute (pour position)

j'ai essayé u truc barbare du genre

Code : Tout sélectionner

<head>
  <style type="text/css">
#img {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
}
  </style>
</head>
<body>
<div><img id="img" src="http://geckozone.tuxfamily.org/geckoforum/templates/fisubsilver/images/logo_phpbb2.gif" alt=""></div>

</body>

Mais ça marche pas

Après tu rajoute:

background-image: url('urlimg.ext');
background-position: center center;
background-repeat: no-repeat;

Ceci devrait marcher:

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#theDiv {
  text-align: center;
}
</style>
</head>
<body>
<div id="theDiv"><img src="http://geckozone.tuxfamily.org/geckoforum/templates/fisubsilver/images/logo_phpbb2.gif"></div>
</body>
</html>

Merci mais non, parce que c'est pas du texte, j'ai déjà essayé

En plus mettre ça en bg je peux pas, je veux mettre un <a> autour de l'image

Ca ne marche pas parce que ton image est toute seule, pas dans le flux de texte. Si tu la mets dans un paragraphe ou un titre ça fonctionnera (voir par exemple la page avec le lézard quand tu ouvres geckozone.org)

olab a écrit :Merci mais non, parce que c'est pas du texte, j'ai déjà essayé :-)

?
Bizarre, ça marche chez moi.

Voici l'explication pour le centrage (horizontal et vertical) d'un div en xhtml :

http://www.alsacreations.com/articles/centrer/

Perfect, c'est bon. Et maintenant, est-ce que quelqu'un pourrait me dire comment mettre en page en deux colonnes sans table. J'ai déjà vu ça mais je retrouve plus l'url

oui :

.gauche {
float: left;
width: 200px;
}

.droit {
margin-left: 200px;
}

Sinon, quelques liens :
- http://www.alsacreations.com/articles/design/

- http://www.macromedia.com/fr/devnet/mx/ ... ayout.html
- http://openweb.eu.org/articles/initiation_float/

Thanks, nickel, j'étais allé sur openweb mais je cherchais un truc du style "débarassez-vous des tableaux"

Et voilo, merci à tous pour vos coups de main, je vous annonce la nouvelle version de mon site, valide xhtml 1 strict et CSS2, et en plus c'est tout zoli

Vous pouvez aller y jeter un coup d'oeil si ça vous chante

Bon vous retrouverez des similitudes avec deux sites...

mais c'est un peu normal.

http://olab.free.fr

O

Gnarf, c'esdt quasi le même rendu que le mien en cour de travaux, sauf que j'ai un petit plus d'effet de fondu.

J'ai failli en faire un sous le header, que le scroll disparaisse en fondu, mais j'ai trouvé que ça faisait trop

Geckozone

Centrage d'une image

Centrage d'une image