Speedbar

[Delit2 0]

Здравствуйте, сразу прошу прощение, я только учусь.

Прошу прощение за то, что возможно не там создал тему.

Помогите решить проблему и как правильно реализовать

Сейчас выглядит так:

Не получается никак разместить ровно вывод конечной категории "Проверка" которая без ссылки...

Помогите, что добавить? Или где подправить?

Буду благодарен.

Это HTML:

<ul id="speedbar-ggood" class="current">{speedbar}</ul>

Это CSS:

#speedbar-ggood {	  

	background: #eee;

	border-width: 1px;

	border-style: solid;

	border-color: #f5f5f5 #e5e5e5 #ccc;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

	border-radius: 5px;

	-moz-box-shadow: 0 0 2px rgba(0,0,0,.2);

	-webkit-box-shadow: 0 0 2px rgba(0,0,0,.2);

	box-shadow: 0 0 2px rgba(0,0,0,.2);

	overflow: hidden;

	width: 100%;

}		

#speedbar-ggood li {

	float: left;

}

#speedbar-ggood a {

	padding: .7em 1em .7em 2em;

	float: left;

	text-decoration: none;

	color: #444;

	position: relative;

	text-shadow: 0 1px 0 rgba(255,255,255,.5);

	background-color: #ddd;

	background-image: -webkit-gradient(linear, left top, right bottom, from(#f5f5f5), to(#ddd));

	background-image: -webkit-linear-gradient(left, #f5f5f5, #ddd);

	background-image: -moz-linear-gradient(left, #f5f5f5, #ddd);

	background-image: -ms-linear-gradient(left, #f5f5f5, #ddd);

	background-image: -o-linear-gradient(left, #f5f5f5, #ddd);

	background-image: linear-gradient(to right, #f5f5f5, #ddd);

}

#speedbar-ggood li:first-child a {

	padding-left: 1em;

	-moz-border-radius: 5px 0 0 5px;

	-webkit-border-radius: 5px 0 0 5px;

	border-radius: 5px 0 0 5px;

}

#speedbar-ggood a:hover {

	background: #fff;

}

#speedbar-ggood a::after, #speedbar-ggood a::before {

	content: "";

	position: absolute;

	top: 50%;

	margin-top: -1.5em;

	border-top: 1.5em solid transparent;

	border-bottom: 1.5em solid transparent;

	border-left: 1em solid;

	right: -1em;

}

#speedbar-ggood a::after {

	z-index: 2;

	border-left-color: #ddd;

}

#speedbar-ggood a::before {

	border-left-color: #ccc;

	right: -1.1em;

	z-index: 1;

}

#speedbar-ggood a:hover::after {

	border-left-color: #fff;

}

#speedbar-ggood .current, #speedbar-ggood .current:hover {

	font-weight: bold;

	background: none;

}

#speedbar-ggood .current::after, #speedbar-ggood .current::before {

	content: normal;

}

Изменено 26 июня 2013 пользователем Delit2

[IgorA100 90]

Или где подправить?

В стилях нужно смотреть.

1. Разбираться в вырезках CSS, что Вы тут привели - дохлый номер, нужно вживую смотреть на сайте.

2. Покажите ссылку на сайт.

3. Скорее всего в

#speedbar-ggood { 

нужно добавить

padding: .7em 1em .7em 2em;


[/code]

[Delit2 0]

IgorA100, спасибо большое за внимание.

К сожалению, ссылки пока нет на сайт, все только в разработке и т.д.

Я сделал, что Вы посоветовали, получилось вот так:

Может еще что посоветуете?

[IgorA100 90]

Может еще что посоветуете?

Не, с гаданием на кофейной гуще я завязал

[Diman777 14]

Вы случайно не из браузера Хром смотрите ? Почему спрашиваю, а потому что когда я меняю масштаб в браузере у меня начинает плыть сайт на Хроме. в чём проблема я пока не знаю

[Delit2 0]

Diman777, через хром работаю, но через другие браузеры все так же...

Это CSS и HTML можно вставить себе сайт (тестовый) и посмотреть в чем проблема.

Кстати, я могу ссылку скинуть (если тут можно) на сайт где взял эти "хлебные крошки", но там все тоже самое, нет ничего другого.

Изначально в HTML выводится вот так:

<ul id="breadcrumbs-one">

  <li><a href="">forum.dle-news.ru</a></li>

  <li><a href="">Скрипты</a></li>

  <li><a href="">Меню и навигация</a></li>

  <li><a href="">Хлебные крошки</a></li>

  <li><a href="" class="current">Хлебные крошки на CSS3</a></li>

</ul>

Вот в общем здесь и взял:

http://pcvector.net/scripts/menu_and_navigation/268-breadcrumbs-na-css.html

[Delit2 0]

Help

[IgorA100 90]

Изначально в HTML выводится вот так:

Я вообще в коде не вижу ID=speedbar-ggood. Мне нужно догадаться каким макаром все обернуто в этот ID и какой там элемент, блочный, строчный..... ?

Но зато вижу ID=breadcrumbs-one, которого нет в CSS. Я уже говорил:

с гаданием на кофейной гуще я завязал

Да и другие думаю тоже.

К сожалению, ссылки пока нет на сайт, все только в разработке и т.д.

И как такое может быть, сайт есть, а ссылки нет? Сделайте ссылку

[Delit2 0]

Изначально в HTML выводится вот так:

Я вообще в коде не вижу ID=speedbar-ggood. Мне нужно догадаться каким макаром все обернуто в этот ID и какой там элемент, блочный, строчный..... ?

Но зато вижу ID=breadcrumbs-one, которого нет в CSS. Я уже говорил:

с гаданием на кофейной гуще я завязал

Да и другие думаю тоже.

К сожалению, ссылки пока нет на сайт, все только в разработке и т.д.

И как такое может быть, сайт есть, а ссылки нет? Сделайте ссылку

Да ID speedbar-ggood - это и есть ID breadcrumbs-one, просто переписан ID.

В прошлом сообщении есть ссылка на сайт где взяты эти коды, под спойлером, может это Вам поможет?

[IgorA100 90]

может это Вам поможет?

Да, я сейчас все бросил и пошел ставить код и тестить его......

ЗЫ: Будет время и интерес - посмотрю, но точно не сегодня и не завтра.....

[Delit2 0]

Жаль

Может кто поможет еще?

[Delit2 0]

Может уважаемый celsoft, что подскажет?

[Delit2 0]

Вот так выглядит в шаблоне speedbar.tpl:

<ul id="speedbar-ggood" class="current">{speedbar}</ul>

А если смотреть через браузер хром, то показывает вот такой код:

<ul id="speedbar-ggood" class="current"><span id="dle-speedbar"><span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://site.ru/" itemprop="url"><span itemprop="title">Главная</span></a></span> »

<span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://site.ru/news/" itemprop="url"><span itemprop="title">Другие новости</span></a></span> »

Проверка</span></ul>

А код CSS в первом сообщении этой темы.

Help

Без правки кода скрипта ничего не получиться, да?

Изменено 5 июля 2013 пользователем Delit2

[Captain 623]

Help

В speedbar в DLE v.10.0 была добавлена микроразметка:

http://dle-news.ru/release/1571-datalife-engine-v100-final-release.html#sel=15:1,15:42

[Delit2 0]

Help

В speedbar в DLE v.10.0 была добавлена микроразметка:

http://dle-news.ru/r...#sel=15:1,15:42

А как это мне поможет решить мою проблему?

[Delit2 0]

Тему можно закрывать. Сам разобрался.

Чтобы не копаться в движке, стрелки убираются через скрипт js, остальное настраивается в CSS.