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



 

Здравствуйте, гость ( Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Помогите с абсолютным позиционированием в css
danilchuk88
danilchuk88
Topic Starter сообщение 23.7.2014, 15:02; Ответить: danilchuk88
Сообщение #1


Участник
***

Группа: User
Сообщений: 172
Регистрация: 16.2.2011
Из: Украина, Крым
Поблагодарили: 76 раз
Репутация:   30  


При таком раскладе футер позиционируется относительно хедера, т.е. перекрывает сидбар и контент

HTML
Код
<div id="container">
<div id="header">Текст</div>
<div id="content">Текст</div>
<div id="sidebar">Текст</div>
<div id="footer">Текст</div>
</div>


CSS
Код
#container{position: relative;width:999px;margin:auto;padding:0}
   #sidebar, #content { position: absolute; }
   #header {height: 40px; }

   #sidebar {
    width: 150px;
    top: 82px;
    bottom: 0;
   }
   #content {
   width: 500px;
    top: 82px;
    left: 170px;
    bottom: 0; right: 0;
   }
   #footer {width:999px;height:40px;}


Как сделать чтоб футер позиционировался относительно контента?, т.е. отображался после контента, а не перекрывал его
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AtaELL
AtaELL
сообщение 23.7.2014, 15:45; Ответить: AtaELL
Сообщение #2


Новичок
*

Группа: User
Сообщений: 22
Регистрация: 3.7.2014
Поблагодарили: 12 раз
Репутация:   4  


А использования абсолютного позиционирования обязательное или Вам просто необходимо сделать такую разметку http://prntscr.com/45hxoo ?


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
danilchuk88
danilchuk88
Topic Starter сообщение 23.7.2014, 16:05; Ответить: danilchuk88
Сообщение #3


Участник
***

Группа: User
Сообщений: 172
Регистрация: 16.2.2011
Из: Украина, Крым
Поблагодарили: 76 раз
Репутация:   30  


Абсолютное позиционирование нужно чтоб контент был выше чем меню в коде, а отображался как обычно(меню слева, контент справа)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
andreykashops
andreykashops
сообщение 23.7.2014, 16:09; Ответить: andreykashops
Сообщение #4


WordPress is my Life..
******

Группа: Active User
Сообщений: 1427
Регистрация: 21.7.2012
Из: Украины
Поблагодарили: 633 раза
Репутация:   139  


danilchuk88, нарисуйте схематично, как должно быть по примеру товарища AtaELL, я думаю вам нужно использовать position: relative;


--------------------


Поблагодарили: (2)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
danilchuk88
danilchuk88
Topic Starter сообщение 23.7.2014, 16:28; Ответить: danilchuk88
Сообщение #5


Участник
***

Группа: User
Сообщений: 172
Регистрация: 16.2.2011
Из: Украина, Крым
Поблагодарили: 76 раз
Репутация:   30  


На сайте так:

в коде это так: 1 хедр, 2 меню, 3 контент, 4 футер

По приведенному выше коду я добился того чтоб контент был выше в коде чем меню, т.е: 1 хедр, 2 контент, 3 меню, 4 футер. (отображение блоков на странице не меняется, это только в коде меню ниже контента). Проблема в том что футер позиционируется относительно хедера, и накладывается слоем на блоки "контент и меню". Нужно чтоб футер позиционировался относительно блока "контент"
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
andreykashops
andreykashops
сообщение 23.7.2014, 17:11; Ответить: andreykashops
Сообщение #6


WordPress is my Life..
******

Группа: Active User
Сообщений: 1427
Регистрация: 21.7.2012
Из: Украины
Поблагодарили: 633 раза
Репутация:   139  


Не до конца понял в чем проблема, но вроде вот так все нормально позиционируется:
Код
#container{
position: relative;
width:999px;
margin:auto;
padding:0;
}
#sidebar, #content{

}
#header{
height: 40px;
background: #F00;
}
#sidebar{
width: 150px;
float: left;
background: #00FF4F;
}
#content{
width: 849px;
float: right;
background: #662727;
}
#footer{
width: 999px;
height: 40px;
clear: both;
background: #04FF00;
}


UPD Забыл убрать position: absolute;

Сообщение отредактировал andreykashops - 23.7.2014, 17:12


--------------------


Поблагодарили: (2)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
danilchuk88
danilchuk88
Topic Starter сообщение 23.7.2014, 17:30; Ответить: danilchuk88
Сообщение #7


Участник
***

Группа: User
Сообщений: 172
Регистрация: 16.2.2011
Из: Украина, Крым
Поблагодарили: 76 раз
Репутация:   30  


Цитата(andreykashops @ 23.7.2014, 16:11) *
UPD Забыл убрать position: absolute;

Работает! Спасибо, то что надо)


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sasha_design
sasha_design
сообщение 24.7.2014, 16:32; Ответить: sasha_design
Сообщение #8


Новичок
*

Группа: User
Сообщений: 42
Регистрация: 28.4.2014
Из: Дубовое
Поблагодарили: 2 раза
Репутация:   2  


danilchuk88, Используйте Bootstrap - сам ленился его учить, но потом понял как я тупил) Там такие вещи делаются за 2 минуты)


--------------------
I am devBattles men
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
danilchuk88
danilchuk88
Topic Starter сообщение 25.7.2014, 16:53; Ответить: danilchuk88
Сообщение #9


Участник
***

Группа: User
Сообщений: 172
Регистрация: 16.2.2011
Из: Украина, Крым
Поблагодарили: 76 раз
Репутация:   30  


Цитата(sasha_design @ 24.7.2014, 15:32) *
Используйте Bootstrap

Немного погуглив, так и не понял :huh: , это движок? или его можно прикрутить к любому сайту?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
andreykashops
andreykashops
сообщение 25.7.2014, 19:02; Ответить: andreykashops
Сообщение #10


WordPress is my Life..
******

Группа: Active User
Сообщений: 1427
Регистрация: 21.7.2012
Из: Украины
Поблагодарили: 633 раза
Репутация:   139  


Цитата(danilchuk88 @ 25.7.2014, 14:53) *
о движок?

CSS фреймворк http://bootstrap-3.ru/

Сообщение отредактировал andreykashops - 25.7.2014, 19:02


--------------------


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите выбрать ноутбук
Ноутбук для детей
2 kstnews 112 Сегодня, 17:49
автор: kstnews
Открытая тема (нет новых ответов) Проги для редактирования style.css
14 minutkin 1073 11.12.2017, 16:01
автор: Nell
Открытая тема (нет новых ответов) Помогите выбрать программу
Помогите выбрать программу
11 impak 1354 11.12.2017, 13:11
автор: Mikki
Открытая тема (нет новых ответов) Помогите найти плагин на WP
Отзывы с профилей соц сетей
1 SEOMR 447 30.11.2017, 7:18
автор: Nell
Открытая тема (нет новых ответов) Помогите найти проблему
Долгий ответ сервера
6 maxim1249 702 29.11.2017, 17:27
автор: genjnat


 



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