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



 

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

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

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


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

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


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


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


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


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


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


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


На сайте так:

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

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


Не до конца понял в чем проблема, но вроде вот так все нормально позиционируется:
Код
#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


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

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


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


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


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


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

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


Цитата(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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите вспомнить рекламного бота Телеграм для обмена рекламой
0 Mixatraider 692 21.2.2024, 23:42
автор: Mixatraider
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3328 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3289 19.12.2023, 18:55
автор: CULA
Открытая тема (нет новых ответов) Веб-разработка (HTML, CSS)
1 ViktoriaFE 6438 5.5.2021, 5:22
автор: bekett
Открытая тема (нет новых ответов) Разработка адаптивных вебсайтов. HTML/CSS/WordPress(сайты-визитки, лендинги, корпоративные сайты, интернет-магазины).
0 kozak199110 1652 3.3.2021, 12:22
автор: kozak199110


 



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