X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Помогите с позиционированием div'ов
MakLeRz
MakLeRz
Topic Starter сообщение 4.1.2013, 0:12; Ответить: MakLeRz
Сообщение #1


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

Описание классов:
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 - 4.1.2013, 2:26
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 4.1.2013, 1:58; Ответить: yury_mw
Сообщение #2


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

"Наваливается" потому что у вас для непонятных целей установлено абсолютное позиционирование для контента (блока с классом "content").
Вспоминаем из спецификации, что всякая прочая начинка веб-страницы располагается так, как будто абсолютно спозиционированных блоков нет вовсе.
Т.е. чтобы все прочее не наезжало на абсолютно спозиционированные блоки, для этих блоков нужно либо свободное место резервировать, либо располагать в заведомо свободных местах, либо (что правильно для контента заранее неизвестных размеров) не использовать абсолютное позиционирование.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MakLeRz
MakLeRz
Topic Starter сообщение 4.1.2013, 2:29; Ответить: MakLeRz
Сообщение #3


[member=yury], абсолютное поз. с блока "content" убрал, но добавил "float: left, блоку с классом "sideR" добавил "float: right". Изменил еще блоки с классами middle и pEntry.
Все равно наезжает. Что не так делаю?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MakLeRz
MakLeRz
Topic Starter сообщение 4.1.2013, 3:33; Ответить: MakLeRz
Сообщение #4


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

Наезд подвала решил так:
блоку "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 - 4.1.2013, 4:05
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
isvetlichniy
isvetlichniy
сообщение 4.1.2013, 13:27; Ответить: isvetlichniy
Сообщение #5


"overflow: hidden


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

а я еще не решаюсь полностью на html5 переходить из соображений кроссбраузерности
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MakLeRz
MakLeRz
Topic Starter сообщение 4.1.2013, 14:02; Ответить: MakLeRz
Сообщение #6


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите вспомнить рекламного бота Телеграм для обмена рекламой
0 Mixatraider 692 21.2.2024, 23:42
автор: Mixatraider
Открытая тема (нет новых ответов) Моя div-ная верстка соответствует ли стандартам
Хотелось бы конструктивной критики
10 muratastana 1545 14.1.2023, 1:16
автор: xweb
Открытая тема (нет новых ответов) Помогите рещить проблему с монитором.
Почему низкое разрешение при подключении монитора через displayport?
0 Levels 1695 11.12.2020, 0:48
автор: Levels
Открытая тема (нет новых ответов) Помогите кто нибудь получить партнерку Росбанк!
7 heisenberg_mw 2315 7.8.2020, 9:28
автор: heisenberg_mw
Открытая тема (нет новых ответов) Помогите найти тему пожалуйста
7 virtas 12400 24.7.2020, 17:02
автор: -JamesSmips-


 



RSS Текстовая версия Сейчас: 28.3.2024, 18:57
Дизайн