cssor.ru - Сайт о CSS и верстке сайтов, в помощь веб разаботчикам.

Полезно-интересное применение overflow

Дата: 27.09.2008

Сегодня речь пойдет о интересном эффекте который можно сделать с помощью свойства overflow. Эффект галереи, увеличения, активности называйте его как хотите, применений у него можно найти много. Для начала давайте обратимся к самому свойству overflow и разберемся что оно делает.

Overflow - управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.


Overflow может принимать 4 значения:

1. Visible - Отображается все содержание элемента, даже за пределами установленной высоты и ширины;

2. hidden - Отображается только область внутри элемента, остальное будет обрезано;

3. scroll - Всегда добавляются полосы прокрутки;

4. auto - Полосы прокрутки добавляются только при необходимости.


Два последних в данном случае нас не интересуют, а вот первые два нам сейчас понадобятся. HTML код будет весьма прост, помещаем каждую картинку в элемент <li> списка <ul> :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Полезно-инересное применение overflow в CSS</title>
<link rel="stylesheet" href="CSS.css" type="text/css" />
</head>
<body>
<div id="container">
<ul id="gallery">
<li><a href="http://cssor.ru"><img src="drinkcat.jpg" /></a></li>
<li><a href="http://cssor.ru"><img src="maiamidog.jpg" /></a></li>
<li><a href="http://cssor.ru"><img src="child.jpg" /></a></li>
<li><a href="http://cssor.ru"><img src="lekar.jpg" /></a></li>
</ul>
</div>
</body>
</html>

DIV с id="container" нужен только для позиционирования списка (;<ul>) с картинками на странице. Теперь напишем небольшой CSS код, в нем и заключается весь эффект:

/* CSS Document */
html, body {
  	margin:0;
  	padding:0;
  	width:100%;
 	height:100%;
  	background-color:#FFFFFF;
}
img {
 	border:none;
}

#container {
	width:700px;
	top:50%;
	left:50%;
	position:absolute;
	margin-top:-80px;
	margin-left:-350px;
}

ul#gallery li{
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	margin-right:5px;
	border: #999999 1px solid;	
	padding:2px;
	}
ul#gallery a{
	display:block;
	float:left;
	width:140px;
	height:140px;
	line-height:70px;
	overflow:hidden;
	position:relative;
	z-index:1;		
	}
ul#gallery a img{
	float:left;
	position:absolute;
	top:-25px;
	left:-35px;	
	}
	
/* mouse over */
ul#gallery a:hover{
	overflow:visible;
	z-index:500;		
	}
ul#gallery a:hover img{
	border: #999999 1px solid;	
	background:#fff;
	padding:3px;			
	}	
	
	
ul#gallery:after, li#gallery:after{
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
	}
ul#gallery, li#gallery{
	display:block;
	}

ul#gallery, li#gallery{
	min-height:1%;
	}
* html ul#gallery, * html li#gallery{
	height:1%;
	}	

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

Эта “галерея” имеет горизонтальный вид, так же очень просто можно превратить ее в вертикальную или “квадратную”, изменив лишь ширину (width) у DIV-а #container. Сейчас там стоит width:700px;, если изменить это значение на 400 (width:400px;), то мы получим “квадратный” вид (4 картинки в два ряда, по две картинки в каждом ряду). Если изменить это значение на 150 (width:150px;), то получим вертикальный вид.

Смотреть здесь – тут наглядно показано, какой становится “галерея” при изменении ширины (width) у контейнера (#container). В этом примере еще меняются значения top и left для более точного центрирования на странице, но это не в этом суть, главное чтоб было понятно, что происходит при изменении ширины контейнера.

30.09.2008

А можно ли так сделать, чтобы в миниатюре были не обрезанные картинки, а их уменьшенные копии?

30.09.2008

Одним лишь CSS тогда не обойтись, JS нужен.

08.10.2008

клёво! спасибо. пошёл реализовывать

08.10.2008

а случаем, не подскажите, как

можно привязать к картинкам прикрепляющимся по средствам imagefield_CCK (Друпал). спасибо.

08.10.2008

..не подскажите, как li ul (вырезало)..

08.10.2008
а случаем, не подскажите, как можно привязать к картинкам прикрепляющимся по средствам imagefield_CCK (Друпал). спасибо.

Незнаю.

..не подскажите, как li ul (вырезало)..

Написанно же "HTML теги запрещены".

20.12.2008

Lexandro
30.09.2008
А можно ли так сделать, чтобы в миниатюре были не обрезанные картинки, а их уменьшенные копии?
admin
30.09.2008
Одним лишь CSS тогда не обойтись, JS нужен.

А мне кажется можно, если в тэге имдж прописать размеры(браузер интрополирует картинку), а в CSS поставить, при появления блоков с картинками, реальные размеры картинок с !important))))))

