Bilgi Port - Türkiye'nin Bilgi ve Eğlence Portu

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

dereli

Üye
Üye
Katılım
24 Ağu 2017
Mesajlar
97
Puanları
18
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;
}
 
Benzer Konular

Son Gruplar

Geri
Üst