Position absolue vs float en XHTML/CSS

Question

Je veux convertir un fichier .psd en XHTML et j'ai une barre de menu avec des coins arrondis étirant toute la largeur de l'enveloppe, ce que j'ai fait jusqu'à présent faisait des tranches pour les extrémités de la barre et un pour le centre qui est configuré pour répéter-x.

Par exemple, j'ai ceci:

<div id="tagline" class="grid_16"><!-- begin tagline --> 
      <div class="left"></div> 
      <div class="center"> 
       <h2>Here goes your tagline. Two lines to write a message that best describes your business or your style if you use this theme as a portfolio.</h2> 
      </div> 
      <div class="right"></div> 
</div><!-- end tagline --> 


#tagline {background:url(images/tagline.jpg) repeat-x top; height:96px;} 

#tagline .center {width:930px; float:left;} 
#tagline .left {background:url(images/taglineLeft.jpg) repeat-x top left; width:10px; height:96px; float:left;} 
#tagline .right {background:url(images/taglineRight.jpg) repeat-x top right; width:10px; height:96px; float:right;} 

J'utilise flotteur pour le positionnement des extrémités, et ma question est quelle est la meilleure solution en utilisant float ou position: absolute. Je demande cela parce que je ne veux pas avoir de problèmes avec les anciens navigateurs.

Merci.

Answer 1

Vous pouvez DIVS imbriqué avec background-image, background-repeat et mise en position de fond. Quelque chose comme ceci:

<div id="tagline"> 
    <div  style="background-image: url(images/tagline.jpg);  background-repeat: repeat-x;"> 
    <div style="background-image: url(images/taglineLeft.jpg); background-repeat: no-repeat; background-position: left;"> 
     <div style="background-image: url(images/taglineRight.jpg); background-repeat: no-repeat; background-position: right;"> 
      <h2>Here goes your tagline. Two lines to write a message that best describes your business or your style if you use this theme as a portfolio.</h2> 
     </div> 
    </div> 
    </div> 
</div> 

Aucun flottant de positions absolues n'est nécessaire. J'ai souligné les styles pour plus de clarté. N'oubliez pas de configurer la largeur et la hauteur sur le DIV le plus externe. Cette astuce a été inspirée par this article.

Answer 2

Votre code est généralement correct. float fonctionnera bien, mais vous devez faire flotter tous ces éléments vers la gauche. Ne flottez pas le dernier droit, il ne fait pas ce que vous pensez qu'il fait.

---

Je veux dire:

#tagline .right { ... float:left;}