Ответы пользователя по тегу HTML
  • Проблемы с версткой: Пропадает изображение в паралаксе

    Оно просто долго грузится попробуйте сжать картинки. Я разницы не увидела единственное что в хроме картинка долго грузилась. Сжимать картинки стоит всегда так как гугл за этим следит
    Ответ написан
    8 комментариев
  • Как реализовать подобный фон?

    -webkit-box-shadow: inset 0px 0px 17px 19px rgba(255, 255, 255, 0.95);
    -moz-box-shadow: inset 0px 0px 17px 19px rgba(255, 255, 255, 0.95);
    box-shadow: inset 0px 0px 17px 19px rgba(255, 255, 255, 0.95);

    - это к блоку примените и кстати вот сами сможете сгенерировать
    Ответ написан
    2 комментария
  • Идентификация уникальности элемента DOM на странице при помощи jQuery?

    $('button').click(function(e) {
    valNew = $(this).index()+1; // тут хранится номер кнопки первая нажатая = 1 (если уберёте -1 то будет =0
    });
    Ответ написан
    6 комментариев
  • Как можно сверстать страницу div-ами?

    html

    <body>
    	<div class="wrap">
    		<div class="header"></div>
    		<div class="block-1"></div>
    		<div class="block-2"></div>
    		<div class="block-3"></div>
    	</div>
    	<div class="bg-2">
    		<div class="wrap">
    			<div class="block-4"></div>
    		</div>
    	</div>
    	<div class="wrap">
    		<div class="block-5"></div>
    	</div>
    	<div class="bg-3">
    		<div class="wrap">
    			<div class="block-6"></div>
    		</div>
    	</div>
    	<div class="footer">
    		<div class="wrap">
    			<div class="block-7"></div>
    		</div>
    	</div>
    </body>


    css

    body {
    background-color: #b2faba;
    }
    /*For wrap*/
    .wrap{
        width: 960px;/*или сколько там блоки шириной*/
        height: 100%;
        margin: 0 auto;
        position: relative;
    }
    /* /For wrap*/
    .header{
    background-color: #000;
    }
    .block-1{
    background-color: #fab2d4;
    }/*и далее в том же духе можно и min-height указать в высоту блока но это не советую лучше попиксельная вёрстка*/
    .bg-2{
    background-color: rgba(0,0,0, .3);
    }/* подбери цвет*/
    .bg-3{
    background-color: rgba(0,0,0, .3);
    }/* подбери цвет*/
    .footer{
    background-color: #000;
    }
    Ответ написан
    7 комментариев
  • Вставка кода используя JS

    1) подключаем Jquery (Я люблю 1.8 версию)
    2) создаём отдельный файл нашего js и подключаем его
    3) пишем в нашем новом файле код
    jQuery(function(){
    $('ul > li').each(function(){
    var listHTMl = li.html();
    var listStr = ''+listHTMl+'';
    $(this).html('').prepend('').append('listStr ');
    });
    });
    Ответ написан
    8 комментариев
  • Эпопея борьбы с футером. Как прижать его к низу, но не как у всех?

    Внимание! крайне не советую прижатие футера к низу через css вот этим способом! Ловите код и всегда прижимайте его js-ом
    //fixed footer
    if($(".footer").offset().top+$(".footer").outerHeight()<$(window).height())
    $(".footer").css({
    position: "absolute",
    width: "100%",
    bottom: 0
    });
    Ответ написан
    6 комментариев
  • Как реализовать увеличение изображения при клике на превьюшку?

    fancybox.net как вариант. Но Я всегда склоняюсь к тому чтобы ручками написать. А то в плагинах столько кода который Вы не используете а браузер то его грузит
    Ответ написан
    3 комментария
  • Правильно ли применять разный letter-spacing для разных блоков?

    Нужно всегда учитывать что даже перенос строки у фотошопа и во время вёрстки по разному работает. когда на странице более 5-7 letter-spacing различных это уже точно ошибка дизайнера. Чаще всего Я использую letter-spacing: -0.1px (или что то в этом районе). В 90% случаев это выручает и текст встаёт на место. Мне бывало давали макеты где отступ у 2-3 букв другой - это уже явный "косяк" дизайнера, так что не обращайте на это внимания.
    Так же не нужно забывать про семантический css - то есть если везде например у всех в контенте line-height: 1.3em и только у одного или двух line-height: 1.35em то это опять же скорее ошибка дизайнера. А вообще по ушам им за такое давать нужно...
    Ответ написан
    1 комментарий
  • Как лучше разместить фотографию в качестве фона на сайте?

    Я бы медиа запросами загружала разные картинки и обязательно сжатые. На телефоне не должна грузится та же картинка что и на компе
    Ответ написан
    Комментировать
  • CSS. Как заполнить пустоты блоками?

    если уж принципиально float то нужно обворачивать каждую строку в .clfx, а так то inline-block оптимальный вариант но для старых ie это не выход
    Ответ написан
    Комментировать
  • Почему Div block уходит на задний фон?

    Я не знаю поможет вам мой код или нет... Но блок никуда не пропадал он просто уходил вниз и так как у вас у всех блоков стоит overflow hidden его не было видно. Никакой z-index тут и не помог бы. У вас ещё Я смотрю inline-block и float... Используйте всегда только float он кроссбраузерный но для его родителя нужно прописывать класс clfx (стили класса посмотрите в коде) Я добавила ещё див который обворачивает эти блоки с рекламой чтобы нормально центровать. Так как у меня нет кода кроме того что вы кинули Я не могу точно сказать будет он работать или нет на вашем сайте, но если что пишите на почту fugaon@mail.ru. И ещё если у блоков большой общий стиль прописывайте в отдельном классе
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>Гипермаркет Маг Уюта</title>
    	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    	<meta name="apple-mobile-web-app-capable" content="yes" />
    	<meta name="apple-mobile-web-app-title" content="mightySlider" />
    	<link rel="apple-touch-icon" href="assets/icon/57.png" />
    	<link rel="apple-touch-icon" sizes="72x72" href="assets/icon/72.png" />
    	<link rel="apple-touch-icon" sizes="114x114" href="assets/icon/114.png" />
    	<link rel="apple-touch-icon" sizes="144x144" href="assets/icon/144.png" />
    
    
        <!-- Styles -->
        <link href="assets/css/bootstrap.css" rel="stylesheet" />
        <link href="assets/css/bootstrap-responsive.css" rel="stylesheet" />
        <link href="assets/css/docs.css" rel="stylesheet" />
        <link href="assets/css/style.css" rel="stylesheet" />
        <link href="src/css/mightyslider.css" rel="stylesheet" />
    	<style>
    		html, body {
    		    height: 100%;
    			background: #FFF;
    
    			font-family: Tahoma, 
    		}
    		/*For clearfix*/
    		.banner {
        width: 244px; 
    	height: 161px;
        background: url(http://eskv.ru/assets/img/photos/banner_1_1.png); 
        position: relative;
    	cursor:pointer;
        float: left;
        margin-right: 20px;
    }
    	.banners{
    		margin: 0 auto;
    		width: 1057px;
    		position: relative;
    		top: 41%;
    	}
    	.clfx:before,
    	.clfx:after {
    	    content:"";
    	    display:table;
    	}
    	.clfx:after {
    	    clear:both;
    	}
    	.clfx {
    	    zoom:1; /* Хак для IE 6 и 7 */
    	}
    /* /For clearfix*/
    		#example {
    			overflow: hidden;
    			margin-top: 0px;
                height: 100%;
    		}
    		#example .frame {
    			width: 100%;
    			height: 100%;
    		}
    		#example .frame .slide_element {
    			height: 100%;
    		}
    		#example .frame .slide_element > div {
    			float: left;
    			height: 100%;
    			overflow: hidden;
    		}
    		#example .frame .mSCover img {
    			max-width: none;
    		}
    
    		#example .frame .slide_element > div .banner1 {
        width: 244px; 
    	height: 161px;
        background: url(http://eskv.ru/assets/img/photos/banner_1_1.png); 
        position:absolute;
    	top:41%;
    	left:9%;
    	cursor:pointer;
    	display:inline-block;
    }
    		#example .frame .slide_element > div .banner2 {
        width: 244px; 
    	height: 161px;
        background: url(http://eskv.ru/assets/img/photos/banner_2_1.png); 
        position:absolute;
    	top:41%;
    	left:26%;
    	cursor:pointer;
    	display:inline-block;
    }
    		#example .frame .slide_element > div .banner3 {
        width: 244px; 
    	height: 161px;
        background: url(http://eskv.ru/assets/img/photos/banner_3_1.png); 
        position:absolute;
    	top:41%;
    	left:43%;
    	cursor:pointer;
        display:inline-block;
    }
    		#example .frame .slide_element > div .banner4 {
        width: 244px; 
    	height: 161px;
        background: url(http://eskv.ru/assets/img/photos/banner_1_1.png); 
        position:absolute;
    	top:41%;
    	left:60%;
    	cursor:pointer;
        display:inline-block;
    }
    	</style>
    
    
      </head>
    
      <body>
    	<div id="example" class="mightyslider_modern_skin">
    				<div class="frame" >
    				<div class="slide_element clfx" >
    				<!--первая страница-->
    				<div class="slide clfx" data-mightyslider="cover: 'assets/img/photos/image_1.png'"  oncopy="return false" ondragstart="return false" onselectstart="return false">
    				<!--вторая строка баннеров-->
    				<div class="banners clfx">
                        <div class="banner" onclick="location.href='http://bears.maguyuta.ru';"></div>
                        <div class="banner"></div>
                        <div class="banner"></div> 
                        <div class="banner"></div>
                    </div>
    				</div>
    
    				<!--вторая страница-->
    				<div class="slide" data-mightyslider="cover: 'assets/img/photos/image_2.png'"  oncopy="return false" ondragstart="return false" onselectstart="return false"> 
    				<!--третья страница-->
    				</div>
    				<div class="slide" data-mightyslider="cover: 'assets/img/photos/image_3.png'" oncopy="return false" ondragstart="return false" onselectstart="return false">
    				
    				</div>
    			
    			</div>
    			
    		</div>
    	</div>
    
        <!-- Le javascript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="assets/js/css_browser_selector.min.js"></script>
        <script src="assets/js/jquery.js"></script>
    	<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    	<script type="text/javascript" async="" defer="" src="http://iprodev.com/projects.php?p=mightyslider"></script>
        <script src="assets/js/jquery.mobile.just-touch.js"></script>
        <script src="assets/js/bootstrap-dropdown.js"></script>
        <script src="assets/js/bootstrap-tooltip.js"></script>
        <script src="assets/js/bootstrap-popover.js"></script>
        <script src="assets/js/bootstrap-collapse.js"></script>
        <script src="assets/js/jquery.easing.1.3.js"></script>
        <script src="src/js/mightyslider.js"></script>
        <script>
    		eval(function(d,f,a,c,b,e){b=function(a){return a.toString(f)};if(!"".replace(/^/,String)){for(;a--;)e[b(a)]=c[a]||b(a);c=[function(a){return e[a]}];b=function(){return"\\w+"};a=1}for(;a--;)c[a]&&(d=d.replace(RegExp("\\b"+b(a)+"\\b","g"),c[a]));return d}('$(4).e(2(){3 a=$("#5");$(".6",a).7({8:9,b:"c",d:1,f:"g",h:{i:"j%",k:"l"},m:{n:0.1},o:{p:1}})});',26,26,"  function var document example frame mightySlider speed 1E3  easing easeOutExpo autoScale ready viewport stretch navigation slideSize 100 keyboardNavBy slides dragging swingSpeed commands buttons".split(" "),
    		0,{}));
    
    		
        </script>
      </body>
    </html>
    Ответ написан
    Комментировать
  • Как залить пункт меню цветом при наведении?

    использование float превосходит inline-block своей кроссбраузерностью. При использование inline-block Вы свои сайты в ie старых не узнаете. А всё же приятно когда кроссбраузеность не оговаривалась но она есть.
    Ответ написан
    Комментировать
  • Как реализовать такую волнистую линию у навбара?

    то что сказал icelaba + не забудьте поставить у нижнего блока отрицательный margin(равный высоте картинки волны) и z-index меньше (это при условии, если та картинка на которую находит эта волна не фон самого сайта, а фон блока).
    Ответ написан
    Комментировать