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 :: Junior Need Help ))) вопрос использования циклов PHP для CSS

 PHP.SU

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


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

> Без описания
Поиск в теме | Версия для печати
au_23
Отправлено: 27 Октября, 2015 - 14:04:27
Post Id


Новичок


Покинул форум
Сообщений всего: 18
Дата рег-ции: Март 2013  


Помог: 0 раз(а)
Есть слайдер. в стилях получилась такая фигня

куча повторяющихся стилей по количеству слайдов

CODE (text):
скопировать код в буфер обмена
  1. ......
  2. .slide1 { background-image: url(books/book1/m0001.jpg); }
  3. .slide2 { background-image: url(books/book1/m0002.jpg); }
  4. .slide3 { background-image: url(books/book1/m0003.jpg); }
  5. .slide4 { background-image: url(books/book1/m0004.jpg); }
  6. .slide5 { background-image: url(books/book1/m0005.jpg); }
  7. .slide6 { background-image: url(books/book1/m0006.jpg); }.....
  8.  
  9. .....
  10. #slide1:checked ~ .slider > .slide1,
  11. #slide2:checked ~ .slider > .slide2,
  12. #slide3:checked ~ .slider > .slide3,
  13. #slide4:checked ~ .slider > .slide4,
  14. #slide5:checked ~ .slider > .slide5,
  15. #slide6:checked ~ .slider > .slide6,
  16. #slide7:checked ~ .slider > .slide7,
  17. #slide8:checked ~ .slider > .slide8,
  18. #slide9:checked ~ .slider > .slide9,
  19. #slide10:checked ~ .slider > .slide10,.....
  20.  
  21.  
  22. .....
  23. #slide1:checked ~ .controls label:nth-of-type(1),
  24. #slide2:checked ~ .controls label:nth-of-type(2),
  25. #slide3:checked ~ .controls label:nth-of-type(3),
  26. #slide4:checked ~ .controls label:nth-of-type(4),
  27. #slide5:checked ~ .controls label:nth-of-type(5),
  28. #slide6:checked ~ .controls label:nth-of-type(6),
  29. #slide7:checked ~ .controls label:nth-of-type(7),.....
  30.  
  31. куча посторяющихся пунктов в HTML
  32. .....
  33. <input id=slide2 type=radio name=point>
  34. <input id=slide3 type=radio name=point>
  35. <input id=slide4 type=radio name=point>
  36. <input id=slide5 type=radio name=point>
  37. <input id=slide6 type=radio name=point>....
  38.  
  39. ....
  40. <div class="slides slide1 link"><a href="books/book1/0001.jpg"></A></DIV>
  41. <div class="slides slide2 link"><a href="books/book1/0002.jpg"></A></DIV>
  42. <div class="slides slide3 link"><a href="books/book1/0003.jpg"></A></DIV>
  43. <div class="slides slide4 link"><a href="books/book1/0004.jpg"></A></DIV>
  44. <div class="slides slide5 link"><a href="books/book1/0005.jpg"></A></DIV>
  45. <div class="slides slide6 link"><a href="books/book1/0006.jpg"></A></DIV>....
  46.  
  47. .....
  48. <label for=slide1>1</LABEL>
  49. <label for=slide2>2</LABEL>
  50. <label for=slide3>3</LABEL>
  51. <label for=slide4>4</LABEL>....


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

подскажите синтаксис таких циклов, кто может ))))

можно ли обойтись PHP?

(Отредактировано автором: 27 Октября, 2015 - 14:06:22)

 
 Top
Panoptik
Отправлено: 27 Октября, 2015 - 14:11:26
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2493
Дата рег-ции: Нояб. 2011  
Откуда: Одесса, Украина


Помог: 131 раз(а)
добавить один общий класс к элементам и написать для этого класса один стиль.
и не нужно никаких циклов. тем более впутывать PHP в CSS


-----
Just do it
 
 Top
au_23
Отправлено: 27 Октября, 2015 - 14:22:06
Post Id


Новичок


Покинул форум
Сообщений всего: 18
Дата рег-ции: Март 2013  


Помог: 0 раз(а)
Panoptik пишет:
добавить один общий класс к элементам и написать для этого класса один стиль.
и не нужно никаких циклов. тем более впутывать PHP в CSS


