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

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


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

    https://github.com/rochal/jQuery-slimScroll
    Ответ написан
    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>';
    }
    Ответ написан