Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/3: Рейтинг темы: голосов - 3, средняя оценка - 5.00
3 / 3 / 4
Регистрация: 16.02.2014
Сообщений: 132
1

Отредактировать код

29.01.2017, 18:50. Просмотров 510. Ответов 4
Метки css, html, js (Все метки)


Доброго времени суток.

Помогите отредактировать этот код

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class='reviews'>
  <!-- Panel one -->
  <div class='panel'>
    <img src='http://www.designbolts.com/wp-content/uploads/2014/01/Superman-Flat-Design.png'>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
    <h7>Superman</h7>
  </div>
  <!-- Panel Two -->
  <div class='panel'>
    <img src='http://www.designbolts.com/wp-content/uploads/2014/01/Batman-Flat-Design.png'>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
    <h7>Batman</h7>
  </div>
  <!-- Panel Three -->
  <div class='panel'>
    <img src='http://www.designbolts.com/wp-content/uploads/2014/01/Liz-Sherman-Flat-Design.png'>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
    <h7>Liz Sherman</h7>
  </div>
</div>
<script>
  speed = 600
</script>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
body {
  background-color : #eee ;
}
.reviews {
  width : 600px; 
  height : 150px;
  overflow : hidden ;
  background-color : #fff ;
  border-radius : 5px;
  margin : 50px auto ;
  position : relative ;
  box-shadow : 0 0 10px -2px #ddd ;
}
.panel {
  width : 100%;
  max-height: 100%;
  position : absolute ; 
}
.PanelAct {
  left : 0 ;
}
.panel img { 
  width : 100px;
  height : 100px; 
  text-align : center ;
  float : left ; 
  margin : 25px; 
}
/*== Removal Start
png images background
==*/
.panel:nth-of-type(1) img {
    background : #12aedb ;
}
.panel:nth-of-type(2) img {
    background : #db4646 ;
}
.panel:nth-of-type(3) img {
    background : #96c465 ;
}
/*== Removal End==*/
 
