Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы по вёрстке Боковое меню съезжает за footer, как исправить?

Боковое меню съезжает за footer, как исправить?


     05.04.2015    Общие вопросы по вёрстке    1623

вопрос
Здравствуйте, помогите пожалуйста решить две проблемы;

Боковое меню съезжает за footer, как исправить?

Создал правую и левую колонки на сайте, теперь одна из них в которой больше блоков съезжает за футер.
Как решить эту проблему?

И Вторая:

Сделал горизонтальное меню, но оно почему-то отображается не целиком, при разном разрешении экрана.
а допустим при меньшем разрешении, она вообще съезжает влево и отображается не целиком. Вот код;

Боковое меню съезжает за footer, как исправить?


.con {
    width:auto;
    height: 45px;
}
img {border: none;}
ul#topnav {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;    
    font-size: 1.1em;
    clear: both;
    float: left;
   width:1920px;
background: #000;  repeat-x;
}
ul#topnav li{
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    height:40px;
}
ul#topnav a, ul#topnav span {
    padding: 10px 20px;
    float: left;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    clear: both;
    height: 20px;
    line-height: 20px;
    background: #1d1d1d;
}
ul#topnav a {    color: #7bc441; }
ul#topnav span {
    display: none;
}

ul#topnav.v1 span{  
    background: #000;  repeat-x;
}
ul#topnav.v1 a{
    color: #DF314D;
    background: #000;  repeat-x;
}


Ответил: onneuha


В стиль сайта:

.clr {
      clear: both;
}


Перед началом кода футера вставить:

<div class="clr"></div>

Комментарии пользователей (2)

zip
129 | 7

zip - 5 апреля 2015 18:34 - Юзер

Пробовал не получается, что-то. Вообще съезжает он у меня вправо теперь. вот код;

main.tpl

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{headers}

</head>
<body>
  {AJAX}  
<div class="con">
    <ul id="topnav" class="v1"><div class="dop-block">
   <li><a href="/">ГЛАВНАЯ</a></li>  
              <li><a href="/video/">ВИДЕО</a></li>
              <li><a href="/music/">МУЗЫКА</a></li>
               <li><a href="/picture/">КАРТИНКИ</a></li>
               <li><a href="/text/">ТЕКСТ</a></li>
              <li><a href="/tracker/">ТОРРЕНТ-ТРЕКЕР</a></li>    
              <li><a href="/rules.html">ПРАВИЛА</a></li>    
              <li><a href="/reklama.html">РЕКЛАМА</a></li>    
    </div></ul>
</div>
<div id="quick-search">
            <form method="get" action="/">
                <input type="hidden" name="do" value="search" />
                <input type="hidden" name="subaction" value="search" />
                  <input name="story" id="story" type="text" size="40" placeholder="Поиск..." />
                <button id="q-btn"><i class="fa fa-search-plus"></i></button>
            </form>        
        </div>
    <div id="midside" class="rcol">    
<div class="wrapper">
<!-- Начало :: Шапка-->
<div class="header">
<a class="logo" href="/" title="Logo"></a><div class="headbar">
<!-- Начало :: user-->
{login}
<!-- Конец :: user-->
  </div>
<!-- Баннер -->
<div class="banner">
<img src="{THEME}/images/banner.jpg" /></div>
<!-- Баннер -->    
</div>  
<div class="linex"></div>
<!-- Конец :: Шапка-->  
<!-- Начало :: Главный блок-->
        <div class="sideLeft">
<!-- Начало :: Блок навигации "right"-->
{include file="left.tpl"}
<!-- Конец :: Блок навигации "right"-->
</div>
<div class="container"><div class="content">
<div id="dle-content">
<!-- Начало :: Контент-->  
{info}  
{content}
<!-- Конец :: Контент-->
</div>
</div></div>    
<div class="sideRight">
<!-- Начало :: Блок навигации "right"-->
{include file="right.tpl"}
<!-- Конец :: Блок навигации "right"-->
</div>
<!-- Конец :: Главный блок-->
<!-- Начало :: Подвал-->
        <div class="clr"></div>
<footer>
<div class="footer"> <div class="footer-cp">

           <div class="downf">
<div class="copyright">
                Copyright © 2011-2015 TOWN-YA1.RU. Все права защищены. Дизайн сайта: DMJO (<a href="http://vk.com/dmjo80" target="_blank">А. Бессмертный</a>)<br />
    Молодёжно-патриотический портал: <a href="/reklama.html">Реклама на сайте</a>
            </div>

            <div class="counters">
<a target="_blank" href="http://log.ya1.ru"><img src="http://log.ya1.ru/counter.php?uid=2492&amp;type=4" border="0" alt="" width="88" height="31" /></a>
<a href="http://yaknet.ru" target="_blank"><img src="http://yaknet.ru/image/21429304"/></a>
<!-- Yandex.Metrika informer -->
<noscript><div><img src="//mc.yandex.ru/watch/21429304" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --></div>
</div>
      </div></div>
</footer>  </div>
</div>
</body>
</html>

zip
129 | 7

zip - 5 апреля 2015 18:34 - Юзер

Вот сам CSS

/* Footer
-----------------------------------------------------------------------------*/
footer .footer { background: #F7F6F2; height:100px; width:1920px; top: 10px; }
footer .footer-cp { width:990px; margin:0 auto; position:relative; top:-20px;}
footer .subfooter { height:146px; width:100%; float:left; background:url('../images/subfooter.png') repeat-x; border-radius:2px; }
footer .fblink { position:absolute; bottom:-18px; text-transform:uppercase; right:5px; color:#F90; }
footer .tagscloud { float:left; padding:20px; color:#999; width:410px; height:85px; overflow:hidden; }
footer .tagscloud a { color:#999; }
footer .tagscloud h3 { font-size:11px; font-weight:100; color:#666; text-transform:uppercase; }
footer .downf { width:100%; float:left; position:relative; top:25px; height:35px; }
footer .downf a { color:#F90; }
footer .copyright { background:url('../images/flogo.png') left center no-repeat; padding-left:55px; padding-top:18px; color:#000; float:left; height:35px; }
footer .copyright a { color:#FF0000;}
footer .counters { float:left; padding: 20px;}

.clr {
      clear: both;
}

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы