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


Пользователь месяца
OlgaGetman OlgaGetman 1-й за Декабрь
Очков активности: 2100 10 тем, 170 сообщений, 7 баллов репутации
ТОП самых активных за этот месяц
  • Фотография Ixman
    #1

    Ixman (o5cat.ru)
    Очков активности: 172.5 Вне конкурса за определение пользователя месяца

  • Фотография Андрей WPMasterKZ
    #2

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 97.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #3

    BLIK
    Очков активности: 85.5 0 тем, 19 сообщений, 3 балла репутации

  • Фотография OlgaGetman
    #4

    OlgaGetman
    Очков активности: 69 Вне конкурса за определение пользователя месяца

  • Фотография Mandarin
    #5

    Mandarin
    Очков активности: 52.5 0 тем, 35 сообщений, 1 балл репутации

  • Фотография TimurR
    #6

    TimurR
    Очков активности: 49.5 Вне конкурса за определение пользователя месяца

  • Фотография Constantine
    #7

    Constantine
    Очков активности: 48 5 тем, 17 сообщений, 1 балл репутации

  • Фотография magnet
    #8

    magnet (rbfxdirect.com)
    Очков активности: 30 0 тем, 10 сообщений, 2 балла репутации

  • Фотография Алексей111
    #9

    Алексей111 (xvideo24.ru)
    Очков активности: 28.5 2 темы, 13 сообщений, 1 балл репутации

  • Фотография ShowPrint
    #10

    ShowPrint (ShowPrint.ru)
    Очков активности: 27 Вне конкурса за определение пользователя месяца

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 25.12.2018
  • Яндекс выдача: 20.01.2019
Топ 5 участников по репутации


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

#1 MakLeR

MakLeR
  • Неактивные
  • 24 сообщений
  • Репутация: 0
0

Отправлено 03 January 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 January 2013 - 01:26

  • 0

#2 yury

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

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

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

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

#3 MakLeR

MakLeR
    Topic Starter
  • Неактивные
  • 24 сообщений
  • Репутация: 0

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

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

#4 MakLeR

MakLeR
    Topic Starter
  • Неактивные
  • 24 сообщений
  • Репутация: 0

Отправлено 04 January 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 January 2013 - 03:05

  • 0

#5 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

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

"overflow: hidden


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

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

#6 MakLeR

MakLeR
    Topic Starter
  • Неактивные
  • 24 сообщений
  • Репутация: 0

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

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



Похожие темы

  Название темы Автор Статистика Последнее сообщение

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