CSS-Positionierung - Oben und rechts

Question

Ich erstelle ein Div, das eine Schaltfläche zum Schließen in der oberen rechten Ecke haben muss, wie im Bild image http://rookery9.aviary.com.s3.amazonaws.com/4655000/4655386_f01b_150x250.jpg

Das erste Bild wurde in Photoshop erstellt. Ich versuche, dasselbe mit CSS zu machen. "Fechar" ist die Schaltfläche zum Schließen (auf Portugiesisch). Was ist der bessere Weg, um es richtig zu positionieren, ohne Workarounds, mit sauberen CSS und Webstandards?

Hier ist mein Code: http://jsfiddle.net/wZJnd/

Weiter konnte ich nicht vordringen.

Answer 1

Ich würde die absolute Positionierung innerhalb eines relativ positionierten #header verwenden:

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;
}

Dadurch wird die a.close Link, um den #header als Koordinatensystem zu verwenden und ihn 20px vom oberen und rechten Rand zu positionieren.

Meiner Erfahrung nach reagieren Padding, Margins und Float empfindlicher auf Rendering-Inkonsistenzen und Schriftgrößenänderungen als Positionierung. Daher verwende ich position wann immer möglich.

Answer 2

Sie könnten eine :

img.close {
float:right;
margin:25px 25px 0 0;
}

Answer 3

Ich würde mit div Wrappern um das img arbeiten

Sie würden also ein div für Ihre Kopfzeile "div.header" haben, das diese div enthält:

• div.logo : Das Logo auf der linken Seite, das ein img-Tag enthält;
• div.title : Der Titel der Seite;
• div.close : Die Schaltfläche zum Schließen, die Ihr img-Tag enthalten würde.

Ich verwende lieber das Attribut padding als margin. Ich denke, es funktioniert besser für Kompatibilitätszwecke.