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



 

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

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


Участник
***

Группа: User
Сообщений: 173
Регистрация: 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
Сообщений: 173
Регистрация: 16.2.2011
Из: Украина, Крым
Поблагодарили: 76 раз
Репутация:   30  


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


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

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


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


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


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


Участник
***

Группа: User
Сообщений: 173
Регистрация: 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
Сообщений: 1434
Регистрация: 21.7.2012
Из: Украины
Поблагодарили: 641 раз
Репутация:   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
Сообщений: 173
Регистрация: 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
Сообщений: 173
Регистрация: 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
Сообщений: 1434
Регистрация: 21.7.2012
Из: Украины
Поблагодарили: 641 раз
Репутация:   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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Помогите, пожалуйста, моей дочери выжить!
благотворительный топик
30 vitvirtual 3734 19.5.2018, 8:30
автор: vitvirtual
Открытая тема (нет новых ответов) Перенесу вашу HTML+CSS верстку на Wordpress
0 blackhead 389 9.5.2018, 14:50
автор: blackhead
Открытая тема (нет новых ответов) Продвигаю страницу по запросу "Как сделать игру". Помогите советом, пожалуйста
Я секу в теме! Но подать статью угодным поисковикам образом не смо
22 coremission 2145 8.5.2018, 12:33
автор: coremission
Открытая тема (нет новых ответов) Есть эксперты HTML + CSS ?
4 _fan_ 613 3.5.2018, 22:32
автор: _fan_
Открытая тема (нет новых ответов) Помогите с выбором ноута
20 rokot 868 23.4.2018, 12:09
автор: Room


 



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