Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Не могу разобраться с футером / 16 сообщений из 16, страница 1 из 1
29.05.2014, 13:51
    #38655768
Sanprof
Sanprof
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не могу разобраться с футером
собственно в верстке некоторые моменты не совсем понимаю, есть такой CSS
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
* {
    margin: 0px;
    padding: 0px;
}

html, body {
    height: 100%;
    background-color: #DDE4EA;
}

.container {
    max-width: 1250px;
    margin: 0 auto;
}

.page {
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

.wrap {
    padding-bottom: 77px;
}

.footer {
    height: 77px;
    margin-top: -77px;
    background: url('../images/footer.png') repeat-x;
}



с конструкцией ниже футер отрабатывает как надо

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<body>
<div class="page">
        <div class="wrap">
            Content
        </div>
    </div>
    <div class="footer">
        Footer
    </div>
</body>



теперь мне понадобилось разместить мой контент и футер в средине окна браузера определенной ширины, тоесть по высоте 100% по ширине ограниченно, заключаю всю конструкцию в div, получаю контент посередине, но футер теперь не отрабатывает, почему и как мне решить эту проблему?

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
<body>
    <div class="container">
    <div class="page">
        <div class="wrap">
            Content
        </div>
    </div>
    <div class="footer">
        Footer
    </div>
</div>
</body>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2014, 14:35
    #38655841
Sanjar88
Sanjar88
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не могу разобраться с футером
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<body>
    <div class="wrapper">

        <div class="content">
            Content
        </div><!--конец контента-->
   
  </div><!--конец обёртки-->

   <div class="footer">
        Footer
    </div><!--конец футера-->
</body>


Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
.wrapper{
width:100%;
}
.contant{
max-width: 1250px;
    margin: 0 auto;
}
.footer{
max-width: 1250px;
margin:0 auto;
background: url('../images/footer.png') repeat-x;
}



футер не отрабатывает потому что идёт после контейнера, т.е. не наследует условия контейнера

если мой вариант не подошел попробуйте футер перед контейнером закинуть
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2014, 14:55
    #38655883
Sanprof
Sanprof
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не могу разобраться с футером
Sanjar88футер не отрабатывает потому что идёт после контейнера, т.е. не наследует условия контейнера

если мой вариант не подошел попробуйте футер перед контейнером закинуть
к сожалению не работает ни так ни так.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2014, 14:57
    #38655889
Sanjar88
Sanjar88
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не могу разобраться с футером
а без margin-top? попробуйте что получится
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2014, 15:02
    #38655898
Sanprof
Sanprof
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не могу разобраться с футером
Sanjar88а без margin-top? попробуйте что получится
так футер стал на 77px ниже.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2014, 15:03
    #38655899
Sanjar88
Sanjar88
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не могу разобраться с футером
хм, попробовал накидать у себя ваш макет, у меня всё отображается как надо, и футер и контент по середине окна
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2014, 15:05
    #38655905
Sanprof
Sanprof
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не могу разобраться с футером
Вот мне что типа такого нужно
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2014, 15:05
    #38655906
Sanjar88
Sanjar88
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не могу разобраться с футером
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
      <html> 
    <head>
                
             <link rel="stylesheet" href="css/test.css">
                      
    </head>

 <body>
    <div class="container">
    <div class="page">
        <div class="wrap">
            Content
        </div>
    </div>
    <div class="footer">
        Footer
    </div>
</div>
</body>
</html>



Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
* {
    margin: 0px;
    padding: 0px;
}

html, body {
    height: 100%;
    background-color: #DDE4EA;
}

.container {
    max-width: 1250px;
    margin: 0 auto;
}

.page {
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

.wrap {
    padding-bottom: 77px;
	background-color:#fff;
}

.footer {
    height: 77px;
    margin-top: -77px;
    background-color:#3a3;
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2014, 15:06
    #38655911
Sanjar88
Sanjar88
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не могу разобраться с футером
так я не понял, вам надо чтобы содержимый текст был по центру или самы дивы были по центру?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2014, 15:11
    #38655921
Sanprof
Sanprof
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не могу разобраться с футером
Sanjar88так я не понял, вам надо чтобы содержимый текст был по центру или самы дивы были по центру?
содержимое этих дивов имеет свою структуру со своими выравниваниями, щас задача стоит в том как правильно разместить основные контейнеры.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2014, 15:13
    #38655924
Sanjar88
Sanjar88
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не могу разобраться с футером
не знаю тогда, у меня всё нормально отобразилось как вы и хотели
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2014, 15:13
    #38655926
Sanprof
Sanprof
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не могу разобраться с футером
в данном случае у меня два основных контейнера это CONTENT и FOOTER, на картинке я их просто обозначил, о содержимом этих контейнеров можете не задумываться.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2014, 15:15
    #38655931
Sanprof
Sanprof
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не могу разобраться с футером



на картинках видно, что не отрабатывает
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2014, 15:35
    #38655975
Sanjar88
Sanjar88
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не могу разобраться с футером
может дело в конструкторе он не отображает как надо? вы это всё попробуйте на листе накидать, т.е. уже в готовый сайт сделать
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2014, 16:28
    #38656089
Sanprof
Sanprof
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не могу разобраться с футером
Sanjar88может дело в конструкторе он не отображает как надо? вы это всё попробуйте на листе накидать, т.е. уже в готовый сайт сделать
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Прижатый к низу футер</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        
        html, body {
            height: 100%;
            background-color: #DDE4EA;
        }
        
        .container {
            max-width: 1250px;
            margin: 0 auto;
        }
        
        .page {
            min-height: 100%;
            height: auto !important;
            height: 100%;
        }
        
        .wrap {
            padding-bottom: 77px;
            background-color: #000;
            color: White;
        }
        
        .footer {
            height: 77px;
            margin-top: -77px;
            background-color: #E11;
            color: White;
        }
    </style>
</head>
<body>
    <!--<div class="container">-->
    <div class="page">
        <div class="wrap">
            Content
        </div>
    </div>
    <div class="footer">
        Footer
    </div>
    <!--</div>-->
</body>
</html>



беру этот код и он отображает то, что на верхнем изображении, а если раскомментировать див, то получаю то, что на нижнем изображении.

...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2014, 17:52
    #38656232
Sanprof
Sanprof
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не могу разобраться с футером
вобщем вопрос решен, нужно было в класс container добавить height: 100%; и все заработало как надо
Код: css
1.
2.
3.
4.
5.
.container {
    max-width: 1250px;
    margin: 0 auto;
    height: 100%;
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Не могу разобраться с футером / 16 сообщений из 16, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 496ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1447039]:
 0ms
get settings:
 12ms
get forum list:
 19ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 150ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 48ms
get tp. blocked users:
 1ms
others: 248ms
total:  496ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]