Jump to content
Sign in to follow this  
FreeManDoc

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

Recommended Posts

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

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 Сам сайт к сожалению я пока не могу дать, ну а шаблон там дефолтный с версии 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;

 

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

Share this post


Link to post
Share on other sites


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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

 

 

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Видимо оба варианта должны работать, ну я наверно что то не так делаю, не согу сообразить. Если можно то подробнее распишите что и куда вставить. Пока оба (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 у меня в коде нет, если я его добавляю то ничего не меняется на сайте.

Share this post


Link to post
Share on other sites

 

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

 

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.