CSS - Позиционирование - PullRequest
Новая
       13

CSS - Позиционирование

0 голосов
/ 15 июля 2009

а. изображение (960x7) б. div (ширина: 960, отступы: 10)

Я хочу расположить (а) так, чтобы это было 50 пикселей сверху, по центру Я хочу расположить (б) так, чтобы оно находилось непосредственно под (а) без пробелов.

Мой CSS выглядит следующим образом: 

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

Мой HTML следующий: 

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

Я пытаюсь создать белый контейнер с закругленными краями на сером фоне. Как я могу сделать это просто и разумно?

Ответы [ 3 ]

1 голос
/ 15 июля 2009

Проверьте этот вопрос для закругленных краев:

CSS Закругленные углы

А для позиционирования объектов я бы выбрал что-то вроде этого: 

topimage {
   position: absolute;
   top: 50px;
   text-algin: center;
}
0 голосов
/ 15 июля 2009

Если изображение с закругленными углами имеет высоту 30px, установите высоту .pagetop на 30px, добавьте 50px отступов к верху и установите верхнюю часть фонового изображения на 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;}
0 голосов
/ 15 июля 2009

Чтобы поместить элементы без поля между ними, необходимо, чтобы верхнее изображение имело нулевое нижнее поле: 

margin: 50px auto 0;

(Обратите внимание, что вы должны указать единицу измерения (например, px) для любого ненулевого измерения.)

Фоновое изображение не даст верхнему элементу его размер, вы должны указать ширину и высоту, чтобы соответствовать размеру изображения. Если высота меньше обычного символа, вам нужно использовать что-то, чтобы Internet Explorer не расширял элемент до высоты строки символов, например, используя overflow: hidden;, чтобы содержимое не влияло на размер элемента: 

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

Заполнение добавляется к размеру элемента, поэтому вам нужно сделать элемент page на 20 пикселей уже: 

padding: 10px; width: 940px;
...