Бегущая строка

Нужен совет

1
2
Следующая
Показаны 1-15 из 16

#1 9 декабря 2014 в 21:36

Благодаря видео-уроку на сайте сделал виджет, вернее клонировал. Хочу сделать бегущую строку на сайте. Но вот столкнулся с проблемой.
Не могу понять как выводить новости не в столбик а в строчку — одна за другой.

 
<?php if ($items){ ?>
    <div class="widget_ticker">
	<marquee direction="left" onmouseout="start(12)" onmouseover="stop(1)">
        <?php foreach($items as $item) { ?>
 
                    <?php if ($is_show_details) { ?>
                        <div class="details">
                            <span class="-date">
                                <?php html(string_date_age_max($item['date_pub'], true)); ?>
                            </span>
                        </div>
                    <?php } ?>		
 
                    <div class="title">
                        <a href="<?php echo $url; ?>"><?php html($item['title']); ?></a>
                        <?php if ($item['is_private']) { ?>
                            <span class="is_private" title="<?php html(LANG_PRIVACY_PRIVATE); ?>"></span>
                        <?php } ?>
                    </div>
 
                    <?php if ($teaser_field && !empty($item[$teaser_field])) { ?>
                        <div class="teaser"><?php echo $item[$teaser_field]; ?></div>
                    <?php } ?>
 
        <?php } ?>
		</marquee>
    </div>
 <?php } ?>

ну никак не хотят новости выводится одна за другой
вот так получается

а вот стили

 
.widget_ticker {
    height:40px;	
	line-height:40px;
	float:left;
	color:#686868;
	font-size:12px;
}
 
.widget_ticker .details {
	    float:left;
		margin-left: 10px;	
}
.widget_ticker .title {
	    float:left;
		margin-left: 10px;	
}
 
.widget_ticker .teaser {
	    float:left;
		margin-left: 10px;	
}

Я не волшебник, я только…

http://aksucity.net

#2 9 декабря 2014 в 22:00

А как они у вас станут в одну строчку если на одной строке они не умещаются?

Чем меньше знаешь - тем Больше тупой. OneMinima шаблон ICMS2

#3 9 декабря 2014 в 22:07

Вот я и спрашиваю как это сделать. хочется чтоб была бегущая строка )))

http://aksucity.net

Сегодня в 05:32

#4 9 декабря 2014 в 22:19

Вот я и спрашиваю как это сделать. хочется чтоб была бегущая строка )))

SE7EN

а ссылку на сайт можно?

#5 9 декабря 2014 в 22:28

Нельзя!!! Это пока-что на Денвере. Решил полностью сделать свой дизайн ну и понеслось…

http://aksucity.net

#6 9 декабря 2014 в 22:51

SE7EN, для того чтобы у вас была плавающая строка для этого нужен скрипт. Поищите в интернете и внедрите в цмс

Чем меньше знаешь - тем Больше тупой. OneMinima шаблон ICMS2

#7 10 декабря 2014 в 11:39

http://htmlka.com/begushhaya-stroka/

Помог? ткни + в карму

#8 10 декабря 2014 в 17:00

htmlka.com/begushhaya-stroka/
CozaNostra

с этим проблем нет, но всё равно если выбрать в настройках виджета больше чем 1 новость то они показываются не друг за другом а одна под другой, в файле css я уже прописал float:left; но всё равно не помогает.

http://aksucity.net

#9 10 декабря 2014 в 18:23

Укажите фиксированный width в стилях — detail, title, teaser, и/или widget_ticker, display: inline;
На вскидку написал поэтому пробуйте
Да и у marque должна быть ширина задана

#10 10 декабря 2014 в 19:45

SE7EN, приветсвую
html:

<h1 class="marquee"><span>This is a marquee. Text, text, text...</span></h1>

css:

@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    100% {
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100%, 0)
    }
}
 
@-moz-keyframes scroll {
    0% {
        -moz-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    100% {
        -moz-transform: translate(-100%, 0);
        transform: translate(-100%, 0)
    }
}
 
 
@keyframes scroll {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0)
    }
}
 
 
.marquee {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}
 
