Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Тени в хлебных крошках

 PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
mstdmstd
Отправлено: 19 Июля, 2016 - 14:06:52
Post Id


Частый гость


Покинул форум
Сообщений всего: 170
Дата рег-ции: Авг. 2014  


Помог: 0 раз(а)




Всем привет,
Я использую компонент для создания хлебных крошек :
http://jeluard[dot]github[dot]io/bootstrap-breadcrumb/

и он отображается, но хочется сделать что-то вроде тени снизу пунктов этих крошек. Что-то вроде:
http://dev4[dot]softreactor[dot]com//hos[dot][dot][dot]/standard-hostel
слева вверху
тень отображается, но по ширине всей страницы.
Тень я задал в файле http://dev4[dot]softreactor[dot]com/stat[dot][dot][dot]y[dot]rcrumbs[dot]min[dot]cs s как :

CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. .rcrumbs{
  3.     font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  4.     font-size:14px;
  5.     line-height:18px;
  6.     white-space:nowrap;
  7.     padding-bottom:15px;
  8.     margin-bottom:15px;
  9.     margin-right:45px;
  10.  
  11.     background: #E6E6E6;
  12.    border-radius: 10px;
  13.     box-shadow: 1px 1px 0 rgba(227,218,219,1), 2px 2px 0 rgba(227,218,219,1), 3px 3px 0 rgba(227,218,219,0.9), 4px 4px 0 rgba(227,218,219,0.9), 5px 5px 0 rgba(227,218,219,0.8), 6px 6px 0 rgba(227,218,219,0.8), 7px 7px 0 rgba(227,218,219,0.7), 8px 8px 0 rgba(227,218,219,0.7);
  14.     width: auto;
  15.     ...
  16.  
  17.  
Если установить ширину явно в описании класса - то это срабатывает, но ширина разная в зависимости от заданного элемента...

Элементы крошек заданы как :
CODE (html):
скопировать код в буфер обмена
  1. <div class="row" style="width: auto;">  <!-- Breadcrumbs row start -->
  2.     <div class="rcrumbs" id="div_breadcrumbs">
  3.         <ul style="margin-left: 10px;">
  4.             <li style="list-style: none; float:left;     padding: 2px 4px 2px 4px; cursor: pointer;"><a href="http://dev4.softreactor.com/">Home</a><span class="divider">></span></li>
  5.             <li style="list-style: none; float:left;     padding: 2px 4px 2px 4px; cursor: pointer;"><a href="http://dev4.softreactor.com//hostels/search_hostels_by_state/state/victoria">Vic</a><span class="divider">></span></li>
  6.             <li style="list-style: none; float:left;     padding: 2px 4px 2px 4px; cursor: pointer;"><a href="hostel/victoria/melbourne-region/inner-city/standard-hostel">Standard Hostel long name</a><span class="divider">></span></li>
  7.         </ul>
  8.     </div>
  9.    
  10. </div>              <!-- Breadcrumbs row end -->
  11.  
  12.  
А как правильно?

Спасибо !
 
 Top
arturovich
Отправлено: 19 Июля, 2016 - 20:52:04
Post Id


Новичок


Покинул форум
Сообщений всего: 2
Дата рег-ции: Июль 2016  


Помог: 0 раз(а)




mstdmstd пишет:
Всем привет,
Я использую компонент для создания хлебных крошек :
http://jeluard[dot]github[dot]io/bootstrap-breadcrumb/

и он отображается, но хочется сделать что-то вроде тени снизу пунктов этих крошек. Что-то вроде:
http://dev4[dot]softreactor[dot]com//hos[dot][dot][dot]/standard-hostel
слева вверху
тень отображается, но по ширине всей страницы.
Тень я задал в файле http://dev4[dot]softreactor[dot]com/stat[dot][dot][dot]y[dot]rcrumbs[dot]min[dot]cs s как :

Спасибо !


если я правильно понял, то тени нужно задавать тегу LI
То есть:
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. .rcrumbs ul li{
  3. box-shadow: 1px 1px 0 rgba(227,218,219,1), 2px 2px 0 rgba(227,218,219,1), 3px 3px 0 rgba(227,218,219,0.9), 4px 4px 0 rgba(227,218,219,0.9), 5px 5px 0 rgba(227,218,219,0.8), 6px 6px 0 rgba(227,218,219,0.8), 7px 7px 0 rgba(227,218,219,0.7), 8px 8px 0 rgba(227,218,219,0.7);
  4. }
  5.  

(Отредактировано автором: 19 Июля, 2016 - 20:52:53)

 
 Top
mstdmstd
Отправлено: 20 Июля, 2016 - 07:53:18
Post Id


Частый гость


Покинул форум
Сообщений всего: 170
Дата рег-ции: Авг. 2014  


Помог: 0 раз(а)




Спасибо,
Я изначально хотел сделать одну общюю тень для всех крошек, а по Вашему способу получаются тени для всех крошек.
Но может так и лучше? Посмотрите, пожалуйста, ссылку я обновил...
 
 Top
arturovich
Отправлено: 20 Июля, 2016 - 14:16:59
Post Id


Новичок


Покинул форум
Сообщений всего: 2
Дата рег-ции: Июль 2016  


Помог: 0 раз(а)




mstdmstd пишет:
Спасибо,
Я изначально хотел сделать одну общюю тень для всех крошек, а по Вашему способу получаются тени для всех крошек.
Но может так и лучше? Посмотрите, пожалуйста, ссылку я обновил...


Так по идее и должно быть.
Правда тень такая там, как-то не очень. К тому же с точки "Юзабилити" крошки не совсем удобно расположены.
 
 Top
DarkLan
Отправлено: 20 Июля, 2016 - 17:40:36
Post Id



Новичок


Покинул форум
Сообщений всего: 22
Дата рег-ции: Июль 2016  


Помог: 0 раз(а)







Так будет лучше.

CODE (css):
скопировать код в буфер обмена
  1.  
  2. line: 19 jquery.rcrumbs.min.css:
  3. box-shadow: 3px 0px 2px 0px #999;


CSS очень даже не оптимизирован.

(Отредактировано автором: 20 Июля, 2016 - 17:43:43)

 
 Top
mstdmstd
Отправлено: 21 Июля, 2016 - 07:12:22
Post Id


Частый гость


Покинул форум
Сообщений всего: 170
Дата рег-ции: Авг. 2014  


Помог: 0 раз(а)




Спасибо!
“оптимизация CSS” это
https://habrahabr[dot]ru/post/244815/
http://www[dot]cy-pr[dot]com/tools/css/

?
 
 Top
DarkLan
Отправлено: 25 Июля, 2016 - 16:10:28
Post Id



Новичок


Покинул форум
Сообщений всего: 22
Дата рег-ции: Июль 2016  


Помог: 0 раз(а)




mstdmstd пишет:
Спасибо!
“оптимизация CSS” это
https://habrahabr[dot]ru/post/244815/
http://www[dot]cy-pr[dot]com/tools/css/

?


Простыми словами для того CSS:
1 - убрать ненужные свойства;
2 - объединить всевозможный свойства.

Будет + уставить логическое написание стилевого, использовать группировку и вложения.
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB