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

> Высота элементов li
Stave  
Дата
Цитировать сообщение

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



Старик
***

Профиль
Группа: Пользователь
Сообщений: 138
Пользователь №: 40254
На форуме: 2 года, 2 месяца, 28 дней
Карма: 4





.portfolio .content .over_block{
top:5%;
padding: 0 15%
}

Измени пункты

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


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

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



Новичок
*

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




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

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



Новичок
*

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




Цитата (Stave @ 30.09.2016 - 19:38)

.portfolio .content .over_block{
top:5%;
padding: 0 15%
}

Измени пункты

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

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



Старик
***

Профиль
Группа: Пользователь
Сообщений: 138
Пользователь №: 40254
На форуме: 2 года, 2 месяца, 28 дней
Карма: 4




Короче дома буду напишу, скинь маяк в скайп shouter901
Когда буду дома вопрос маленький, когда уснут дети вот это вопросище

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


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

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



Новичок
*

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




скинул, у нас ночь уже просто ) могу уснуть
слушай, а не будет наглостью, если я оставлю тебе исходник на почту и ты взглянешь?)
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Stave  
[x] Дата
Цитировать сообщение

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



Старик
***

Профиль
Группа: Пользователь
Сообщений: 138
Пользователь №: 40254
На форуме: 2 года, 2 месяца, 28 дней
Карма: 4




Написал под себя, не добавлял эффекта на title, лень.
Решение нашел только такое:


Но все равно придется для низких блоков писать отдельные классы отступов

html


<div id="QP">
<div
class="QP_one">
<div
class="QP_post">
<img
src="images/one-one.png" alt="">
<div
class="QP_post_fon">
<div
class="QP_post_over_block">
<ul>
<li
class="title2">title here</li>
<li
class="description">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</li>
<li
class="icon">
<a
href="#"><img src="images/link-ic.png" alt=""></a>
<a
href="#"><img src="images/like-inc.png" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
<div
class="QP_post">
<img
src="images/two-one.png" alt="">
<div
class="QP_post_fon">
<div
class="QP_post_over_block">
<ul>
<li
class="title2">title here</li>
<li
class="description">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</li>
<li
class="icon">
<a
href="#"><img src="images/link-ic.png" alt=""></a>
<a
href="#"><img src="images/like-inc.png" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
<div
class="QP_post">
<img
src="images/free-one.png" alt="">
<div
class="QP_post_fon">
<div
class="QP_post_over_block">
<ul>
<li
class="title2">title here</li>
<li
class="description">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</li>
<li
class="icon">
<a
href="#"><img src="images/link-ic.png" alt=""></a>
<a
href="#"><img src="images/like-inc.png" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class="QP_two">
<div
class="QP_post">
<img
src="images/one-two.png" alt="">
<div
class="QP_post_fon">
<div
class="QP_post_over_block">
<ul>
<li
class="title2">title here</li>
<li
class="description">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</li>
<li
class="icon">
<a
href="#"><img src="images/link-ic.png" alt=""></a>
<a
href="#"><img src="images/like-inc.png" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
<div
class="QP_post">
<img
src="images/two-two.png" alt="">
<div
class="QP_post_fon">
<div
class="QP_post_over_block">
<ul>
<li
class="title2">title here</li>
<li
class="description">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</li>
<li
class="icon">
<a
href="#"><img src="images/link-ic.png" alt=""></a>
<a
href="#"><img src="images/like-inc.png" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
<div
class="QP_post">
<img
src="images/free-two.png" alt="">
<div
class="QP_post_fon">
<div
class="QP_post_over_block">
<ul>
<li
class="title2">title here</li>
<li
class="description">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</li>
<li
class="icon">
<a
href="#"><img src="images/link-ic.png" alt=""></a>
<a
href="#"><img src="images/like-inc.png" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class="QP_free">
<div
class="QP_post">
<img
src="images/one-free.png" alt="">
<div
class="QP_post_fon">
<div
class="QP_post_over_block">
<ul>
<li
class="title2">title here</li>
<li
class="description">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</li>
<li
class="icon">
<a
href="#"><img src="images/link-ic.png" alt=""></a>
<a
href="#"><img src="images/like-inc.png" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
<div
class="QP_post">
<img
src="images/two-free.png" alt="">
<div
class="QP_post_fon">
<div
class="QP_post_over_block">
<ul>
<li
class="title2">title here</li>
<li
class="description">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</li>
<li
class="icon">
<a
href="#"><img src="images/link-ic.png" alt=""></a>
<a
href="#"><img src="images/like-inc.png" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
<div
class="QP_post">
<img
src="images/free-free.png" alt="">
<div
class="QP_post_fon">
<div
class="QP_post_over_block">
<ul>
<li
class="title2">title here</li>
<li
class="description">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</li>
<li
class="icon">
<a
href="#"><img src="images/link-ic.png" alt=""></a>
<a
href="#"><img src="images/like-inc.png" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class="QP_four">
<div
class="QP_post">
<img
src="images/one-four.png" alt="">
<div
class="QP_post_fon">
<div
class="QP_post_over_block">
<ul>
<li
class="title2">title here</li>
<li
class="description">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</li>
<li
class="icon">
<a
href="#"><img src="images/link-ic.png" alt=""></a>
<a
href="#"><img src="images/like-inc.png" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
<div
class="QP_post">
<img
src="images/two-four.png" alt="">
<div
class="QP_post_fon">
<div
class="QP_post_over_block">
<ul>
<li
class="title2">title here</li>
<li
class="description">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</li>
<li
class="icon">
<a
href="#"><img src="images/link-ic.png" alt=""></a>
<a
href="#"><img src="images/like-inc.png" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
<div
class="QP_post">
<img
src="images/free-four.png" alt="">
<div
class="QP_post_fon">
<div
class="QP_post_over_block">
<ul>
<li
class="title2">title here</li>
<li
class="description">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</li>
<li
class="icon">
<a
href="#"><img src="images/link-ic.png" alt=""></a>
<a
href="#"><img src="images/like-inc.png" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>




CSS

#QP{overflow:auto;}
#QP .QP_one, .QP_two, .QP_free, .QP_four{float:left;margin:0 6px;}
#QP .QP_post{border:1px solid red;margin-bottom:6px;position:relative;}
#QP .QP_post img{vertical-align:middle;}
#QP .QP_post .QP_post_fon{background:#131313;position:absolute;top:0;z-index:5;width:100%;height:100%;opacity: 0.8;opacity: 0;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;transition:all 1s;}
#QP .QP_post .QP_post_fon:hover{opacity: 0.8;}
#QP .QP_post .QP_post_fon .QP_post_over_block ul{list-style:none;text-align:left;padding:0 15%;position:absolute;top:20%;}
#QP .QP_post .QP_post_fon .QP_post_over_block .title2{font: 20px Source Sans Pro Light, sans-serif;color: #19bd9a;line-height:2;text-transform: uppercase;letter-spacing: 4px;margin-bottom:10%;}
#QP .QP_post .QP_post_fon .QP_post_over_block .description{color: #b2b3b3;font: 12px/18px open_sansregular, sans-serif;margin-bottom:15%;}
#QP .QP_post .QP_post_fon .QP_post_over_block .icon a{margin-right: 5px;width: 30px; height: 30px;background-color: #000000;border-radius: 50%;padding: 8px 8px;}
#QP .QP_post .QP_post_fon .QP_post_over_block .icon a:hover{background-color: #19bd9a;}



user posted image


может еще кто что подскажет






И вот с этим блоком надо что-то делать, из-за него горизонтальная полоса прокрутки

user posted image

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


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

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



Новичок
*

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




Спасибо за помощ)))))
Я доработал твой код, и теперь все подстраивается пропорционально размера блока!)) УРЯ!
Задачка заставила попотеть)

user posted image
css


#QP{width: 1170px;
margin: 0 auto;
overflow:auto;
}
.QP_one, .QP_two, .QP_free, .QP_four{
float:left;
}
#QP .QP_post{
position:relative;
margin:6px 6px;
}

#QP .QP_post .QP_post_fon{
background:#131313;
position:absolute;
top:0;
z-index:5;
width:100%;height:100%;
opacity: 0;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;transition:all 1s;
}
#QP .QP_post .QP_post_fon:hover{
opacity: 0.8;}
#QP .QP_post .QP_post_fon .QP_post_over_block{
position: relative;
height: inherit;
}
#QP .QP_post .QP_post_fon .QP_post_over_block ul{
height: inherit;
text-align:left;

}
#QP .QP_post .QP_post_fon .QP_post_over_block li{
position: absolute;
left: 15%;
}

#QP .QP_post .QP_post_fon .QP_post_over_block .title2{
font:20px Source Sans Pro Light, sans-serif;
color: #19bd9a;
line-height:2;
text-transform: uppercase;
letter-spacing: 4px;
top: 25%; width: 210px; height: 18%;
}
#QP .QP_post .QP_post_fon .QP_post_over_block .description{
color: #b2b3b3;
font: 12px/18px open_sansregular, sans-serif;
top: 45%;width: 210px; height: 30%;
}
#QP .QP_post .QP_post_fon .QP_post_over_block .icon{
top: 80%;
}
#QP .QP_post .QP_post_fon .QP_post_over_block .icon a{
margin-right: 5px;
width: 30px; height: 30px;
background-color: #000000;border-radius: 50%;
padding: 8px 8px;}
#QP .QP_post .QP_post_fon .QP_post_over_block .icon a:hover{
background-color: #19bd9a;}


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

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

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