Tout d'abord, bonjour à tous, et comme vous le voyez je suis nouveau ici ... donc enchanté & bravo pour ce que vous faites ! 
J'essaye depuis plus de 4 heures de centrer une img horizontalement dans 1 DIV, et aussi de l'aligner en meme temps sur le bas de ce même div ...
J'ai bien compris qu'il y avait un problème d'elements inline (img) et de block(div), mais je suis certain qu'il doit y avoir une solution.
J'ai bien parcouru TOUT GOOGLE (lol), parcouru votre forum vos tutoriaux en rapport avec l'alignement & le centrage, (vraiment tout essayé), mais là ca devient vraiment dur.
J'ai même essayé de retourner a mes vieilles tables mais même là, IE & FF ne sont toujours pas d'accord.
Voici un exemple d'où j'en suis : EDITEE (url temporaire... voir ici pour résultat : http://fotoworks.free.fr/photos-couchers-de-soleil-14-11.html)
et ce que j'aimerais avoir est http://img53.imageshack.us/img53/4103/exlw9.jpg
Vous remarquerez que les images n'ont pas toutes les mêmes dimensions (hauteur & largeur), donc je ne peux malheureusement pas utiliser de position:absolute & bottom:0px
Bien sur, je ne veux pas non plus de javascript, et j'aimerais un code qui soit valide & compatible IE & FF au minimum.
Voilà J'aimerais donc savoir si un guru du coin aurait une solution pour ce pb!
pour ceux qui veulent éviter le afficher SRC :
Milles merci d'avance pour avoir lu (et peut etre répondu à mon pb) ce post
Baudouin aka b0b0
Modifié par b0b0 (09 Jan 2007 - 20:32)
J'essaye depuis plus de 4 heures de centrer une img horizontalement dans 1 DIV, et aussi de l'aligner en meme temps sur le bas de ce même div ...
J'ai bien compris qu'il y avait un problème d'elements inline (img) et de block(div), mais je suis certain qu'il doit y avoir une solution.
J'ai bien parcouru TOUT GOOGLE (lol), parcouru votre forum vos tutoriaux en rapport avec l'alignement & le centrage, (vraiment tout essayé), mais là ca devient vraiment dur.
J'ai même essayé de retourner a mes vieilles tables mais même là, IE & FF ne sont toujours pas d'accord.
Voici un exemple d'où j'en suis : EDITEE (url temporaire... voir ici pour résultat : http://fotoworks.free.fr/photos-couchers-de-soleil-14-11.html)
et ce que j'aimerais avoir est http://img53.imageshack.us/img53/4103/exlw9.jpg
Vous remarquerez que les images n'ont pas toutes les mêmes dimensions (hauteur & largeur), donc je ne peux malheureusement pas utiliser de position:absolute & bottom:0px
Bien sur, je ne veux pas non plus de javascript, et j'aimerais un code qui soit valide & compatible IE & FF au minimum.
Voilà
J'aimerais donc savoir si un guru du coin aurait une solution pour ce pb! pour ceux qui veulent éviter le afficher SRC :
INDEX.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="revisit-after" content="1 days" />
<meta name="Subject" content="" />
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<meta name="robots" content="all" />
<meta name="audience" content="all" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>FOTOWORKS</title>
</head>
<body>
<div class="ThumbsWrapper">
<div class="photosDIV">
<a href="../photo-tes-14-79.html"><img src="../photos/thumbs/PB250008.JPG" alt="tes" title="tes" /></a>
</div>
<div class="thumbsDescr">
tes
</div>
</div>
<div class="ThumbsWrapper">
<div class="photosDIV">
<a href="../photo-calton-hill-edimbourg-14-71.html"><img src="../photos/thumbs/PB250001.JPG" alt="Calton Hill, Edimbourg" title="Calton Hill, Edimbourg" /></a>
</div>
<div class="thumbsDescr">
Calton Hill, Edimbourg
</div>
</div>
....
</body>
</html>
STYLE.CSS
.ThumbsWrapper {
width:176px;
height:172px;
margin-bottom:15px;
margin-right:1px;
float:left;
background:#272727;
border:1px solid #4f4f4f;
}
.ThumbsWrapper div.photosDIV{
position:relative;
width:176px;
height:139px;
text-align: center;
}
.ThumbsWrapper div.photosDIV img{
border:1px solid #bcbcbc;
}
.ThumbsWrapper div.thumbsDescr {
padding:3px;
text-align:center;
border-top:1px solid #4f4f4f;
color:#D6D4D4;
font-size:10px;
height:30px;
}
Milles merci d'avance pour avoir lu (et peut etre répondu à mon pb) ce post
Baudouin aka b0b0
Modifié par b0b0 (09 Jan 2007 - 20:32)
FF2 l'a automatiquement mise à la taille de l'image contenue dans le TD au lieu de garder la taille que je lui avait fixée, alors que IE7 lui a tout compris ! (pour 1 fois!!!)
)