Задать вопрос
misterfil

Андрей

PHP программист(Full Stack)
Ответы пользователя по тегу HTML

  • Сдвиг страницы при появлении скролла?

    misterfil
    @misterfil
    PHP программист(Full Stack)
    Добавьте в стиль css
    body {
    overflow-y: scroll;
}


    Для более продвинутого решения JS библиотека с примерами

    https://github.com/rochal/jQuery-slimScroll
    Ответ написан
    3 комментария
    3 комментария

  • Как сверстать такую полоску?

    misterfil
    @misterfil
    PHP программист(Full Stack)
    Вот пример для наглядности
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pure CSS3 Ribbons Without Images</title>

<style type="text/css">
body
{
	font-family: arial, helvetica, freesans, sans-serif;
	font-size: 100%;
	color: #333;
	background-color: #ddd;
}

#page
{
	width: 500px;
	padding: 50px;
	margin: 0 auto;
	background-color: #fff;
	border: 1px solid #333;
}

h1
{
	font-size: 1.6em;
	font-weight: normal;
	margin: 0;
}

h2
{
	position: relative;
	width: 50%;
	font-size: 1.5em;
	font-weight: bold;
	padding: 6px 20px 6px 71px;
	margin: 30px 10px 10px -71px;
	color: #555;
	background-color: #999;
	text-shadow: 0px 1px 2px #bbb;
	-webkit-box-shadow: 0px 2px 4px #888;
	-moz-box-shadow: 0px 2px 4px #888;
	box-shadow: 0px 2px 4px #888;
}

h2:before, h2:after
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
}

h2:before
{
	width: 30px;
	left: -30px;
	top: 12px;
	border-width: 20px 10px;
	border-style: solid;
	border-color: #999 #999 #999 transparent;
}

h2.simple:before
{
	display: none;
}

h2.flag:before
{
	width: 0px;
	left: auto;
	right: -2px;
	top: 0px;
	border-color: transparent #fff transparent transparent;
}

h2:after
{
	left: 0px;
	top: 100%;
	border-width: 5px 10px;
	border-style: solid;
	border-color: #666 #666 transparent transparent;
}
</style>

</head>
<body>

<div id="page">

<h1>Pure CSS3 Ribbons Without Images</h1>

<p>No images or additional elements are used to create these ribbons.</p>

<h2 class="simple">Requirements</h2>

<p>You only require a single &lt;h2&gt; tag and a little CSS3 code.</p>

<h2 class="flag">More Information</h2>

<p>For more information, please please refer to:<br />

<h2>No Restrictions</h2>


<p>It can be used without any restrictions but please don't expect 24/7 support! A link back to <a href="http://www.sitepoint.com/">SitePoint.com</a> is appreciated.</p>

</div>

</body>
</html>
    Ответ написан
    Комментировать
    Комментировать

  • Как выровнить iframe?

    misterfil
    @misterfil
    PHP программист(Full Stack) 
    <html>
<head>
	<style>
		.video_block{
			clear:both;
			width:100%;
		}
		.width50{
			outline: 1px solid #fff;
			width:50%;
		}
		.left{
			float:left;
		}
		.right{
			float:right;
		}
	</style>
</head>
<body>
	<div class="video_block">
		<div class="width50 left">
			<iframe width="100%" height="300" hight src="https://www.youtube.com/embed/59ZOOqUAOmw" frameborder="0" allowfullscreen></iframe>
		</div>
		<div class="width50 right">
			<iframe width="100%" height="300"src="https://www.youtube.com/embed/VMk_xSlVqVY" frameborder="0" allowfullscreen></iframe>
		</div>
		<hr>
	</div>
</body>
</html>
    Ответ написан
    Комментировать
    Комментировать

  • Как скрыть кнопку в определенном странце?

    misterfil
    @misterfil
    PHP программист(Full Stack) 
    //echo '<pre>';print_r($_SERVER);echo '</pre>';
if((empty($_SERVER['DOCUMENT_URI']) || $_SERVER['DOCUMENT_URI']=='/index.php')&&
	empty($_SERVER['QUERY_STRING'])){
}else{
	echo '<button type="button" class="btn btn-link" onclick="history.back()">
	<i class="glyphicon	glyphicon-arrow-left"></i><span>Назад</span></button>';
}
    Ответ написан
    17 комментариев
    17 комментариев