CSS - Positionierung

a. Bild (960x7) b. div (width: 960, padding: 10)CSS - Positionierung

Ich möchte (a) so positionieren, dass es von oben 50px zentriert ist. Ich möchte (b) so positionieren, dass es direkt unter (a) ohne Platz ist.

Mein CSS folgt:

@charset "utf-8"; 
* {margin:0;padding:0;} 
body {background-color:#999;} 
.pagetop {margin:50 auto;background:url(../img/pgtop.gif) top center no-repeat;} 
.page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}

Mein HTML folgt:

<body> 
<div class="pagetop" /> 
<div class="page"> 
<p>Warning <a href="#">sign</a>, warning sign...I see it but I...pay it no mind.</p> 
</div>

Ich versuche, einen weißen Behälter mit abgerundeten Kanten auf einem grauen Hintergrund zu erstellen. Wie kann ich das einfach und intelligent machen?

Quelle

2009-07-15 Anonymous

Schauen Sie sich diese Frage für die abgerundeten Kanten:

CSS Rounded corners

Und für die Positionierung der Objekte, würde ich mit so etwas wie dies gehen:

topimage { 
    position: absolute; 
    top: 50px; 
    text-algin: center; 
}

Quelle

2009-07-15 18:09:02

leichte Tippfehler: 'text-algin' =' text-align'. Vielleicht 'margin: 50px auto 0 auto' wäre besser. – Eric

Um die Elemente zu setzen, ohne ein Rand zwischen ihnen, möchten Sie, dass das obere Bild einen unteren Rand 0 hat:

margin: 50px auto 0;

(Beachten Sie, dass Sie eine Einheit (z. B. px) für eine Messung ungleich Null angeben müssen.)

Das Hintergrundbild gibt nicht das oberste Element, es ist die Größe, Sie müssen die Breite und Höhe angeben die Größe des Bildes. Wenn die Höhe kleiner als ein normales Zeichen ist, müssen Sie etwas verwenden, damit Internet Explorer das Element nicht auf die Höhe einer Zeichenzeile erweitert, z. B. indem overflow: hidden; verwendet wird, um zu verhindern, dass der Inhalt die Größe des Elements beeinflusst:

width: 960px; height: 10px; overflow: hidden;

die Polsterung ist an die Größe des Elements hinzugefügt, so dass Sie das page Element 20 Pixel schmaler machen müssen:

padding: 10px; width: 940px;

Quelle

2009-07-15 18:10:11 Guffa

Vielen Dank dafür. Ich hatte vergessen, die Maßeinheiten anzugeben und konnte nicht herausfinden, warum alles, was ich eingestellt habe, ignoriert wurde. –

Wenn Ihre abgerundete Ecke Bild ist 30px hoch gesetzt .pagetop Höhe 30px , fügen Sie oben 50px Padding hinzu und setzen Sie den oberen Rand des Hintergrundbildes auf 50px.

.pagetop {height:30px;padding-top:50px;margin:0 auto;background:url(../img/pgtop.gif) center 50px no-repeat;} 
.page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}

Quelle

2009-07-15 18:46:00 Emily

CSS - Positionierung

Antwort

Verwandte Themen