а как быть с этим
......
.slide1 { background-image: url(books/book1/m0001.jpg); }
.slide2 { background-image: url(books/book1/m0002.jpg); }
.slide3 { background-image: url(books/book1/m0003.jpg); }
.slide4 { background-image: url(books/book1/m0004.jpg); }
.slide5 { background-image: url(books/book1/m0005.jpg); }
.slide6 { background-image: url(books/book1/m0006.jpg); }.....

и с этим

....
<div class="slides slide1 link"><a href="books/book1/0001.jpg"></A></DIV>
<div class="slides slide2 link"><a href="books/book1/0002.jpg"></A></DIV>
<div class="slides slide3 link"><a href="books/book1/0003.jpg"></A></DIV>
<div class="slides slide4 link"><a href="books/book1/0004.jpg"></A></DIV>
<div class="slides slide5 link"><a href="books/book1/0005.jpg"></A></DIV>
<div class="slides slide6 link"><a href="books/book1/0006.jpg"></A></DIV>....

.....
<label for=slide1>1</LABEL>
<label for=slide2>2</LABEL>
<label for=slide3>3</LABEL>
<label for=slide4>4</LABEL>....
 
 Top
Tyoma5891
Отправлено: 27 Октября, 2015 - 14:39:39
Post Id


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


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


Помог: 5 раз(а)
 
 Top
IllusionMH
Отправлено: 27 Октября, 2015 - 15:00:31
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
au_23, а использовать изображения не позволяют религиозные взгляды?
Если это слайдер изображений - то изображения должны быть изображениями, а не фоном.
Вы пытаетесь засунуть контент в оформление.
 
 Top
au_23
Отправлено: 27 Октября, 2015 - 15:04:57
Post Id


Новичок


Покинул форум
Сообщений всего: 18
Дата рег-ции: Март 2013  


Помог: 0 раз(а)
IllusionMH пишет:
au_23, а использовать изображения не позволяют религиозные взгляды?
Если это слайдер изображений - то изображения должны быть изображениями, а не фоном.
Вы пытаетесь засунуть контент в оформление.


можно наверное и так, суть в том что использоваться этот код будет внутри ASP......


NEEED HELP!!!
 
 Top
SAD
Отправлено: 27 Октября, 2015 - 15:06:23
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2508
Дата рег-ции: Май 2009  
Откуда: Днепропетровск, Украина


Помог: 75 раз(а)
используйте препроцессоры, если Вам так неимется
 
 Top
au_23
Отправлено: 27 Октября, 2015 - 16:38:43
Post Id


Новичок


Покинул форум
Сообщений всего: 18
Дата рег-ции: Март 2013  


Помог: 0 раз(а)
SAD пишет:
используйте препроцессоры, если Вам так неимется


неймется.... ))) а кто такие препроцессоры?
 
 Top
IllusionMH
Отправлено: 27 Октября, 2015 - 17:15:39
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
au_23, чет я не думаю что MS запретили вывод тегов img. Другое дело что нужно правильно генерировать разметку и в src вставлять ссылки на изображения, а там уже фиолотово это JS, PHP, ASP или С++.
И так и не ясно, чего это страница на ASP (я ж правильно понимаю что речь о Active Server Pages?) а стили вдруг будут на php генерироваться?
 
 Top
au_23
Отправлено: 27 Октября, 2015 - 19:16:28
Post Id


Новичок


Покинул форум
Сообщений всего: 18
Дата рег-ции: Март 2013  


Помог: 0 раз(а)
Ну вот что получилось!
конечно еще сырой вариант но буду дорабатывать. Всем спасибо за помощь...
Замечания приветствуются. ( не забывайте что я новичек))))

