Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
Страницы: (2) [1] 2  ( Перейти к первому непрочитанному сообщению )  
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> Высота элементов li
Enigrade  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 14
Пользователь №: 43446
На форуме: 7 месяцев, 24 дня
Карма:




Привет всем)
сижу, изучаю css, html, верстал макет из PSD файла. В общем там картинки располагаются интересным методом(скрин прилогается). Я эти картинки начал запихивать списками. Запихал- встали нормально. Но у них есть эффект при наведении(затеняется фон, и появляются разные надписи. Скрин есть). Я это дело делал след. образом:
в нутри каждого li создал блок over_block, сделал ему стилистику подходящуу и скрыл opacity 0. И при наведении на любой из пунктов li у того блока opacity становится равным 0.8. Все хорошо, но вот только картинки разной высоты, а содержимое блока почему то под эту разную высоту не адаптируется, хотя все в процентах задал. Что я делаю не так? Гуру и просто кто понимает направьте на путь истинный )))
html


<ul class="content">
<li><a
href="#"><img src="images/one-two.png" alt=""></a>
<div
class="over_block">
<a
href="#"><p class="title">title here</p></a>
<p
class="sub-title">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</p>
<div
class="icons">
<a
href="#"><img src="images/link-ic.png" alt=""></a>
<a
href="#"><img src="images/like-inc.png" alt=""></a>
</div>
</div>
</li>
<li><a
href="#"><img src="images/two-two.png" alt=""></a>
<div
class="over_block">
<a
href="#"><p class="title">title here</p></a>
<p
class="sub-title">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</p>
<div
class="icons">
<a
href="#"><img src="images/link-ic.png" alt=""></a>
<a
href="#"><img src="images/like-inc.png" alt=""></a>
</div>
</div>
</li>
<li><a
href="#"><img src="images/free-two.png" alt=""></a>
<div
class="over_block">
<a
href="#"><p class="title">title here</p></a>
<p
class="sub-title">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</p>
<div
class="icons">
<a
href="#"><img src="images/link-ic.png" alt=""></a>
<a
href="#"><img src="images/like-inc.png" alt=""></a>
</div>
</div>
</li>
</ul>
<ul
class="content">
<li><a
href="#"><img src="images/one-free.png" alt=""></a>
<div
class="over_block">
<a
href="#"><p class="title">title here</p></a>
<p
class="sub-title">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</p>
<div
class="icons">
<a
href="#"><img src="images/link-ic.png" alt=""></a>
<a
href="#"><img src="images/like-inc.png" alt=""></a>
</div>
</div>
</li>
<li><a
href="#"><img src="images/two-free.png" alt=""></a>
<div
class="over_block">
<a
href="#"><p class="title">title here</p></a>
<p
class="sub-title">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</p>
<div
class="icons">
<a
href="#"><img src="images/link-ic.png" alt=""></a>
<a
href="#"><img src="images/like-inc.png" alt=""></a>
</div>
</div>
</li>
<li><a
href="#"><img src="images/free-free.png" alt=""></a>
<div
class="over_block">
<a
href="#"><p class="title">title here</p></a>
<p
class="sub-title">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</p>
<div
class="icons">
<a
href="#"><img src="images/link-ic.png" alt=""></a>
<a
href="#"><img src="images/like-inc.png" alt=""></a>
</div>
</div>
</li>
</ul>
<ul
class="content">
<li><a
href="#"><img src="images/one-four.png" alt=""></a>
<div
class="over_block">
<a
href="#"><p class="title">title here</p></a>
<p
class="sub-title">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</p>
<div
class="icons">
<a
href="#"><img src="images/link-ic.png" alt="">
</a>
<a
href="#"><img src="images/like-inc.png" alt="">
</a>
</div>
</div>
</li>
<li><a
href="#"><img src="images/two-four.png" alt=""></a>
<div
class="over_block">
<a
href="#"><p class="title">title here</p></a>
<p
class="sub-title">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</p>
<div
class="icons">
<a
href="#"><img src="images/link-ic.png" alt="">
</a>
<a
href="#"><img src="images/like-inc.png" alt="">
</a>
</div>
</div>
</li>
<li><a
href="#"><img src="images/free-four.png" alt=""></a>
<div
class="over_block">
<a
href="#"><p class="title">title here</p></a>
<p
class="sub-title">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</p>
<div
class="icons">
<a
href="#"><img src="images/link-ic.png" alt=""></a>
<a
href="#"><img src="images/like-inc.png" alt=""></a>
</div>
</div>
</li>
</ul>
</div>
</div>



css


.portfolio .content{
margin-top: 70px;
float: left;
}
.portfolio .content li{border: 1px solid red;
margin: 6px 6px;
display: block;
position: relative;
overflow: hidden;
}
.portfolio .content .over_block{
background-color: #131313;
opacity: 0.8;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
padding: 35% 15%;
text-align: left;
opacity: 0.8;
}
.portfolio .content .over_block p.title{
padding-top: 0;
margin-bottom: 0;
padding-bottom: 25%;
font: 20px Source Sans Pro Light, sans-serif;
color: #19bd9a;
line-height:2;
}
.portfolio .content .over_block p.title:after{
display: block;
content: "";
height: 2px;
width: 0%;
background-color: #19bd9a;
}
.portfolio .content .over_block p.title:hover:after,
.portfolio .content .over_block p.title:focus:after {
width: 24px;}
.portfolio .content .over_block p.sub-title{
font: 12px/18px open_sansregular, sans-serif;
color: #b2b3b3;
}
.portfolio .content .over_block .icons{
}

.portfolio .content .over_block .icons a{
margin-right: 5px;
display: inline-block;
width: 30px; height: 30px;
background-color: #000000;
border-radius: 50%;
padding: 8px 8px;
}
.portfolio .content .over_block .icons a:hover{
background-color: #19bd9a;
}
.portfolio .content .over_block:hover{
opacity: 0.8;
}



user posted image user posted image

Это сообщение отредактировал Enigrade - 30.09.2016 - 10:46
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
qpurypaHT  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 256
Пользователь №: 40254
На форуме: 2 года, 8 месяцев, 19 дней
Карма: 6




Я правильно понимаю: каждый блок в котором картинка должен быть одинаковой высоты?

И какой смысл в списках, если можно задать 4 блока <div> с float:left; а в них уже добавлять блоки с картинками


--------------------
Если долго в одних стенах живешь, ты с ними сростаешься
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
qpurypaHT  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 256
Пользователь №: 40254
На форуме: 2 года, 8 месяцев, 19 дней
Карма: 6




И так выглядит хорошо


--------------------
Если долго в одних стенах живешь, ты с ними сростаешься
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Enigrade  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 14
Пользователь №: 43446
На форуме: 7 месяцев, 24 дня
Карма:




Блоки именно такие какие есть
Проблема в том, что при наведении содержимое блока уходит за предел li
Я не понимаю почему так (

Это сообщение отредактировал Enigrade - 30.09.2016 - 15:29
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Enigrade  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 14
Пользователь №: 43446
На форуме: 7 месяцев, 24 дня
Карма:




А если 4 блока с флоатами задать, то они под размер картинок же подстроятся ? Я просто не у компа, оч интересно
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
qpurypaHT  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 256
Пользователь №: 40254
На форуме: 2 года, 8 месяцев, 19 дней
Карма: 6





{overflow:visible}
Отображается все содержание элемента, даже за пределами установленной высоты и ширины.

{overflow:hidden}
Отображается только область внутри элемента, остальное будет скрыто.



У тебя блоку .over_block установлено абсолютное позиционирование:


.content .over_block{position:absolute;}



относительно .content li:

.content li{position: relative;}


Все что выходит за пределы .content li скрывается параметром

{overflow:hidden}


--------------------
Если долго в одних стенах живешь, ты с ними сростаешься
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
qpurypaHT  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 256
Пользователь №: 40254
На форуме: 2 года, 8 месяцев, 19 дней
Карма: 6






--------------------
Если долго в одних стенах живешь, ты с ними сростаешься
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
qpurypaHT  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 256
Пользователь №: 40254
На форуме: 2 года, 8 месяцев, 19 дней
Карма: 6




кстати:

.portfolio .content{margin-top:70px;float: left;}


Когда в родительском блоке, в данном случае .portfolio последующий элемент имеет значение float:left, то этому родительскому блоку нужно выставить

 {overflow:auto}


чтобы понять почему, напиши сначала в .portfolio: border:1px solid rgba(0.0.0.,5);, обнови страницу, а потом вставь overflow:auto

говорю на всякий случай, так как CSS на этот блок ты не выкладывал

Это сообщение отредактировал Stave - 30.09.2016 - 17:15


--------------------
Если долго в одних стенах живешь, ты с ними сростаешься
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Enigrade  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 14
Пользователь №: 43446
На форуме: 7 месяцев, 24 дня
Карма:




ну это ладно)
я не могу понять, изза чего .over_block имеет статичную высоту, если посмотреть на скрин то можно увидеть как он отображается на большой картинке и маленькой. Одинаково! хотя отступы я задавал процентами, значит он же должен подстраиваться под родительский элемент? А получается так, что у него тупо статичная высота как буд то бы(
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
qpurypaHT  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 256
Пользователь №: 40254
На форуме: 2 года, 8 месяцев, 19 дней
Карма: 6




Потому что блок заполнен картинкой по её размерам, а текст позицианирован. Он не давит на высоту блока и скрывается параметром hidden


--------------------
Если долго в одних стенах живешь, ты с ними сростаешься
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
qpurypaHT  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 256
Пользователь №: 40254
На форуме: 2 года, 8 месяцев, 19 дней
Карма: 6




И позиционированному объекту позицию выставляют параметрами right:0; или left:0; или top:0; или bottom:0;
От какого края отступать. 0 прижимает к указанному краю


--------------------
Если долго в одних стенах живешь, ты с ними сростаешься
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
qpurypaHT  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 256
Пользователь №: 40254
На форуме: 2 года, 8 месяцев, 19 дней
Карма: 6




Вот если ты удалишь hidden текст уйдёт вниз и будет прокручиваться скроллом


--------------------
Если долго в одних стенах живешь, ты с ними сростаешься
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Enigrade  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 14
Пользователь №: 43446
На форуме: 7 месяцев, 24 дня
Карма:




если auto На оверфлоу поставить, то просто добавятся полосы прокрутки
получается, пока у меня блок позиционируется абсолютно, то текст не будет сам подгоняться?
черт чето я запутался
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Enigrade  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 14
Пользователь №: 43446
На форуме: 7 месяцев, 24 дня
Карма:




а полосы прокрутки не надо
надо что бы, если блок в высоту например 500 пикселей то отступы были от краев по процентам, и за область ничего не выходило. И при допустим 200 пикселей была таже картина.
А в моем случае на 500 пикселей все окей, а когда 200 , то все вываливается за пределы. И даже отступ с верху получается такойже, как на 500 пикселей, хотя я задал все в процентах! втф вообще оО
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
qpurypaHT  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 256
Пользователь №: 40254
На форуме: 2 года, 8 месяцев, 19 дней
Карма: 6




Я могу в тимвивере показать, когда приеду домой


--------------------
Если долго в одних стенах живешь, ты с ними сростаешься
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темыСтраницы: (2) [1] 2  Ответ в темуСоздание новой темыСоздание опроса