Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

Помогите с позиционированием div'ов

#1 MakLeR

MakLeR
  • Пользователь
  • 20 сообщений
  • Репутация: 0
0

Отправлено 03 Январь 2013 - 23:12

В общем делаю сайтик, запоролся в одном месте с позиционированием. Голова уже идет кругом после перебора всевозможных способов.
Проблема в том, что подвал наваливается на контент, и начинаются они одинаково от шапки сайта. Все думаю, что проблема с позиционированием блоков...

Описание классов:
wpapper - общая оболочка страницы
siteHead - блок шапки, внутри два блока siteLogo и navTop
siteLogo - логотип сайта (карта ссылок)
navTop - горизонтальное меню
middle - блок контента (краткий вывод статей + справа сайдбар)
content - краткий вывод статей
pEntry - краткий вывод одной статьи
sideR - сайдбар справа от краткого списка вывода статей
siteFooter - общий блок подвала, в котором два вертикально расположенных блока footerTop и footerBottom

<body>
<div id="wrapper">
<header class="siteHead">
  <div class="siteLogo"></div>
  <nav class="navTop"></nav>
</header>
<section class="middle">
  <section class="content">
   <article class="pEntry"></article>
  </section>
  <aside class="sideR">
  </aside>
</section>
<footer class="siteFooter">
  <section class="footerTop"></section>
  <section class="footerBottom"></section>
</footer>
</div>
</body>

Далее стили:

@charset "utf-8";
@import url(reset.css);
* {
margin: 0;
padding: 0;
}
body {
min-width: 1000px;
}
#wrapper {
width: 980px;
margin: 0 auto;
}
.siteHead {
display: block;
margin-bottom: 7px;
}
.siteLogo {
background: url(../i/header.jpg) no-repeat;
width: 980px;
height: 130px;
position: relative;
margin-bottom: 1px;
}
.navTop {
display: block;
width: 980px;
height: 40px;
border-radius: 5px;
border: none;
position: relative;
}
.middle {
display: block;
}
.content {
display: block;
width: 660px;
float: left;
}
.pEntry {
position: relative;
display: block;
margin: 0 0 10px;
padding: 0 13px 0px;
border: 1px solid #E9E9E9;
border-radius: 5px;
}
.sideR {
display: block;
width: 300px;
float: right;
}
.siteFooter {
width: 980px;
height: 200px;
}

 

 

Сообщение отредактировал MakLeR: 04 Январь 2013 - 01:26

  • 0

#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 04 Январь 2013 - 00:58

Проблема в том, что подвал наваливается на контент, и начинаются они одинаково от шапки сайта. Все думаю, что проблема с позиционированием блоков...

"Наваливается" потому что у вас для непонятных целей установлено абсолютное позиционирование для контента (блока с классом "content").
Вспоминаем из спецификации, что всякая прочая начинка веб-страницы располагается так, как будто абсолютно спозиционированных блоков нет вовсе.
Т.е. чтобы все прочее не наезжало на абсолютно спозиционированные блоки, для этих блоков нужно либо свободное место резервировать, либо располагать в заведомо свободных местах, либо (что правильно для контента заранее неизвестных размеров) не использовать абсолютное позиционирование.
  • 1

#3 MakLeR

MakLeR
    Topic Starter
  • Пользователь
  • 20 сообщений
  • Репутация: 0

Отправлено 04 Январь 2013 - 01:29

yury, абсолютное поз. с блока "content" убрал, но добавил "float: left, блоку с классом "sideR" добавил "float: right". Изменил еще блоки с классами middle и pEntry.
Все равно наезжает. Что не так делаю?
  • 0

#4 MakLeR

MakLeR
    Topic Starter
  • Пользователь
  • 20 сообщений
  • Репутация: 0

Отправлено 04 Январь 2013 - 02:33

Получилось сделать, то что надо, но все равно не так.

Наезд подвала решил так:
блоку "content" установил "float: left"
блоку "sideR" установил "float: right" и "clear: right"
блоку "siteFooter" установил "clear: both"

Блоки "content" и "sideR" находятся внутри блока "middle", но в итоге блок "middle" имеет размеры 980px на 0px, т.е. отображается как пустой.
Как нормально сделать позиционирование, чтобы при отображении в блоке "middle" все-таки присутствовали блоки "content" и "sideR"? Надеюсь понятно выразился :blink:

UPDATE:
Опачки, вроде бы дошло, с блоков сайдбара и подвала убрал "clear", а блоку "middle" добавил "overflow: hidden".
Вроде бы работает, как я хотел! =)

Сообщение отредактировал MakLeR: 04 Январь 2013 - 03:05

  • 0

#5 isvetlichniy

isvetlichniy
  • Пользователь
  • 619 сообщений
  • Репутация: 93

Отправлено 04 Январь 2013 - 12:27

"overflow: hidden


единственно верное решение.
эх не было меня раньше подсказать, за пьянками некогда :blink:

а я еще не решаюсь полностью на html5 переходить из соображений кроссбраузерности
  • 1

#6 MakLeR

MakLeR
    Topic Starter
  • Пользователь
  • 20 сообщений
  • Репутация: 0

Отправлено 04 Январь 2013 - 13:02

isvetlichniy, я думаю, что некоторые возможности html5 и css3 можно уже использовать, сколько же ждать можно :blink:
Хоть и не было тебя, но все равно спасибо за подтверждение правильного выбора :)
  • 0


Оформление форума – IPBSkins.ru