.marquee span {
    display: inline-block;
    padding-left: 100%;
    -webkit-animation: scroll 5s infinite linear;
    -moz-animation: scroll 5s infinite linear;
    animation: scroll 5s infinite linear;
}

#11 10 декабря 2014 в 20:15

нет не помогло
в таком разе показывается только дата от первой новости и всё

http://aksucity.net

#12 10 декабря 2014 в 20:42

Посмотрите как реализовано у Dezerit (правда для 1 ветки..
глянте тут
или здесь
возможно найдет решение.
да и строки у Вас в коде разделены дивами… структура блочная, а хотите строку…

почему я задаю мало вопросов? потому, что на 90% из них уже кто-то ответил...

#13 10 декабря 2014 в 20:43

хм, из того что выложили в топе, проверил работает. вот вариант положенный в один файл index.php:

Спойлер

 
<html>
<head>
<style>
.widget_ticker {
    height:40px;	
	line-height:40px;
	float:left;
	color:#686868;
	font-size:12px;
}
 
.widget_ticker .details {
	    float:left;
		margin-left: 10px;	
}
.widget_ticker .title {
	    float:left;
		margin-left: 10px;	
}
 
.widget_ticker .teaser {
	    float:left;
		margin-left: 10px;	
}
</style>
</head>
<?php 
	$is_show_details = true;
	$url = '/ссылка';
	$items = array(
	array(
		'date_pab' => '01.01.2015',
		'title' => 'Заголовок новости делаю побольше и еще побольше',
	),
	array(
		'date_pab' => '02.01.2015',
		'title' => 'Заголовок новости делаю побольше и еще побольше',
	),
	array(
		'date_pab' => '03.01.2015',
		'title' => 'Заголовок новости делаю побольше и еще побольше',
	),
  );
?>
<body>
<?php if ($items){ ?>
    <div class="widget_ticker">
	<marquee direction="left" onmouseout="start(12)" onmouseover="stop(1)">
        <?php foreach($items as $item) { ?>
 
                    <?php echo '>>'.$is_show_details; if ($is_show_details) { ?>
                        <div class="details">
                            <span class="-date">
                                <?php echo($item['date_pub']); ?>
                            </span>
                        </div>
                    <?php } ?>		
 
                    <div class="title">
                        <a href="<?php echo $url; ?>"><?php echo($item['title']); ?></a>
                        <?php if ($item['is_private']) { ?>
                            <span class="is_private" title="<?php echo('LANG_PRIVACY_PRIVATE'); ?>"></span>
                        <?php } ?>
                    </div>
 
                    <?php if ($teaser_field && !empty($item[$teaser_field])) { ?>
                        <div class="teaser"><?php echo $item[$teaser_field]; ?></div>
                    <?php } ?>
 
        <?php } ?>
		</marquee>
    </div>
 <?php } ?>
</body>
</html>

#14 10 декабря 2014 в 20:49

хм, из того что выложили в топе, проверил работает.
PIN

так он и не говорил, что не работает… вывод в две строки… дивы уберите и будет в 1 строку…

почему я задаю мало вопросов? потому, что на 90% из них уже кто-то ответил...

#15 10 декабря 2014 в 20:58

дивы уберите и будет в 1 строку..
Soul

убрал, вся красота так сказать пропадает, тоже не есть хорошо

http://aksucity.net

1
2
Следующая
Показаны 1-15 из 16

Не работают сообщения и уведом

Обрезка текста?

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Бегущая строка

Похожие темы

[ЕСТЬ РЕШЕНИЕ] Поля в одной строке

Как удалить строку в icms 2?

[ЕСТЬ РЕШЕНИЕ] Перенос текста в комментариях

Ключи в параграфах

Автосмена блоков на строки

[ЕСТЬ РЕШЕНИЕ] Джава скрипт строка выводит NaN

InstantCMS Team

О проекте

Поддержка

Дополнения