Помощник
 |
|
|
|
|
Сообщение сайта
|
 Css: как сделать увеличивающийся блок? |
prolisk
|
Сообщение
#1
|
||
 Топовый постер  
 Группа: Active User Сообщений: 6107 Регистрация: 24.8.2010 Из: Sava Поблагодарили: 39 раз Репутация:  6 
 |
|
||
 |
|
||
k0ttee
|
 20.8.2015, 8:54;
Ответить: k0ttee
Сообщение
#2
|
 Топовый постер
 Группа: User Сообщений: 12040 Регистрация: 2.5.2014 Поблагодарили: 0 раз Репутация: 0
|
блок или скачет или двигает боковой Да потому что блин border не в счет размеров элемента, а плюс к размерам элемента. Вот блок и "скачет" на появлении/скрытии бордера. :rjunimagu: Может box-sizing? Собственно... box-sizing: border-box; Размеры элементов будут с учетом полей и границ. То есть: height = height + border + padding (и то же самое для width). Возможно и падинги придется подправить, зато прыгать с появлением рамки не будет - размер блока успокоится. :D Дока: 
Снимок экрана 2015-08-19 в 22.06.08.png ( 11,1 килобайт )
Кол-во скачиваний: 1146Добавлено спустя 22 минуты 18 секунд: По первой ссылке сделано "через абсолютное позиционирование и слои", а сами блоки добавляются через :before
Снимок экрана 2015-08-19 в 22.28.35.png ( 3,7 килобайт )
Кол-во скачиваний: 1146По второй сейчас посмотрю... Может чего поинтересней увижу... Добавлено спустя 9 часов 24 минуты 14 секунд: кто поможет с кодом? Проблема была в том, что надо было выспаться... И не смотреть в говнокод магазинов (от него только кошмары приснятся). Как говорил конструктор танка Т34: "Сложно и дурак сможет, надо сделать просто".
none.png ( 19,2 килобайт )
Кол-во скачиваний: 1142
1.png ( 20,74 килобайт )
Кол-во скачиваний: 1142
6.png ( 20,88 килобайт )
Кол-во скачиваний: 1142
9.png ( 20,91 килобайт )
Кол-во скачиваний: 1142
14.png ( 20,9 килобайт )
Кол-во скачиваний: 1142
18.png ( 20,88 килобайт )
Кол-во скачиваний: 1142Никаких z-index, никаких absolute, просто отрицательный margin. :goodpost: Собственно hover задает отрицательный margin выделенному блоку, что позволяет его увеличить не влияя на соседние. <!DOCTYPE html>
<html> <head> <title>test</title> <style type="text/css"> body{ background: #000; } #list{ margin: 50px auto; width: 720px; height: 660px; background: #999; } .i{ background: #060; float: left; height: 200px; width: 100px; margin: 10px; } .i:hover{ background: yellow; margin: 10px -20px -20px -20px; width: 160px; height: 230px; opacity: .6; } </style> </head> <body> <div id='list'> <div class='i'>1</div> <div class='i'>2</div> <div class='i'>3</div> <div class='i'>4</div> <div class='i'>5</div> <div class='i'>6</div> <div class='i'>7</div> <div class='i'>8</div> <div class='i'>9</div> <div class='i'>10</div> <div class='i'>11</div> <div class='i'>12</div> <div class='i'>13</div> <div class='i'>14</div> <div class='i'>15</div> <div class='i'>16</div> <div class='i'>17</div> <div class='i'>18</div> </div> </body> </html> -------------------- |
|
|
|
|
prolisk
|
Сообщение
#3
|
|
|
Топовый постер
Группа: Active User Сообщений: 6107 Регистрация: 24.8.2010 Из: Sava Поблагодарили: 39 раз Репутация: 6
|
Я знал кто мне поможет.
Спасибо за наводку. Сделал вото так. background: #FFFF34; margin: -3% -3% -1.5% -3%; width: 36%; height: 360px; padding-top: 3%; opacity: .6;
gsgs.png ( 236,85 килобайт )
Кол-во скачиваний: 1129
-------------------- |
|
|
|
|
|
|
|
Похожие темы
| Тема | Ответов | Автор | Просмотров | Последний ответ | |
|---|---|---|---|---|---|
 |
Как вы отдыхаете от работы за компом | 151 | adw-kupon.ru | 19788 | Сегодня, 13:52 автор: Vmir |
 |
Как вы бросили работу и перешли на заработок с сайтов? | 20 | uahomka | 3415 | Сегодня, 11:54 автор: Skyworker |
|
Как в пушсетках покупают по 100-200 тысяч кликов за день? | 1 | Boymaster | 492 | Сегодня, 11:45 автор: Skyworker |
|
Как вывести деньги в Украине с заблокированного Юмани ? | 30 | freeax | 4995 | 20.4.2024, 16:49 автор: Liudmila |
|
Арбитражники, как ведете учет расходов и доходов? | 13 | Boymaster | 2017 | 20.4.2024, 15:06 автор: Boymaster |
|
Текстовая версия | Сейчас: 23.4.2024, 15:01 |
