Footer : aligner horizontalement des images et des liens

quand le simages sont aussi des liens !! j'ai à peu près essayé toutes les combinaisons de vertical-align, ça marche impec avec les images seules mais des que je leur mets un lien :C


en gros je voudrais que mes liens et texte soient en vertical-align:super et que mes images linkées en vertical-align:baseline;


css (qui me semblait bon)

#footer {width : 820px; min-height:32px;clear : both;margin : 0; padding: 28px 0 0 10px; 
background: url(images/footer-background.png) no-repeat;}
#footer a {color: #666;padding: 0;margin: 0;vertical-align :super;}
#footer a:hover {color:#ff8a00; font-style:italic;}
#footer a.image {vertical-align:baseline;}
#footer .style {display:inline;vertical-align :super;}

html

<!-- Begin Footer -->
<div id="footer">
<a href="mailto:postmaster@jeloueunevoiture.fr">Contact</a> <span class="style">::</span>
<a href="index.html">Index</a> <span class="style">::</span>
<a href="http://www.reductionsvoyage.com">Réductions Voyage</a> <span class="style">::</span>
<a href="http://voiture.icipartout.com">Voiture.Icipartout</a> <span class="style">::</span>
<a class="image"><a href="http://jigsaw.w3.org/css-validator/check/referer"<img src="images/valid-css.png" alt="Validation CSS W3C"/></a>
<span class="style">::</span>
<a class="image"><a href="http://validator.w3.org/check?uri=referer"<img src="images/valid-xhtml10.png" alt="Validation XHTML 1.0 W3C"/></a>
<span class="style">::</span>
<span class="style">&copy; JLUV 2K9 // OUSLUGA 2K9</span>
 </div>
<!-- End Footer -->

merci d'avance

bonjour,

ce qui peut aider a effectuer ce genre de reglage est de commencer par specifier un line-height.
Placer tout le monde en middle , et voir quel élément as besoin d'être replacé en valign (versus css).

GC

bonjour GC,

encore une fois un grand merci, j'ai réussi en suivant ta méthode.

css

#footer {width : 820px; height:36px; line-height: 20px; clear : both; padding: 24px 0 0 5px;  
background: url(images/footer-background.png) no-repeat;}
#footer a {color: #666; margin: 0; padding:0; vertical-align:middle; }
#footer img {margin: 0; padding:0; vertical-align: middle;}
#footer a:hover {color:#ff8a00; font-style:italic;}
#footer .style {vertical-align: -15%; letter-spacing:-0.5px;}

html

<div id="footer">
<a href="mailto:postmaster@jeloueunevoiture.fr">Contact</a> <span class="style">::</span>
<a href="index.html">Index</a> <span class="style">::</span>
<a href="http://www.reductionsvoyage.com">Réductions Voyage</a> <span class="style">::</span>
<a href="http://voiture.icipartout.com">Voiture.Icipartout</a> <span class="style">::</span>
<a href="http://jigsaw.w3.org/css-validator/check/referer"<img src="images/valid-css.png" alt="Validation CSS W3C"/></a>
<span class="style">::</span>
<a href="http://validator.w3.org/check?uri=referer"<img src="images/valid-xhtml10.png" alt="Validation XHTML 1.0 W3C"/></a>
<span class="style">:: &copy; JLUV 2K9 // OUSLUGA 2K9</span>
</div>