26.02.2009

Хорошо что вы всё подробно раскладываете)

22.03.2009

А как сделать чтобы они плавно выезжали?

23.03.2009

keanor, CSS тут бессилен, это нужен JS.

Да, для этого лучше использовать jQuery, там как раз реализованы все эти эффекты с плавным выезжанием.

13.06.2009
А можно ли так сделать, чтобы в миниатюре были не обрезанные картинки, а их уменьшенные копии?

Можно. Помещаем два изображения в тег 'а', уменьшенную копию и нормальное, назначаем им разные классы. Нормальное скрываем display:none; при наведении a:hover показываем display:block; нормальное изображение поверх уменьшенного (изображение подгрузиться при наведении).
Делал для strict проверял только в опере 9,64.
img {
	margin:0 0 -3px 0;
	border:0;
}
li a {
	float:left;
	margin:4px;
	padding:4px;
	display:block;
	border:1px solid #000;
	width:80px;
}
/*Правило для нормального изображения до наведения курсора...*/
.img_2 {
	display:none;
}
/*...и после*/
ul a:hover .img_2 {
	display:block;
	position:absolute;
	margin:-85px 0 0 -20px;
	border:1px solid #000;
	padding:4px;
	background:#FFF;
}

P.S. В IE7 не работает (а когда там что то работало?) но я думаю можно довестидо ума и там.

13.06.2009

Мне кажеться лучше делать не списком, а отдельными дивами. Тогда и с IE будет проще.

25.06.2009

В IE8 не работает ,но думаю можно довести до ума

09.07.2009

Ну вы блин и даете как в этом можно разобраться

10.07.2009

А как сделать чтобы они плавно выезжали?

11.07.2009

Fedor
Без js никак, а это уже "история другого произведения" ).

04.08.2009

Полезная фича. Особенно когда места маловато, а инфы куча.

16.08.2009

А как сделать так чтобы при 100% размерах скролы в дивах при overflow:auto появлялись?)

20.08.2009
А как сделать так чтобы при 100% размерах скролы в дивах при overflow:auto появлялись?)

Не совсем понятно что вы имели ввиду, но все же. Чтобы у дива появились скролы надо выставить ему фиксированные размеры и вставить в него много инфы, которая просто не будет умещаться при выводе в эти размеры (большая картинка или много текста). Вот тогда и появятся скроллы.

20.08.2009

Гость[wajox]
Из справочника по CSS:

"Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. auto - Полосы прокрутки добавляются только при необходимости."

То есть GABRIEL подсказал вам абсолютно правильно.

31.08.2009

А как же сделать так: имеется див размеры которого width:80%; height:100%; и нужно чтобы он прокручивался по вертикали и горизонтали когда размеры содержимого будут больше. или как можно реализовать нечто подобное?

02.09.2009

Гость[wajox]
В самом начале статьи я расписал для чего служит свойство overflow и какие значения может принимать. Вам нужно просто внимательно прочитать и применить полученные знания.

26.01.2010

ну разбираться долго надо

01.02.2010

что-то не получается пока

02.02.2010

ура! всё сделала, спасибо

04.02.2010

интересно, надо попробовать

05.02.2010

действительно полезно

12.02.2010

Не сразу, но получилось. Большое спс!

16.02.2010

Спасибо большое автору!а то искал и нигде не мог найти!Мне очень помогла ваша статья!5+

17.02.2010

хочу, но не могу понять. Помогите!

01.05.2010

Благодаря вашему примеру, теперь использую свойства overflow в своих проектах.

11.05.2010

В принципе согласен, но есть некоторые ньюансы, которые требуют более детального обсуждения.

21.10.2010

Отличный пример того, как не надо верстать. Если, конечно, вы дорожите своим временем и временем тех, кто после вас будет это смотреть.

11.03.2011

Думаю, что Вы обратите внимание на новинку основит стартолайн т 41 Универсально подойдет к любому виду отделки

Тоже изучаю css . Подписался )

11.05.2011

Прикольно

20.06.2011

А я честно говоря первый раз слышу про overflow. CSS занимаюсь недавно, так что спасибо за информацию!

19.07.2011

Вот http://турист27.рф
http://турдв.рф

20.08.2011

Вот,сделал c вашей помощю: http://vajra.com.ar/yoga.html
Спасибо автор.

02.12.2011

Очень полезный и интересный материал изложен в статье.