Страница 1 из 11
Модератор форума: Yuri_G 
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Помогите со свойством overflow (Помогите со свойством overflow)
Помогите со свойством overflow
Серега_SakhaLin
Сообщений: 103
Репутация: 48

Сообщение # 1 | 04:00:46
Привет ребята, давно уже не обращался за помощью smile но у меня проблема...

Короче, у меня блоки, в них картинки, у блоков есть определенная высота и ширина. Картинки больше чем сам блок, и чтобы уместить картинки в блок, с сохранением пропорций, я применил overflow:hidden к блоку с картинкой. Под блоком с картинкой есть описание, оно естественно обрезалось и не отображалось. Я применил к блоку с описанием свойство position:absolute, и все проканало, но появилось расстояние между блоком с картинкой и блоком с описанием, потому что там продолжение невидимой картинки, которая вышла за пределы блока, но не показывается из-за свойства overflow:hidden. Помогите исправить)



Код HTML:


Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Сотрудники детского отдела</title>
      
      <style>
         .sotrDO-content {
            width:100%;
            margin-top:25px;
            text-align:center;
         }
         .sotrDO-foto {
            width:240px;
            height:320px;
            display:inline-block;
            margin:0 25px;
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            overflow:hidden;
         }
         .sotrDO-foto img {
            min-height:320px;
            min-width:240px;
            width:240px;
         }
         .sotrDO-foto p {
             width:240px;
            font:10pt Verdana, san-serif;
            margin-top:15px;
            position:absolute;
         }
         .sotrDO-foto span {
            font-weight:bold;
         }
      </style>
      
   </head>

<body>

   <div align="center" style="font-size: 18pt; font-family: Tahoma; color: rgb(255, 165, 0);">Заголовок</div>
   
   <div class="sotrDO-content">
      <div class="sotrDO-foto">
         <a href="#" class="ulightbox" target="_blank" title="Нажмите, для просмотра в полном размере...">
         <img src="#"/></a>
         <p><span>Описание описание</span><br>еще одно описание</p>
      </div>
      
      <div class="sotrDO-foto">
         <a href="http://tymovsk-library.ru/_si/0/08480811.jpg" class="ulightbox" target="_blank" title="Нажмите, для просмотра в полном размере...">
         <img src="http://tymovsk-library.ru/_si/0/08480811.jpg"/></a>
         <p><span>Описание описание</span><br>Описание описание</p>
      </div>
      
      <div class="sotrDO-foto">
         <a href="#" class="ulightbox" target="_blank" title="Нажмите, для просмотра в полном размере...">
         <img src="#"/></a>
         <p><span>Описание описание</span><br>Описание описание</p>
      </div>
   </div>
   
   

</body>

</html>
Прикрепления: 9996562.jpg(38Kb)

Сообщение отредактировал Серега_SakhaLin - Четверг, 20 Окт 2016, 04:01:40
Sonor
Сообщений: 234
Репутация: 503

Сообщение # 2 | 22:02:16
Тогда нужно заворачивать фотки в отдельный div:
Код
<div class="sotrDO-foto">
   <div>
<a href="#" class="ulightbox" target="_blank" title="Нажмите для просмотра в полном размере…">
<img src="#" /></a>
   </div>
<p><span>Описание описание</span><br />ещё одно описание</p>
</div>

и уже ему прописывать overflow:hidden:
Код
.sotrDO-foto div {
height : 320px;
overflow : hidden;
}


либо в этой части:
Код
.sotrDO-foto img {
            min-height:320px;
            min-width:240px;
            width:240px;
         }

изменять min-height на height и все фотографии приводить к одинаковым пропорциям.

Серега_SakhaLin
Сообщений: 103
Репутация: 48

Сообщение # 3 | 06:53:05
Sonor, Вот спасибо тебе добрый человек biggrin

Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Помогите со свойством overflow (Помогите со свойством overflow)
Страница 1 из 11
Поиск: