<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type='text/javascript' src="http://vaakash.github.io/jquery/easy-ticker.js"></script>
<div class="demo3">
<ul>
<li>what causing the layout to break? Attempting to make a horizontal layout website ?</li>
<li>WordPress Mobify mobile theme, CSS</li>
<li>Gridview with Table.Rows.Count ==0 to show Footer row that include checkbox with imageurl cast</li>
<li>JS/jQuery - animated random name picker</li>
</ul>
</div>
<style>
.demof{
border: 1px solid #ccc;
margin: 25px 0;
}
.demof ul{
padding: 0;
list-style: none;
}
.demof li{
padding: 20px;
border-bottom: 1px dashed #ccc;
}
.demof li.odd{
background: #fafafa;
}
.demof li:after {
content: '';
display: block;
clear: both;
}
.demof img{
float: left;
width: 100px;
margin: 5px 15px 0 0;
}
.demof a{
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #06f;
}
.demof p {
margin: 15px 0 0;
font-size: 14px;
}
.demo3 {
font-family: Arial, sans-serif;
border: 1px solid #C20;
margin: 50px 0;
font-style: italic;
position: relative;
padding: 0 0 0 80px;
box-shadow: 0 2px 5px -3px #000;
border-radius: 3px;
}
.demo3:before {
content: "Latest News";
display: inline-block;
font-style: normal;
background: #C20;
padding: 10px;
color: #FFF;
font-weight: bold;
position: absolute;
top: 0;
left: 0;
}
.demo3:after {
content: '';
display: block;
top: 0;
left: 80px;
background: linear-gradient(#FFF, rgba(255, 255, 255, 0));
height: 20px;
}
.demo3 ul li {
list-style: none;
padding: 10px 0;
}
</style>
<script type='text/javascript'>
$(function(){
$('.demo3').easyTicker({
visible: 1,
interval: 4000,
direction: 'up'
});
});
</script>
Текст прокручивается все нормально, но в LatestNews я все время вижу 4 строки всех строк текста, а не каждый раз каждую строчку по одной строке каждый раз, как на демо-странице:
В демонстрационном примере LatestNews каждый раз прокручивается одна строка.
Что я должен изменить, и почему это так, что есть 4 строки каждый раз, а не один, как на демо-странице?
На вашем конкретном веб-сайте, который вы связали в то время, когда padding
указанное в стиле .demo3
установлено на 0, 0, 0, 80px
.demo3
.
Этого было бы достаточно, как вы можете видеть в этой изолированной демонстрации, используя ваш опубликованный код.
После проверки вашего сайта. Проблема в том, что ваш сайт также импортирует еще один файл CSS:
<link rel="stylesheet" type="text/css" href="/files/main_style.css?1398686941" title="wsite-theme-css">
Этот файл содержит все типы стилей, в том числе несколько с !important
и этот файл, похоже, переписывает или стили CSS.
Если вы откроете свой сайт, откройте отладчик и найдите строку <link...>
и удалите ее (только с консоли), вы увидите, что ваш HTML будет выглядеть нормально. Имейте в виду, остальная часть вашего сайта не будет.
Я не знаю, какое влияние вы оказываете на этот файл, но чтобы компенсировать его, не меняя его, измените свой 115px
от 80px
до 115px
(или того, что когда-либо подходит) в стиле .demo3
, аналогично этому:
.demo 3{
...
padding: 0, 0, 0, 115px // changed from padding: 0, 0, 0, 80px
...
}
Я попробовал выше в консоли на вашем сайте, и, похоже, это трюк.