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

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

    Для поиска шрифтов идеально www.google.com/fonts#
    для генерации www.fontsquirrel.com/tools/webfont-generator другие сервисы не советую использовать иначе будут проблемы с ie которые Я описывала тут . Там в нём Вам даже css файл выдаст со всеми подключениями. Если шрифт Вам прислали левый генератор Вас оповестит, на крайняк можно использовать генератор этот css он по приятнее выдаст но ie не любит шрифты от него
    Ответ написан
    Комментировать
  • Как реализовать увеличение изображения при клике на превьюшку?

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

    То что вы описываете несёт в себе хоть и простейшую, но логику. Поэтому это минимум медиа запрос
    Ответ написан
    3 комментария
  • 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 меньше (это при условии, если та картинка на которую находит эта волна не фон самого сайта, а фон блока).
    Ответ написан
    Комментировать