Форум PHP программистов > Высота элементов li

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Страницы: 1, 2

qpurypaHT

30.09.2016 - 19:38


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

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

_____________
Если долго в одних стенах живешь, ты с ними сростаешься

Enigrade

30.09.2016 - 19:39

Блин, было бы очень круто, а не подскажешь через сколько примерно?)

Enigrade

30.09.2016 - 19:41

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


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

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

если я на топ поставлю значение, то у меня все затенение съедит, т.е. блок

qpurypaHT

30.09.2016 - 19:43

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

_____________
Если долго в одних стенах живешь, ты с ними сростаешься

Enigrade

30.09.2016 - 19:45

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

qpurypaHT

30.09.2016 - 22:34

Написал под себя, не добавлял эффекта на 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;}

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

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

_____________
Если долго в одних стенах живешь, ты с ними сростаешься

Быстрый ответ:

Здесь расположена полная версия этой страницы.