css - une - positionner texte html




Positionnement CSS-Haut et Droite (2)

Je crée un div qui doit avoir un bouton de fermeture dans le coin supérieur droit, tout comme dans l'image image http://rookery9.aviary.com.s3.amazonaws.com/4655000/4655386_f01b_150x250.jpg

La première image a été faite dans photoshop. J'essaie de faire la même chose mais avec CSS. "Fechar" est le bouton de fermeture (en portugais). Quelle est la meilleure façon de positionner correctement sans solutions de contournement, avec des normes CSS et Web propres?

Voici mon code: http://jsfiddle.net/wZJnd/

C'est aussi loin que je pouvais atteindre.


J'utiliserais le positionnement absolu à l'intérieur d'un #header relativement positionné:

HTML

<div id="header"> 
  <h1>Your Title</h1>
  <a href="" class="close">Close</a>
</div>

CSS

#header {
    width: 700px;
    height: 200px
    position: relative;

    text-align: center;

    background: #000 url(the-logo.png) no-repeat 30px 10px;
}

#header .close {
    position: absolute;
    top: 20px;
    right: 20px;
}

Cela amènera le lien a.close à utiliser le #header comme système de coordonnées et à le positionner à 20 px du bord supérieur et du bord droit.

Dans mon remplissage d'expérience, les marges et le flottant sont plus sensibles à l'incohérence de rendu et aux changements de taille de police que le positionnement. Par conséquent, j'utilise la position autant que possible.


Je travaillerais avec les wrappers div autour de l'img

Donc vous auriez une div pour votre en-tête "div.header" qui contiendrait ces div:

  • div.logo: Le logo sur la gauche contenant un tag img;
  • div.title: Le titre de la page;
  • div.close: Le bouton de fermeture qui contiendrait votre balise img.

Je préfère utiliser le remplissage que l'attribut de marge. Je pense que cela fonctionne mieux à des fins de compatibilité.





layout