PHP.SU

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


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

> Без описания
kuller
Отправлено: 21 Октября, 2017 - 13:07:17
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 544
Дата рег-ции: Нояб. 2009  


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




Подскажите почему у меня текст который написан вертикально, не имеет полную заливку фона цвета?

Изменил верстку... на более адекватную наверно... Но вот с фоном так и не могу разобраться. Что не так

CODE (html):
скопировать код в буфер обмена
  1.  
  2. <style>
  3. .slide-container {
  4.         display: flex;
  5.         background-color: #fff;
  6.         min-height: 100px;
  7.         padding: 59px 100px;
  8. }
  9.  
  10. .gray {
  11.         background-color: #EBEBEB;
  12. }
  13.  
  14. .blue {
  15.         background-color: #00AEEF;
  16.         color: #fff;
  17. }
  18.  
  19. .s-name {
  20.         margin-left: 10px;
  21.         width: 58px;
  22.         max-height: 58px;
  23.         line-height: 58px;
  24.         text-align: center;
  25. }
  26.  
  27. .icon {
  28.         position: absolute;
  29.         z-index: 3;
  30.         cursor: pointer;
  31.         width: 58px;
  32.         max-height: 58px;
  33.         transition: all .25s ease;
  34. }
  35.  
  36. .s-content {
  37.         position: relative;
  38.         top: 0;
  39.         width: 100%;
  40.         transform: rotate(90deg);
  41.         white-space: nowrap;
  42.         z-index: -1;
  43.         opacity: 0;
  44.         transition: all 1s ease;
  45. }
  46.  
  47. .icon:hover {
  48.         max-height: 100%;
  49. }
  50.  
  51. .s-name:hover .s-content {
  52.         opacity: 1;
  53.         top: 58px;
  54.         z-index: 2;
  55. }
  56. </style>
  57. <div class="slide-container">
  58.         <div class="s-name">
  59.                 <div class="icon gray">1</div>
  60.                 <div class="s-content gray">Slide 1 contents</div>
  61.         </div>
  62.         <div class="s-name">
  63.                 <div class="icon gray">2</div>
  64.                 <div class="s-content gray">Slide 2 contents</div>
  65.         </div>
  66.         <div class="s-name">
  67.                 <div class="icon gray">3</div>
  68.                 <div class="s-content gray">Slide 3 contents</div>
  69.         </div>
  70.         <div class="s-name">
  71.                 <div class="icon blue">4</div>
  72.                 <div class="s-content blue">Slide 4 contents</div>
  73.         </div>
  74. </div>
  75.  


старый вариант
Спойлер (Отобразить)
результат этого кода на картинке...

Прикреплено изображение (Нажмите для увеличения)
2017-10-21_130546.png

(Отредактировано автором: 21 Октября, 2017 - 15:04:07)

 
 Top
kuller
Отправлено: 21 Октября, 2017 - 18:59:35
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 544
Дата рег-ции: Нояб. 2009  


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




решил проблему. Не знаю только, можно ли как та сделать проще. У меня так получилось

CODE (html):
скопировать код в буфер обмена
  1.  
  2. <style>
  3. .slide-container {
  4.         z-index: 1;
  5.         background-color: #fff;
  6.         max-width: 100%;
  7.         min-height: 100px;
  8.         padding: 1.5em 3.5em 5px;
  9. }
  10.  
  11. .gray {
  12.         background-color: #EBEBEB;
  13. }
  14.  
  15. .blue {
  16.         background-color: #00AEEF;
  17.         color: #fff;
  18. }
  19.  
  20. .s-name {
  21.         margin: 0;
  22.         padding: 0;
  23.         display: inline-block;
  24.         width: 58px;
  25.         height: 58px;
  26.         line-height: 58px;
  27.         text-align: center;
  28.         text-decoration: none;
  29. }
  30.  
  31. .s-name .icon {
  32.         position: relative;
  33.         z-index: 3;
  34.         cursor: pointer;
  35.         max-width: 58px;
  36.         max-height: 58px;
  37. }
  38.  
  39. .s-name .s-content {
  40.         position: relative;
  41.         top: -30px;
  42.         max-height: 0%;
  43.         writing-mode: tb-rl;
  44.         padding: 10px 0;
  45.         line-height: 58px;
  46.         z-index: 1;
  47.         white-space: nowrap;
  48.         opacity: 0;
  49.         transition: all .55s ease;
  50. }
  51.  
  52. span {
  53.         position: relative;
  54.         top: -300px;
  55.         opacity: 0;
  56. }
  57.  
  58. .s-name:hover .s-content {
  59.         top: 0;
  60.         max-height: 200px;
  61.         z-index: 5;
  62.         opacity: 1;
  63. }
  64.  
  65. .s-name:hover .s-content span {
  66.         opacity: 1;
  67.         top: 0;
  68. }
  69. </style>
  70. <div class="slide-container">
  71.                 <a href="#" class="s-name">
  72.                         <div class="icon gray">1</div>
  73.                         <div class="s-content gray"><span>Slide 1 contents 5456</span></div>
  74.                 </a>
  75.                 <a href="#" class="s-name">
  76.                         <div class="icon gray">2</div>
  77.                         <div class="s-content gray"><span>Slide 2 contents</span></div>
  78.                 </a>
  79.                 <a href="#" class="s-name">
  80.                         <div class="icon gray">3</div>
  81.                         <div class="s-content gray"><span>Slide 3 contents</span></div>
  82.                 </a>
  83.                 <a href="#" class="s-name">
  84.                         <div class="icon blue">4</div>
  85.                         <div class="s-content blue"><span>Заказать услугу</span></div>
  86.                 </a>
  87.         </div>
  88.  
 
 Top
Vladimir Kheifets
Отправлено: 22 Октября, 2017 - 14:41:04
Post Id



Частый гость


Покинул форум
Сообщений всего: 162
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


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




kuller пишет:
решил проблему. Не знаю только, можно ли как та сделать проще. У меня так получилось
Спойлер (Отобразить)


Добрый день!
Вы пишите, что так получилось.
Посмотрел в трёх браузерах.(см. ниже скриншоты). Вы уверены в том, что получилось как хотелось?
Извините, нет времени довести, но если Вы замените max-height: 200px на min-height: 200px то в IE по вертикали обрубаться не будет
CODE (html):
скопировать код в буфер обмена
  1. .s-name:hover .s-content {
  2.         top: 0;
  3.         /*max-height: 200px;*/
  4.         min-height: 200px;
  5.         z-index: 5;
  6.         opacity: 1;
  7. }
  8.  


Удачи!
Прикреплено изображение (Нажмите для увеличения)
Untitled-4.png

(Отредактировано автором: 22 Октября, 2017 - 14:48:02)

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


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



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

 
Powered by ExBB FM 1.0 RC1. InvisionExBB