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

dereli · 24 Ağu 2017

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