Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/20: Рейтинг темы: голосов - 20, средняя оценка - 4.60
bb_oo
15 / 15 / 9
Регистрация: 22.11.2013
Сообщений: 762
1

Двигаются дивы при наведении на один из них

03.01.2014, 17:03. Просмотров 3764. Ответов 8
Метки нет (Все метки)

Всем привет! Столкнулся с проблемкой. В общем у меня выводятся товары... при наведении на один из них (div), то у меня сдвигаются нижние div`ы. Скажите, в чем дело может быть? В css я уже отредактировал все что знал, писал заново div - не помогало( задавал стили заново - не помогало((

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

0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
03.01.2014, 17:03
Ответы с готовыми решениями:

Как сделать несколько блоков, исчезающих одновременно, при наведении хотя бы на один их них
Как сделать несколько блоков, исчезающих одновременно, при наведении хотя бы на...

При наведении на один класс, изменить другой
Всем привет. Столкнулся с проблемой, которую не могу решить. Как при наведении...

Как поменять фон 2х обьектов при наведении на один из ни?
Есть на форме 2 объекта, для них в css прописаны правила .el{ ... }...

При наведении на один из разделов блока 1, в блоке 2 появлялось меню
Доброго дня, я начинающий программист, и щас меня попросили написать сайтик, но...

Как при наведении на один элемент (hover) менять стили другого элемента css?
Есть вертикальный блок навигации, список, в каждом <li> лежит картинка и...

8
fol
500 / 478 / 156
Регистрация: 08.07.2013
Сообщений: 1,700
Записей в блоге: 1
03.01.2014, 18:26 2
нужно увидеть сайт. заочно ничего не сказать
0
bb_oo
15 / 15 / 9
Регистрация: 22.11.2013
Сообщений: 762
03.01.2014, 20:35  [ТС] 3
Вот страница, на которой все это происходит:
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
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>
<div id="content" style="width: 725px; margin-left: 220px; margin-top: -10px;"><?php echo $content_top; ?>
  
  <?php if ($thumb || $description) { ?>
 
  <?php } ?>
  <?php if ($products) { ?>
  
  <div class="product-list">
    <?php foreach ($products as $product) { ?>
    <div class="div-grid">
      <?php if ($product['thumb']) { ?>
      <div><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div><br/>
      <?php } ?>
    <div><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div><br/>
      <?php if ($product['price']) { ?>
      <div>
        <?php if (!$product['special']) { ?>
        <?php echo $product['price']; ?>
        <?php } else { ?>
        <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span><br/>
        <?php } ?>
        <?php if ($product['tax']) { ?>
        <br />
        <?php } ?>
      </div><br/>
      <?php } ?>
    </div>
    <?php } ?>
  </div>
  <div class="pagination"><?php echo $pagination; ?></div>
  <?php } ?>
  <?php if (!$categories && !$products) { ?>
  <div class="content"><?php echo $text_empty; ?></div>
  <div class="buttons">
    <div><a href="<?php echo $continue; ?>" class="button"><?php echo $button_continue; ?></a></div>
  </div>
  <?php } ?>
  <?php echo $content_bottom; ?></div>
<script type="text/javascript"><!--
function display(view) {
    if (view == 'list') {
        $('.product-grid').attr('class', 'product-list');
        
        $('.product-list > div').each(function(index, element) {
            html  = '<div class="right">';
            html += '  <div class="cart">' + $(element).find('.cart').html() + '</div>';
            html += '  <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
            html += '  <div class="compare">' + $(element).find('.compare').html() + '</div>';
            html += '</div>';           
            
            html += '<div class="left">';
            
            var image = $(element).find('.image').html();
            
            if (image != null) { 
                html += '<div class="image">' + image + '</div>';
            }
            
            var price = $(element).find('.price').html();
            
            if (price != null) {
                html += '<div class="price">' + price  + '</div>';
            }
                    
            html += '  <div class="name">' + $(element).find('.name').html() + '</div>';
            html += '  <div class="description">' + $(element).find('.description').html() + '</div>';
            
            var rating = $(element).find('.rating').html();
            
            if (rating != null) {
                html += '<div class="rating">' + rating + '</div>';
            }
                
            html += '</div>';
 
                        
            $(element).html(html);
        });     
        
        $('.display').html('<b><?php echo $text_display; ?></b> <?php echo $text_list; ?> <b>/</b> <a onclick="display(\'grid\');"><?php echo $text_grid; ?></a>');
        
        $.cookie('display', 'list'); 
    } else {
        $('.product-list').attr('class', 'product-grid');
        
        $('.product-grid > div').each(function(index, element) {
            html = '';
            
            var image = $(element).find('.image').html();
            
            if (image != null) {
                html += '<div class="image">' + image + '</div>';
            }
            
            html += '<div class="name">' + $(element).find('.name').html() + '</div>';
            html += '<div class="description">' + $(element).find('.description').html() + '</div>';
            
            var price = $(element).find('.price').html();
            
            if (price != null) {
                html += '<div class="price">' + price  + '</div>';
            }
            
            var rating = $(element).find('.rating').html();
            
            if (rating != null) {
                html += '<div class="rating">' + rating + '</div>';
            }
                        
            html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
            html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
            html += '<div class="compare">' + $(element).find('.compare').html() + '</div>';
            
            $(element).html(html);
        }); 
                    
        $('.display').html('<b><?php echo $text_display; ?></b> <a onclick="display(\'list\');"><?php echo $text_list; ?></a> <b>/</b> <?php echo $text_grid; ?>');
        
        $.cookie('display', 'grid');
    }
}
 
view = $.cookie('display');
 
if (view) {
    display(view);
} else {
    display('grid');
}
//--></script> 
<?php echo $footer; ?>
Добавлено через 38 минут
http://stest1.hol.es/index.php?route=product/category&path=59
0
fanatdebian
Z3JheSBoYXQ=
339 / 234 / 83
Регистрация: 08.07.2012
Сообщений: 577
03.01.2014, 21:17 4
CSS
1
2
.div-grid:hover {
    border: 1px solid #000;
добавь отступы

CSS
1
2
3
4
.div-grid:hover {
    border: 1px solid #000;
        padding: 5px; 
}
Добавлено через 1 минуту
и в
CSS
1
2
3
.div-grid  {
    border: 1px solid #000;
        padding: 5px;
тоже не забудь
0
bb_oo
15 / 15 / 9
Регистрация: 22.11.2013
Сообщений: 762
03.01.2014, 22:32  [ТС] 5
отступы не помогут

Добавлено через 59 минут
еще есть какие соображения?

Добавлено через 23 секунды
fol, поссмотри сайт...
0
fanatdebian
Z3JheSBoYXQ=
339 / 234 / 83
Регистрация: 08.07.2012
Сообщений: 577
04.01.2014, 05:46 6
Все дело в отступах, как я и говорил. Убери margin-top и margin-left.

CSS
1
2
3
4
5
6
7
8
.product-list > div {
float: left;
padding: 10px;
overflow: auto;
width: 190px;
margin-left: 20px; - > убрать
margin-top: 30px; -> убрать
}
0
bb_oo
15 / 15 / 9
Регистрация: 22.11.2013
Сообщений: 762
04.01.2014, 12:05  [ТС] 7
margin тоже не помогли...
0
koza4ok
628 / 437 / 67
Регистрация: 19.09.2012
Сообщений: 1,633
04.01.2014, 12:48 8
Не смотрел код....Но логично использовать position:absolute или резервировать место ,что не есть выгодно.
0
bb_oo
15 / 15 / 9
Регистрация: 22.11.2013
Сообщений: 762
04.01.2014, 16:57  [ТС] 9
вы все не так поняли наверное, уть проблемы в том, что при наведении дивы сдвигаются как-то непонятно, а у меня в ксс задно только рамка при наведении. Вот в этом вся проблема!(

Добавлено через 1 час 28 минут
решил так: прописал прозрачную рамку для div
0
04.01.2014, 16:57
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
04.01.2014, 16:57

Эффект при наведении. При наведении на впереди стоящий элемент, предыдущие элементы меняли цвет border
Необходимо реализовать это по возможности без js. Если есть какие-то варианты...

При наведении не активные пункты меню смещаются, и не применяются изменения фона при наведении
У меня возникла проблема, при наведении не активные пункты меню смещаются, и не...

Два блока двигаются при изменения размера браузера
Верстаю один макет который дали, я сам новичок. Есть два блока, их надо...


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

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

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