[Çözüldü] CSS Son Dakika Bandı Sorunum

'HTML - CSS - XML' forumunda dereli tarafından 24 Ağu 2017 tarihinde açılan konu

Bu Sayfayı Paylaş

  1. dereli

    dereli Üye Üye

    Katılım:
    24 Ağu 2017
    Mesaj:
    53
    Alınan Beğeniler:
    10
    Ödül Puanları:
    8
    Merhaba, pek bilgili değilim netten okuduklarımı uyarladıkça, netten bulduğum çalışmalar üzerinde oynadıkça kendimi geliştirmeye çalışıyorum. Şöyle bir sorunum var sitede son dakika bandını değiştirmeye çalışıyorum başarıyla değiştirdim ancak bir türlü in-line olarak geçmesini sağlayamadım.

    arada gözden kaçmış bir <li> </li> sorun yaşatmış, buraya yazınca bir gözden geçirdim. Modlar isterse kaldırabilir...

    HTML kısım:
    HTML:
    <div class="breaking-news">
      <div class="wrapper">
        <strong class="br-title"> SON DAKİKA</strong>
        <div class="br-article-list">
          <div class="br-article-list-inner">
    <div class="br-article">
    <ul>
    <?php
    $tazeicerikkategori = get_cat_ID( get_option('mm_ozelalan_tazeler_kategori') );
    $recent =  new WP_Query(array( 'cat' => $tazeicerikkategori, 'tag' => get_option('mm_ozelalan_tazeler_tags'), 'showposts' => get_option('mm_ozelalan_tazeler_num') )); while($recent->have_posts()) : $recent->the_post(); $haberlinki = get_post_meta(get_the_id(), 'xtoa_link', true); ?>
    <li><i class="po po-portus"></i><a href="<?php if($haberlinki !== '') : echo $haberlinki; else : the_permalink(); endif;  ?>"><?php the_title(); ?></a><span class="tickermav-date"><?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' önce'; ?></span></li>
    <?php endwhile; ?>
    </a></ul></div>
       </div>
        </div>
      </div>
    </div>

    CSS kısmı:
    Kod:
    .breaking-news {
      display: block;
      background-color: #292929;
      color: #c6c6c6;
      width:990px;
      height:40px;
      margin:auto;
      overflow: hidden;
    }
    
    .breaking-news .wrapper {
      position: relative;
    }
    
    .breaking-news .br-title {
      display: block;
      background-color: #292929;
      overflow: hidden;
      width:130 px;
      position: relative;
      font-size: 24px;
      font-weight: 900;
      letter-spacing: -.8px;
      text-transform: uppercase;
      color: #efc220;
      line-height: 46px;
      cursor: default;
    }
    
    .breaking-news .br-navi {
      display: inline-block;
      position: absolute;
      right: 0;
      top: 0;
      height: 46px;
      line-height: 43px;
      cursor: default;
    }
    
    .breaking-news .br-navi a {
      display: inline-block;
      position: relative;
      margin-left: 0;
      line-height: 26px;
      width: 26px;
      text-align: center;
      border-radius: 50%;
      vertical-align: middle;
      background-color: transparent;
      color: #fff;
      font-size: 10px;
    }
    
    .breaking-news .br-navi a:before {
      display: inline-block;
      content: '';
      z-index: 0;
      position: absolute;
      width: 990px;
      height: 100%;
      left: 0;
      top: 0;
      background: #efc220;
      border-radius: 50%;
      opacity: .1;
      filter: alpha(opacity=10);
      transition: all .2s;
      -moz-transition: all .2s;
      -webkit-transition: all .2s;
      -o-transition: all .2s;
    }
    
    .breaking-news .br-navi a:hover:before {
      opacity: 1;
      filter: alpha(opacity=100);
    }
    
    .breaking-news .br-navi a i {
      display: block;
      position: relative;
      z-index: 2;
    }
    
    .breaking-news .br-navi a:hover {
      color: #232323;
    }
    
    .breaking-news .br-article-list {
      display: inline-block;
      position: absolute;
      left: 170px;
      top: 0;
      right: 0;
      line-height: 46px;
      font-size: 12px;
      overflow: hidden;
    }
    
    .breaking-news .br-article-list:after,.breaking-news .br-article-list:before {
      display: block;
      position: absolute;
      z-index: 2;
      top: 0;
      left: 100%;
      width: 990px;
      height: 100%;
      box-shadow: 5px 0 60px 40px #292929;
      content: '';
    }
    
    .breaking-news .br-article-list:before {
      left: auto;
      right: 100%;
    }
    
    .breaking-news .br-article-list a {
      color: #c6c6c6;
      display: inline-block;
      line-height: inherit;
    }
    
    .breaking-news .br-article-list a:not(.post-title-comment) strong {
      display: inline-block;
      border-bottom: 1px solid transparent;
      padding-bottom: 1px;
      line-height: 14px;
      vertical-align: middle;
      transition: all .2s;
      -moz-transition: all .2s;
      -webkit-transition: all .2s;
      -o-transition: all .2s;
    }
    
    .breaking-news .br-article-list a:not(.post-title-comment):hover strong {
      border-color: #ccc;
    }
    
    .breaking-news .br-article-list a strong {
      display: inline-block;
      margin-left: 8px;
      color: #fff;
      font-weight: 900;
    }
    
    .breaking-news .br-article-list a.post-title-comment {
      color: #efc220;
      margin-left: 10px;
      display: inline-block;
      font-weight: 700;
    }
    
    .breaking-news .br-article-list a.post-title-comment i {
      padding-right: 3px;
      width: 19px;
    }
    
    .breaking-news .br-article-list a.post-title-comment:hover {
      color: #fff;
    }
    
    .breaking-news .br-article {
      display: inline-block;
      white-space: nowrap;
      margin-right: 24px;
      position: relative;
    }
    
    }
    
    .breaking-news .br-article .ul {
      display: inline-block;
      white-space: nowrap;
      margin-right: 24px;
      position: relative;
    }
    
    .breaking-news .br-article:before {
      display: block;
      position: absolute;
      content: '\f111';
      font-family: FontAwesome;
      font-size: 4px;
      padding-top: 1px;
      right: -15px;
      color: rgba(255,255,255,.2);
    }
    
    .breaking-news .br-article:last-child:before {
      display: none;
    }
    
    .breaking-news .br-article-list-inner {
      display: block;
      white-space: nowrap;
      position: relative;
    }
    
    body {
      font: 100%/1.5 sans-serif;
      box-sizing: border-box;
    }
    
    .wrapper {
      position: relative;
      width: 990px;
      margin: 0 auto;
      position: relative;
      color: inherit;
    }
     

Bu Sayfayı Paylaş