Centrage d'une image

olab · Message par **olab** » 11 sept. 2003, 23:54

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

Romuald · Message par **Romuald** » 12 sept. 2003, 00:05

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.

olab · Message par **olab** » 12 sept. 2003, 00:06

et comment tu centres le div alors ?

Romuald · Message par **Romuald** » 12 sept. 2003, 00:08

#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;

Gilles · Message par **Gilles** » 12 sept. 2003, 01:42

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>

olab · Message par **olab** » 12 sept. 2003, 09:01

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

Message par **Benoit** » 12 sept. 2003, 09:40

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)

Gilles · Message par **Gilles** » 12 sept. 2003, 10:58

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

?
Bizarre, ça marche chez moi.

SIBELIUS · Message par **SIBELIUS** » 12 sept. 2003, 11:24

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

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

olab · Message par **olab** » 12 sept. 2003, 15:37

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

SIBELIUS · Message par **SIBELIUS** » 12 sept. 2003, 16:33

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/

olab · Message par **olab** » 12 sept. 2003, 17:18

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

olab · Message par **olab** » 14 sept. 2003, 13:14

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

Romuald · Message par **Romuald** » 14 sept. 2003, 13:52

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.

olab · Message par **olab** » 14 sept. 2003, 14:46

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

Qui est en ligne ?