Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Смещение sidebar

Смещение sidebar

Arsen 11.05.2014 Все вопросы » Общие вопросы по вёрстке 2425

вопрос

При верстке возникла следующая проблема сайтбар смещается в низ.
Пробовал

<div class="clear"></div>

не помогает

Прошу вашей помощи.

Ответа пока нет

11 комментариев

Юзер

Lamber - 2014-05-1111 мая 2014 12:33 - #28483

Ну начнем с того, чтобы заработало

<div class="clear"></div>

надо в стилях прописать

.clear{clear:both;}

Юзер

Arsen - 2014-05-1111 мая 2014 12:35 - #28484

Я знаю... Это прописано

Юзер

Lamber - 2014-05-1111 мая 2014 12:41 - #28485

Тогда нужна ссылка на сайт или код

Юзер

Arsen - 2014-05-1111 мая 2014 12:55 - #28487

Сайт на лакалке...
Вот код:

В main.tpl

        <!-- Content -->
        <section id="content">
            <div class="container">
                <!-- Main Content -->
                <div class="main-content">
                    
                    <!-- Popular News -->
                    <div class="column-one-third">
                        ...........
                <!-- /Main Content -->
                
                <!-- Left Sidebar -->
             <div class="column-one-third">
                    <div class="sidebar">
                        <h5 class="line"><span>Оставайтесь На Связи</span></h5>
                        <ul class="social">
                            <li>
                                <a href="#" class="facebook"><i class="icon-facebook"></i></a>
                                <span>6,800 <br/> <i>fans</i></span>
                            </li>
                            <li>
                                <a href="#" class="twitter"><i class="icon-twitter"></i></a>
                                <span>12,475 <br/> <i>followers</i></span>
                            </li>
                            <li>
                                <a href="#" class="rss"><i class="icon-rss"></i></a>
                                <span><i>Подписаться на rss</i></span>
                            </li>
                        </ul>
                    </div>
                    
                    <
                </div>
                </div>
                <!-- /Left Sidebar -->
        </section>
        <!-- / Content -->

Юзер

Arsen - 2014-05-1111 мая 2014 12:55 - #28488

В shortstory.tpl

<!-- Popular News -->
<div class="column-two-third">
<div class="outerwide" >
<ul class="wnews" id="carousel2">
    <li>
        <img src="{image-1}" alt="{title}" width="190" height="103" class="alignleft" />
        <h6 class="regular"><a href="{full-link}" title="{title}">{title}</a></h6>
        <span class="meta">{date=d F, Y}.&nbsp;\\&nbsp;<a href="#">{category}</a>&nbsp;\\&nbsp;[comments]Comments: {comments-num}[/comments][not-comments]No Comments[/not-comments]</span>
        <p>{short-story limit="149"}</p>
    </li>
</ul>
</div>
</div>

Юзер

Arsen - 2014-05-1111 мая 2014 12:56 - #28489

В css

/*------------------------------------------------------------------*/ 
/*    4) SIDEBAR
/*------------------------------------------------------------------*/
.sidebar{
    margin-bottom:30px;
    float:right;
    width:100%;
}
.sidebar h5.line{
    margin-bottom:20px;
}
ul.social{
    list-style-type:none;
    margin:0 0 0 0;
    padding:0;
    float:left;
}
ul.social li{
    width:97px;
    height:140px;
    background:#fafafa;
    margin-right:3px;
    float:left;
    text-align:center;
    margin-bottom:3px;
}
ul.social li:nth-last-child(1){
    margin-right:0;
}
ul.social li a{
    display:block;
    width:98px;
    height:55px;
    background:#316db7;
    padding:15px 0 0 0;
}
ul.social li a.facebook{ background:#316db7; }
ul.social li a.twitter{ background:#17a8dd; }
ul.social li a.rss{ background:#ff9204; }
ul.social li a i{
    font-size:26px;
    color:#FFF;
}
ul.social li a:hover{
    opacity:0.8;
}
ul.social li span{
    margin-top:17px;
    float:left;
    text-align:center;
    width:100%;
    color:#696969;
    padding:0 5px;
    font-weight:bold;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
ul.social li span i{
    font-weight:normal;
}
ul.ads125{
    list-style-type:none;
    margin:0;
    padding:0;
}
ul.ads125 li{
    float:left;
}

Юзер

Arsen - 2014-05-1111 мая 2014 12:56 - #28490

ul.ads125 li a{
    padding:10px;
    margin:0 5px 5px 0;
    background:#fafafa;
    float:left;
    display:block;
}
ul.ads125 li a img{
    width:125px;
    height:125px;
    float:left;    
}

.ui-tabs .ui-tabs-nav li{
    text-transform:uppercase;
    font-family: 'Merriweather Sans', Arial, Helvetica, sans-serif;
    font-size:13px;
    font-weight:bold;
}
.ui-tabs-panel a.title{
    color:#696969;
}
.ui-tabs-panel ul{
    list-style-type:none;
    margin:0;
    padding:0;
}
.ui-tabs-panel ul li{
    border-bottom:1px solid #dbdbdb;
    float:left;
    width:100%;
    padding:0 0 10px 0;
    margin:0 0 15px 0;
}
.ui-tabs-panel ul li:nth-last-child(1){
    border-bottom:none;
}

/*  :: TWITTER ::  */
ul.tweetList{
    float:left;
    margin:0;
    padding:0;
    list-style-type:none;
}
.jtwt_picture{display:none;}

ul.tweetList li{
    margin:0 0 15px 0;
    background:url(../img/twitterfeed.png) no-repeat left top;
    padding:0 0 0 35px;
}
ul.tweetList li p{
    margin:0;
}
ul.tweetList li p a{
    text-decoration:none;
}
ul.tweetList li p a:hover{
    text-decoration:underline;
}
p.timestamp{
    font-size:10px;
    color:#CCC;
}
/*  :: FLICKR ::  */
.flickrfeed{
    width:100%;
    float:left;
    margin:0;
    display:block;
}
ul li.hide{
    display:none;
}
.thumbs { 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
}
.thumbs li { 
    list-style: none; 
    float: left; 
    margin: 4px; 
    padding:2px; 
    background: #999; 
    -webkit-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out;
       -moz-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out;
        -ms-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out;
         -o-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out;
            transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out;
}
.thumbs li:hover { background:#333;}
.thumbs li img {
    display:block; 
    width:60px; 
    height:60px;
}

Юзер

Lamber - 2014-05-1111 мая 2014 13:03 - #28491

Вот это последнее не надо, поменяй его на стили контента (левого блока)

Юзер

Arsen - 2014-05-1111 мая 2014 13:13 - #28493

Lamber,
Немножко не понял???

Юзер

Lamber - 2014-05-1111 мая 2014 13:17 - #28494

Еще нужны стили вот этих элементов:
#content
.container
.main-content
.column-one-third

Юзер

Arsen - 2014-05-1111 мая 2014 13:39 - #28495

Все спасибо разобрался,,,
Сделал следующим образом:

[not-aviable=main]<section id="content">
         <div class="container">
            <div class="main-content">
         {content}</div></div>[/not-aviable]

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

Последние события

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. и другие поля. как знать куда перенаправлять

наверх