Перейти к содержанию
FreeManDoc

Как растянуть Footer по ширине сайта?

Рекомендуемые сообщения

Ребят, подскажите как растянуть Footer по ширине сайта? Пока разберался с этим узнал, как сделать кучу других интересующих меня заморочек в коде. Но вот, что-то с этим никак не могу угадать. 

Может нужно еще где-то вносить поправки, я изменял только файл stylesheet, думал что все дело в параметре width, но когда я задаю его на 100% футер убегает набольшое растояние в правл и тянет за собой весь сайт. Как регулироват его высоту разобрался, а вот с шириной пока не ясно ...

 

В дальнейшем планирую задать background-image для растянутого футера. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

адрес сайта дайте.. или хотя бы название шаблона.. мож есть такой..

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 Сам сайт к сожалению я пока не могу дать, ну а шаблон там дефолтный с версии ocstore_v1.5.4.1 . 

 

Могу еще написать дать, то что у меня забито в CSS в footer:

 

 

            clear: both;

            overflow: auto;

            min-height: 100px;

            padding: 20px;

            border-top: 1px solid #DBDEE1;

            border-bottom: 1px solid #DBDEE1;

            background: #F8F8F8;

 

Тут по сути все на своем месте, просто нужно наверно добавить пару каких то параметров для расстяжки по ширине и фиксации, что то типа того...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты


#container {
	width: 980px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;

 

тут измените... футер находится внутри контейнера...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Правельно, если я тут буду менять width к примеру на auto, то весь сайт тоже тянется, а мне нужно, чтобы только сам футер стал по размеру сайта а контейнер остался без изменений. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

может быть в stylesheet  изменить

 

.footer-wrap{
    background:#30363b url(../image/footer-bg.png) 0 0 repeat-x;
    font-size:13px;
    margin-top:-5px;
    }

 

 

footer-bg.png- какая нибудь картинка, она будет растягиваться по ширине экрана , ну и будет широкий футер

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Вам нужно изменить все тплки, и вынести футер из блока #container.

После обернуть его в какую то обертку, которой дать 100% ширины.. и центрировать его.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Видимо оба варианта должны работать, ну я наверно что то не так делаю, не согу сообразить. Если можно то подробнее распишите что и куда вставить. Пока оба (footer и conteiner) стоят по дефолту:

 

 

#container {
width: 980px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

 

 

 

 

#footer {
clear: both;
overflow: auto;
min-height: 100px;
padding: 20px;
width: auto;
border-top: 1px solid #DBDEE1;
border-bottom: 1px solid #DBDEE1;
background: #F8F8F8;
}

 

А выражения .footer-wrap у меня в коде нет, если я его добавляю то ничего не меняется на сайте.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

Подскажите я новичек, как выделить футер из контейнера.

 

удалить тут
</div>
</body></html>
 
добавить тут
</div>
<div id="footer">
 
в стилях 
#footer {
left: auto;
right: auto;
....
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.