PHP:
скопировать код в буфер обмена
  1.  
  2. <?PHP
  3. // количество страниц в книге
  4. $str=60;
  5.  
  6. echo "
  7. <style>
  8.                 {
  9.                         margin: 0;
  10.                         padding: 0;
  11.                         -webkit-box-sizing: border-box;
  12.                         -moz-box-sizing: border-box;
  13.                         -o-box-sizing: border-box;
  14.                         box-sizing: border-box;
  15.                 }
  16.  
  17. body    {
  18.        
  19.                 }
  20.  
  21. .wrapper {
  22.                         height: 670px;
  23.                         margin: 40px auto 0;
  24.                         position: relative;
  25.                         width: 500px;
  26.                 }
  27.  
  28. .slider {
  29.                         height: inherit;
  30.                         overflow: hidden;
  31.                         position: relative;
  32.                         width: inherit;
  33.                         -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
  34.                         -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
  35.                         -o-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
  36.                         box-shadow: 0 0 20px rgba(0, 0, 0, .5);
  37.                 }
  38.  
  39. .slides {
  40.                         height: 670px;
  41.                         opacity: 0;
  42.                         position: absolute;
  43.                         width: 500px;
  44.                         z-index: 0;
  45.                         -webkit-transform: scale(1.5);
  46.                         -moz-transform: scale(1.5);
  47.                         -o-transform: scale(1.5);
  48.                         transform: scale(1.5);
  49.                         -webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
  50.                         -moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
  51.                         -o-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
  52.                         transition: transform ease-in-out .5s, opacity ease-in-out .5s;
  53.                 }
  54.                 ";
  55.  
  56. $x=0;
  57. while ($x<$str)
  58. {
  59.         $x++;
  60.         echo ".slide".$x." { background-image: url(book14/m".$x.".jpg); }";
  61.         echo "
  62.                         #slide".$x.":checked ~ .slider > .slide".$x."
  63.                         {
  64.                                 opacity: 1;
  65.                                 z-index: 1;
  66.                                 -webkit-transform: scale(1);
  67.                                 -moz-transform: scale(1);
  68.                                 -o-transform: scale(1);
  69.                                 transform: scale(1);
  70.                         }
  71.                         ";
  72.         echo ".wrapper label:hover,#slide".$x."1:checked ~ .controls label:nth-of-type(".$x."),
  73.                                 {
  74.                                         background: #ddd;
  75.                                 }
  76.                         ";
  77.        
  78. };
  79. echo "
  80.  
  81. .wrapper > input {
  82.         display: none;
  83. }
  84.  
  85. .wrapper .controls {
  86.         left: 43%;
  87.         margin-left: -220px;
  88.         position: absolute;
  89. }
  90.  
  91. .wrapper label {
  92.         cursor: pointer;
  93.         display: inline-block;
  94.         height: 20px;
  95.         margin: 25px 2px 0 2px;
  96.         position: relative;
  97.         width: 20px;
  98.         -webkit-border-radius: 50%;
  99.         -moz-border-radius: 50%;
  100.         -o-border-radius: 50%;
  101.         border-radius: 50%;
  102.         -webkit-transition: background ease-in-out .5s;
  103.         -moz-transition: background ease-in-out .5s;
  104.         -o-transition: background ease-in-out .5s;
  105.         transition: background ease-in-out .5s;
  106. }
  107.  
  108. ";
  109.  
  110. echo "
  111. .wrapper label:after {
  112.         border: 1px solid #ddd;
  113.         content: ' ';
  114.         display: block;
  115.         height: 23px;
  116.         left: -2px;
  117.         position: absolute;
  118.         top: -2px;
  119.         width: 23px;
  120.         -webkit-border-radius: 50%;
  121.         -moz-border-radius: 50%;
  122.         -o-border-radius: 50%;
  123.         border-radius: 50%;
  124. }
  125. .link {
  126.         width: 500px;
  127.         height: 670px;   
  128. }
  129. .link a {
  130.         display: block;
  131.         text-align: center;
  132.         height: 100%;
  133. }
  134. a
  135. {
  136.         text-decoration: none;
  137. }
  138. </style>";
  139.  
  140. // <center><br><b><a href="http://chl.kiev.ua/Default.aspx?id=7221">Книга пам'яті мого роду</A><br></B>
  141.  
  142. echo "<center><br><b><a href='http://chl.kiev.ua/Default.aspx?id=7221'>Книга памяті мого роду</A><br></B>";
  143.  
  144. // конструкция <div class=wrapper><input id=slide1 type=radio CHECKED name=point><input id=slide2 type=radio name=point>
  145.  
  146. echo "<div class=wrapper>";
  147.  
  148. $f=0;
  149. while ($f<$str)
  150. {
  151.         $f++;
  152.         //if ($f = 1) {
  153.                 //$b = 'radio CHECKED name=point>';
  154.         //}
  155.         //else {
  156.                 $b = 'radio name=point>';
  157.         //}
  158.         echo "<input id=slide".$f." type=".$b; 
  159.        
  160. };
  161.  
  162. // конструкция <div class=slider><div class="slides slide1 link"><a href="books/book14/1.jpg"></A></DIV>
  163.  
  164. echo "<div class=slider>";
  165.  
  166. $y=0;
  167. while ($y<$str)
  168. {
  169.         $y++;
  170.         echo "<div class='slides slide".$y." link'><a href='book14/".$y.".jpg'></A></DIV>";
  171. }
  172.  
  173. echo "</div>";
  174.  
  175. // конструкция <div class=controls><label for=slide1>1</LABEL>
  176.  
  177. echo "<div class=controls>";
  178.  
  179. $u=0;
  180. while ($u<$str)
  181. {
  182.         $u++;
  183.         echo "<label for=slide".$u.">".$u."</LABEL>";
  184. }
  185. echo "</div>";
  186. echo "</div></center>";
  187.  
  188. ?>
  189.  
  190.  

