28172 sujets

CSS et mise en forme, CSS3

Bonsoir !

Je deviens chauve sur ce coup là : J'ai un div id="head" dans lequel j'ai à gauche un logo, et à droite une série de liens.

J'ai donc fait le code suivant :


  <div id="head">
    <img id="logo" src="images/logo.jpg" alt="MON LOGO" style="float:left;">
    <span style="float:right;" class="menu"><a href="">CONTACT</a><a href="">PLAN-IT</a></span>
    <div style="clear:both;"></div>
  </div>


Voici l'extrait des CSS concernés par ce bout de code :


#head
{
  height:35px;
  margin-bottom:15px;
}

#head .menu a:link, #head .menu a:visited, #head .menu a:hover
{
  margin-left:20px;
}


Mon problème est que j'aimerai que les liens du menu soient alignés verticalement en bas.

Or, un float sort du flux (=il est retiré du flux normal), donc je peux mettre tout les vertical-align:bottom; du monde dans #head, cela ne fonctionne(ra) pas.

Que puis-je faire pour règler (proprement) ce problème ?

D'avance merci !
re-Bonsoir !

Je me répond à moi-même, profil bas, en me flagellant avec des orties, des ronces tout en écoutant "staracademy".

vertical-align n'est pas fait pour aligner du texte en bas (cf. http://forum.alsacreations.com/topic.php?fid=4&tid=699)

J'ai donc remplacé le <span> contenant le menu par un <p>, et lui ai attribué un line-height de 70px pour que le menu soit enfin affiché en bas du <div> père qui fait 35px de haut.

J'espère avoir trouvé la solution la plus propre !

En espérant que ca servira à d'autres...