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

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

вопрос

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

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

И Вторая:

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

.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 комментария

Юзер

141

zip - 2015-05-135 апреля 2015 18:34 - #42969

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

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>

Юзер

141

zip - 2015-05-135 апреля 2015 18:34 - #42970

Вот сам 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;
}

Jigurda | Как в description вставить значение доп. ... ²

Jigurda
Как в description вставить значение доп.поля?
Вчера, 10:54

Немного не то. Нужно не заменить, а добавить к уже имеющемуся description свой текст с доп.полями
lutskboy | Как в description вставить значение доп. ... ²

lutskboy
Как в description вставить значение доп.поля?
18-04-2024, 21:51

https://sandev.pro/web/159-fullstory-metatags-by-sander.html

derebas | Как реализовать кнопку "Поделиться" как ... ¹

derebas
Как реализовать кнопку "Поделиться" как на Плей Маркете?
18-04-2024, 09:39

Ну если на скорую руку то примерно так

<style>
.sociallinks {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.sociallinks-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.social-container {
    display: flex;
    align-items: center;
}
.social-container > div {
    margin-left: 10px;
}

h2, p {
    margin: 5px 0;
}
.social {
  padding-top: 20px;
}
.social img {
  margin: 10px;
}
.sharebtn {
  padding-top: 20px;
  width: 100%;
}
.sharebtn_area {
  border: 1px solid black;
  height: 40px;
}
.sharebtn input[type="text"] {
  width: 70%;
  border: none;
  height: 95%;
}
.sharebtn button {
  width: 25%;
  height: 95%;
  border: none;
  background-color: #fff;
}
</style>
<button id="opensociallinksBtn">Поделиться</button>

<div id="mysociallinks" class="sociallinks">
  <div class="sociallinks-content">
    <span class="close">×</span>
    <div class="social-container">
        <img src="{image-1}" alt="Icon" width="30" height="30">
        <div>
            <h2>{title}</h2> 
            <p>Поделиться</p> 
        </div>
    </div>
    <div class="social">
        <a href="https://api.whatsapp.com/send/?text={full-link}"><img src="whatsapp.png" alt="WhatsApp" width="30" height="30"></a>
        <a href="https://www.facebook.com/sharer/sharer.php?u={full-link}"><img src="facebook.png" alt="Facebook" width="30" height="30"></a>
        <a href="https://twitter.com/intent/post?url={full-link}"><img src="twitter.png" alt="Twitter" width="30" height="30"></a>
        <a href="https://www.instagram.com/share?url={full-link}"><img src="instagram.png" alt="Instagram" width="30" height="30"></a>
    </div>
    <div class="sharebtn">
      <div class="sharebtn_area">
        <input type="text" id="inputText" value="{full-link}" readonly="true">
        <button id="copyBtn">Поделиться <img src="share.png" width="10px" alt="Share Icon"></button>
      </div>
    </div>
  </div>
</div>

<script>
var sociallinks = document.getElementById("mysociallinks");
var opensociallinksBtn = document.getElementById("opensociallinksBtn");
var closeBtn = document.getElementsByClassName("close")[0];
var copyBtn = document.getElementById("copyBtn");
var inputText = document.getElementById("inputText");

opensociallinksBtn.onclick = function() {
  sociallinks.style.display = "block";
}

closeBtn.onclick = function() {
  sociallinks.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == sociallinks) {
    sociallinks.style.display = "none";
  }
}

copyBtn.onclick = function() {
  inputText.select();
  document.execCommand("copy");
}
</script>

doktorpull | GeoIP - показ информации в зависимости о ... ¹

doktorpull
GeoIP - показ информации в зависимости от страны посетителя сайта
17-04-2024, 21:53

Отличный модуль, хорошо работает. Рекомендую этого автора, так как заказывал у него несколько собственных разработок. Человек знает свое дело.
Gordi | Telegram Sender ¹²

Gordi
Telegram Sender
16-04-2024, 15:47

купил. Модуль классный! Автору большая признательность!
TeraMoune | Как вывести тайтл и дискрипшен по маске ... ¹

TeraMoune
Как вывести тайтл и дискрипшен по маске в категориях?
14-04-2024, 00:36

Ну например вот так: https://lazydev.pro/product/12-dle-seo.html
zawibis | Как настроить редирект на внешние сайты? ¹

zawibis
Как настроить редирект на внешние сайты?
13-04-2024, 14:53

Нашёлся ответ.
Нужно в настройках группы отключить параметр

Автоматическая замена ссылок [url] в тег [leech]
При включении данной опции все ссылки, которые пользователь публикует в теге [url], будут автоматически заменены на защищенные ссылки тега [leech]
TeraMoune | Как решить проблему с /xfsearch/значение ... ⁵

TeraMoune
Как решить проблему с /xfsearch/значение?
12-04-2024, 11:53

Это не прикол, просто dle позволяет искать новости как по значению так и с указанием конкретного поля для этого значения. И если у вас стоят метрики на сайте то достаточно любому человеку открыть ссылку и убрать в ней что-то, если сайт при новом url вернёт статус 200 то метрики захотят этот url запомнить.
komosa | Как решить проблему с /xfsearch/значение ... ⁵

komosa
Как решить проблему с /xfsearch/значение?
11-04-2024, 22:34

А вот прикол то в том, что это коснулось только author
lutskboy | Как решить проблему с /xfsearch/значение ... ⁵

lutskboy
Как решить проблему с /xfsearch/значение?
11-04-2024, 22:31

может быть не один только author. и другие поля. как знать куда перенаправлять