.panel p {
  float : left ; 
  width : 420px;
  clear : right ;
  text-align : justify ;
  margin : 25px 0 10px 0;
  font-size : 14px ; 
  color : #aaa ;
  line-height : 1.2em
}
.panel h7 { 
  float : left ; 
  width: 200px; 
  font-size : 14px ; 
  color : #999 ;
  font-weight : bold ;
  font-style : italic ;
}
.control { 
  position : absolute ; 
  bottom : 20px; 
  right : 30px;
}
.control span {
  background-color : rgba(0,0,0,0.1) ; 
  padding : 5px; 
  display : inline-block ;
  vertical-align : top ;
  margin-left : 5px ;
  border-radius : 50%;
  cursor : pointer ;
  transition : 0.3s ease-in
}
.ContActive {
  background-color : #bbb !important ;
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
$(document).ready(function(){
  $(".reviews").each(function(){
    var This = $(this) ;
    var Nums = This.find(".panel").size() ;
    This.find(".panel:first").addClass("PanelAct");
    This.append("<div class='control'></div>") ;
    This.find(".panel").not(".PanelAct")
      .css("left","100%")
    for ( i=0 ; i<Nums ; i++) {
      This.find(".control").append("<span></span>") ;
    }
    This.find(".control span:eq(0)").addClass("ContActive");
    
    This.find(".control span").click(Reviews);
    
    function Reviews(){
      var loc = $(this).index();
      var ActivLoc = This.find(".ContActive").index();
 
      $(this).addClass("ContActive")
        .siblings().removeAttr("class");
      
      if ( loc > ActivLoc ) {
        var Dire = '100%'
        var IDire = '-100%'
      }
      if ( loc < ActivLoc ) {
        var Dire = '-100%'
        var IDire = '100%'
      }
 
      This.find(".panel").not(".PanelAct")
      .css("left",Dire) ;
      This.find(".panel:eq("+loc+")")
      .animate({'left':'0'},speed)
      .addClass("PanelAct")
      .siblings(".PanelAct")
      .removeClass("PanelAct")
      .animate({'left':IDire},speed);
    }
  });
});
https://codepen.io/hoangin/pen/yOZOYJ

Размер данного блока статичный. я бы хотел чтобы она была жидким по ширине и высоте. Потому что в моб. версии блок уходит за пределы. А по высоте потому что при большом тексте, блок остается в своем размере. а контроллер слайдера теряется в тексте.
0
Миниатюры
Отредактировать код  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
29.01.2017, 18:50
Ответы с готовыми решениями:

Как правильно отредактировать код меню
Добрый день! Подскажите пожалуйста как отредактировать текущий код, чтобы меню было многоуровневым...

Как правильно отредактировать?
Здравствуйте форумчане! Я новичок в css, html, php... Прошу у Вас помощи для решения следующей...

Отредактировать стили выпадающего меню
Проблема с фоновым изображением подменю

Как отредактировать шаблон в Osclass?
Добрый всем! Ребят у меня вот такой шаблон Osclass: Как и где мне изменить, что бы вместо...

__________________
Помогаю в написании студенческих работ здесь.
4
20 / 20 / 9
Регистрация: 05.05.2010
Сообщений: 65
29.01.2017, 22:42 2
HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class='panel'>
  <div class="slide-image">
    <img src="https://www.cyberforum.ru/html/html/..." alt="" />
  </div>
  <div class="right-box">
    <blockqoute>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci accusantium exercitationem, commodi atque molestiae!</p>
      <cite>batman</cite>
    </blockqoute>
  </div>
</div>
семантически похоже, что в слайдере лижит цитата, и тега h7 не существует, минимальный h6. slide-image флотаете в лево, right-box флотаете вправо и на panel вешаете clearfix, чтобы родитель не схопывался, ширины задаете в процентах, чтобы они скейлились с изменением ширины родителя, но так как ваш слайд висит на абсолюте, его висота не влияет на высоту родителя .reviews, у которого высота задана жестко, т.е нуно медиазапросами менять высоту .reviews, чтобы контент влазил, но это есть не хорошо, высота должна определяться контентом. з.ы.: на p ниче не вешайте кроме нижнего отступа.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
 
.clearfix:after {
    clear: both;
}
 
.clearfix {
    *zoom: 1;
}
0
3 / 3 / 4
Регистрация: 16.02.2014
Сообщений: 132
30.01.2017, 09:03  [ТС] 3
Патрон, все так же осталось.
0
20 / 20 / 9
Регистрация: 05.05.2010
Сообщений: 65
30.01.2017, 13:01 4
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div class='reviews'>
  <!-- RESPONSIVE PANEl -->
  <div class='panel panel-custom'>
    <div class="slide-image">
      <img src="http://www.designbolts.com/wp-content/uploads/2014/01/Superman-Flat-Design.png" alt="" />
    </div>
    <div class="right-box">
      <blockqoute>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
        <cite>batman</cite>
      </blockqoute>
    </div>
  </div>
 
  <!-- Panel one -->
  <div class='panel'>
    <img src='http://www.designbolts.com/wp-content/uploads/2014/01/Superman-Flat-Design.png'>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
    <h7>Superman</h7>
  </div>
  <!-- Panel Two -->
  <div class='panel'>
    <img src='http://www.designbolts.com/wp-content/uploads/2014/01/Batman-Flat-Design.png'>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
    <h7>Batman</h7>
  </div>
  <!-- Panel Three -->
  <div class='panel'>
    <img src='http://www.designbolts.com/wp-content/uploads/2014/01/Liz-Sherman-Flat-Design.png'>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
    <h7>Liz Sherman</h7>
  </div>
</div>
<script>
  speed = 600
</script>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
*{
  box-sizing: border-box;
}
 
 .reviews {
    width : 100%;
 }
 
@media (min-width: 768px){
  .reviews {
    max-width : 600px;
  }
}
 
.panel-custom{
  padding: 20px;
  overflow: hidden;
}
 
.slide-image{
  font-style: 0;
  float: left;
  width: 100px;
  height: 100px;
}
 
.slide-image img{
  max-width: 100%;
  max-height: 100%;
  width: 100%
}
 
.right-box{
  float: right;
  width: calc(100% - 100px);
  padding: 0 0 0 20px;
}
 
.right-box p{
  margin: 0 0 .3em;
}
 
.right-box cite{
  font-style: normal;
  font-weight: 700;
}
тут закоментил ваш ваш код и добавил уровень вложенности, чтобы не перебивал мой код >
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.reviews {
/*width : 600px;  фиксированная ширина*/
  height : 150px;
  overflow : hidden ;
  background-color : #fff ;
  border-radius : 5px;
  margin : 50px auto ;
  position : relative ;
  box-shadow : 0 0 10px -2px #ddd ;
}
 
.panel > img { 
  width : 100px;
  height : 100px; 
  text-align : center ;
  float : left ; 
  margin : 25px; 
}
.panel > p {
  float : left ; 
  width : 420px;
  clear : right ;
  text-align : justify ;
  margin : 25px 0 10px 0;
  font-size : 14px ; 
  color : #aaa ;
  line-height : 1.2em
}
теперь все норм скейлится, но проблема с высотой осталась, так как ваш слайд висит на абсолюте, можете медиазапросом перебивать высоту .reviews на мобиле, но лучше сделать чтобы высота .reviews зависила от высоты контента слайда.
1
3 / 3 / 4
Регистрация: 16.02.2014
Сообщений: 132
30.01.2017, 18:06  [ТС] 5
Патрон, ладно спасибо, лучше поищу другой код) ах да это мой код
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
30.01.2017, 18:06

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Как отредактировать выпадающее меню
Как отредактировать выпадающее меню? &lt;select id=&quot;title&quot; class=&quot;titleErrorBrd form-control&quot;...

Отредактировать css для резинового сайта
Добрый день, не могу разобраться что и где поменять чтобы сайт стал резиновым, помогите пожалуйста...

Необходимо отредактировать шаблон. CSS/HTML
Доброго, времени суток. Такая проблема - редактировал зарубежный шаблон, наткнулся на проблему...

Как отредактировать выделенную часть css
В прилагаемом скриншоте кода сайта выделен фрагмент который как я понял к css особого отношения не...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.