Проблемы с позиционированием Div

Question

Сейчас я начинаю делать свою голову, у меня есть div id css, называемый frontwidth, который содержит 1 img 1 заголовок и 1 текст.

, когда я делаю второй или третий frontfront, вместо этого он кладет себя позадиидти внизу и внизу ..

ПОМОЩЬ :-( http://www.e -fluential.com / offline /

Заранее спасибо

Answer 1

Вы поместили все содержимое в абсолют * frontwidth. Абсолютное позиционирование выводит элементы из потока, а все остальные элементы позиционируются так, как если бы их не было.

Лучшим решением было бы не использовать position: absolute (что обычно используется в крайнем случае). Вместо этого поместите изображение влево и оставьте заголовок и текст слева.

Еще несколько советов:

• У многих ваших изображений отсутствуют атрибуты alt.
• Ваш исходный код - большой суп div. «Безбумажный макет» не означает «использовать только div s». Не заворачивайте вещи в div s, черт возьми. Например, нет необходимости оборачивать каждое изображение в div. Вы можете применить стиль непосредственно к изображениям. И используйте значимые элементы, такие как h1, h2 и т. Д. Для заголовков, p для текстовых абзацев, ul и li для списков (меню) и т. Д. div s - это «последнее средство» , тоже. Используйте их, только если другой HTML-элемент не подходит.

Answer 2

Согласно моему комментарию:

Ого, это ... уникальный подход?У вас слишком много position: absolute и position: relative.Я только что исправил это в Firebug, но на написание ответа уйдет несколько минут, количество правил, которые мне пришлось переключить и добавить.

Удалите правило position из каждого из них.элементы:

• #mainbody.
• #frontwidth.
• #titlesbig.
• #greyline.
• #homepageimage.
• #titlesmedium.
• #homepagetext.
• Надеюсь, я ничего не забыл: D

Сза исключением mainbody, вы используете каждый из этих элементов несколько раз.

Итак, вместо этого используйте class.

Например, в вашем HTML измените на:

<div class="frontwidth">

И в вашем CSS измените на:

.frontwidth {

}

Теперь мы можем приступить к разметке этих элементов так, как вы хотите:

• В .homepageimage добавьте float: left.
• В .frontwidth добавьте overflow: hidden (до очистите поплавки ).
• На .titlesmedium и .homepagetext добавить margin-left: 340px.

Answer 3

Большая часть макета разбирается самостоятельно, если вы удалите position: absolute из классов homepageimage, titlemedium и homepagetext.Различные элементы position: relative не вызывают проблем, потому что у них нет ссылок на верхнюю, нижнюю, левую или правую части - по сути, они вообще не меняют компоновку.

Чтобы создать один элементсидеть рядом с другим, вы можете использовать поплавок.Например, плавающее изображение влево, а затем плавающее название влево.Это поместит заголовок рядом с изображением.После этого обязательно используйте команду clear, чтобы снова запустить текучие элементы в нормальном режиме.Кроме того, избавьтесь от всех дополнительных элементов div - вы меняете макет, добавляя множество дополнительных элементов.Для обертывания и стилизации встроенного элемента вместо этого используйте тег <span>.

Answer 4

Проблема заключается в использовании вами позиции: абсолютной и позиции: относительной.

Если вы удалите их из CSS, они больше не будут накладываться друг на друга. попробуйте удалить их, а затем настройте HTML