(Отредактировано автором: 27 Октября, 2015 - 19:17:54)

 
 Top
au_23
Отправлено: 28 Октября, 2015 - 08:31:30
Post Id


Новичок


Покинул форум
Сообщений всего: 18
Дата рег-ции: Март 2013  


Помог: 0 раз(а)
Единственная проблема тут....

PHP:
скопировать код в буфер обмена
  1.  
  2. $f=0;
  3. while ($f<$str)
  4. {
  5.         $f++;
  6.         if ($f = 1) {
  7.                $b = 'radio CHECKED name=point>';
  8.         }
  9.         else {
  10.                 $b = 'radio name=point>';
  11.         }
  12.         echo "<input id=slide".$f." type=".$b;
  13.        
  14. };
  15.  
 
 Top
armancho7777777 Супермодератор
Отправлено: 28 Октября, 2015 - 08:43:46
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
au_23, тут поищите:
http://govnokod[dot]ru/
 
 Top
DelphinPRO
Отправлено: 28 Октября, 2015 - 10:47:28
Post Id



Активный участник


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


Помог: 353 раз(а)
au_23 пишет:
а как быть с этим
......
.slide1 { background-image: url(books/book1/m0001.jpg); }
.slide2 { background-image: url(books/book1/m0002.jpg); }


Так и быть: вынести вставку картинки в html. Ведь картинка слайда - величина переменная? Им не место в общем файле стилей. В таких случаях нет ничего плохого в добавлении картинки в html через style

CODE (html):
скопировать код в буфер обмена
  1. <div class="slide" style="background-image:url(/books/book1/m0002.jpg)"></div>


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
au_23
Отправлено: 28 Октября, 2015 - 11:24:24
Post Id


Новичок


Покинул форум
Сообщений всего: 18
Дата рег-ции: Март 2013  


Помог: 0 раз(а)
DelphinPRO пишет:
au_23 пишет:
а как быть с этим
......
.slide1 { background-image: url(books/book1/m0001.jpg); }
.slide2 { background-image: url(books/book1/m0002.jpg); }


Так и быть: вынести вставку картинки в html. Ведь картинка слайда - величина переменная? Им не место в общем файле стилей. В таких случаях нет ничего плохого в добавлении картинки в html через style

CODE (html):
скопировать код в буфер обмена
  1. <div class="slide" style="background-image:url(/books/book1/m0002.jpg)"></div>



Спасибо учту ваше предложение...
(Добавление)
au_23 пишет:
Единственная проблема тут....

PHP:
скопировать код в буфер обмена
  1.  
  2. $f=0;
  3. while ($f<$str)
  4. {
  5.         $f++;
  6.         if ($f = 1) {
  7.                $b = 'radio CHECKED name=point>';
  8.         }
  9.         else {
  10.                 $b = 'radio name=point>';
  11.         }
  12.         echo "<input id=slide".$f." type=".$b;
  13.        
  14. };
  15.  


цикл уходит в бесконечность... (
 
 Top
au_23
Отправлено: 28 Октября, 2015 - 16:11:05
Post Id


Новичок


Покинул форум
Сообщений всего: 18
Дата рег-ции: Март 2013  


Помог: 0 раз(а)
вопрос с циклом решил

PHP:
скопировать код в буфер обмена
  1.  
  2. $f=0;
  3. while ($f<$str)
  4. {
  5.         $f++;
  6.         if ($f = 1) {   //  нужно было поставить ==
  7.                $b = 'radio CHECKED name=point>';
  8.         }
  9.         else {
  10.                 $b = 'radio name=point>';
  11.         }
  12.         echo "<input id=slide".$f." type=".$b;
  13.        
  14. };



остался вопрос о правильности вставки css в php.... не подскажете как правильно вставлять
 
 Top
Поиск в теме | Версия для печати
Страниц (2): [1] 2 »
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« Вопросы новичков »


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



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

 
Powered by ExBB FM 1.0 RC1. InvisionExBB