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

Смещение sidebar


     11.05.2014    Общие вопросы по вёрстке    1366

вопрос
При верстке возникла следующая проблема сайтбар смещается в низ.
Пробовал
<div class="clear"></div>
не помогает
Смещение sidebar


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

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


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

Lamber
2

24 | 7

Lamber - 11 мая 2014 12:33 - Юзер

Ну начнем с того, чтобы заработало
<div class="clear"></div>
надо в стилях прописать
.clear{clear:both;}

Arsen
75 | 2

Arsen - 11 мая 2014 12:35 - Юзер

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

Lamber
2

24 | 7

Lamber - 11 мая 2014 12:41 - Юзер

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

Arsen
75 | 2

Arsen - 11 мая 2014 12:55 - Юзер

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

В 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
75 | 2

Arsen - 11 мая 2014 12:55 - Юзер

В 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
75 | 2

Arsen - 11 мая 2014 12:56 - Юзер

В 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
75 | 2

Arsen - 11 мая 2014 12:56 - Юзер

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
2

24 | 7

Lamber - 11 мая 2014 13:03 - Юзер

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

Arsen
75 | 2

Arsen - 11 мая 2014 13:13 - Юзер

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

Lamber
2

24 | 7

Lamber - 11 мая 2014 13:17 - Юзер

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

Arsen
75 | 2

Arsen - 11 мая 2014 13:39 - Юзер

Все спасибо разобрался,,,
Сделал следующим образом:
[not-aviable=main]<section id="content">
         <div class="container">
            <div class="main-content">
         {content}</div></div>[/not-aviable]

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

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