смещение текста ниже div - PullRequest
       36

смещение текста ниже div

0 голосов
/ 07 февраля 2011

это должно быть легко исправить - но это не из-за IE7 или, по крайней мере, режима совместимости IE8.

Текст "IAN MARTIN" и "свадебная фотожурналистика" должен быть аккуратно заправлен в divs #lefty, #righty, #left и #right.Вместо этого он вывешивает нижнюю половину этих элементов.

Это легко исправить, если верхняя позиция h1 и h2 будет около -20px, но затем в IE7 - текст выскакивает из верхней части div ...

Что делатьделать?Это не похоже на проблему с Cufon - я отключил ее для проверки ...

Может ли анимация jquery меня испортить?Опять же, я так не думаю, но я не эксперт ...

Вот моя страница: http://ianmartinphotography.com/test-site/index-cufon-02.html

И CSS для h1 и h2:

h1 {position: absolute; letter-spacing: 4px;  color: #79868e; font-family: helvetica;   font-size: 38px;}

h2 {position: absolute; letter-spacing: 4px;  color: #969696; font-family: helvetica; font-size: 38px;}

Спасибо за ваши мысли!

Ответы [ 2 ]

2 голосов
/ 07 февраля 2011

Ваша проблема в том, что вы говорите #left, что он имеет высоту 50px, а затем помещаете в него что-то, что требует 100px (38 + 31 + 31) высоты, в результате содержимое переполняет родительский ящик. Вы должны сделать родителя, #left, достаточно высоким, чтобы полностью вместить его потомка <h2>.

Однако, если вы установите #left на height: 100px, вам придется переставить ссылки "about", "testimonials", ... еще на 50px, и вам придется добавить еще 50px на высоту .field. Вам, вероятно, придется настроить несколько других значений height и top.

Вы также можете переделать HTML и CSS, чтобы вам не нужно было абсолютно все позиционировать. Простое расположение трех <div> друг над другом даст вам одинаковую компоновку, будучи менее хрупким; затем некоторые обертки <div> s и настройки полей для центрирования по горизонтали и смещения от верхней части страницы.

2 голосов
/ 07 февраля 2011

Добавьте следующий CSS к h1 и h2:

margin:7px 0 0 0;

Здесь так хорошо работает.

...