Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Боковое меню съезжает за footer, как исправить?

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


     05.04.2015    Все вопросы » Общие вопросы по вёрстке    2336

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

Боковое меню съезжает за 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
Юзер

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
Юзер

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;
}

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

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

наверх