Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Запрос type="text/css" media="screen"

Если в этих двух файла будет написан один и тот же код

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" >

будет ли разница в их работы
Ответ:
type="text/css" скорее всего роли не играет
media="screen" не будет работать при печати. Не уверен о том как сработает с мобилками.
Вопрос: Что означает данный тип: type="text/template"

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <script id="intro-screen-template" type="text/template">
 
        <div class="titleWrapper">
 
            <div class="title">
                ANAGRAMMATIX
            </div>
 
            <div class="buttons">
 
                <button id="btnCreateGame" class="btn left">CREATE</button>
                <button id="btnJoinGame" class="btn right">JOIN</button>
                <div style="clear:both"></div>
            </div>
 
        </div>
 
    </script>
Видел такой код. Для чего нужен этот тег script?
Содержимое его записывалось в переменную
Javascript
1
App.$templateIntroScreen = $('#intro-screen-template').html();
И когда нужно было показать именно это содержимое, то использовалась эта переменная.
Как я понимаю, это можно было заменить на конструкцию
HTML5
1
2
3
<div id="intro-screen-template" class="template">
<!-- some code -->
</div>
CSS
1
2
3
.template {
    display: none;
}
Ответ:
блок script type = «text/template» не будет обработан браузером.
Т.е. в отличие от дива с display: none этот блок не будет занимать ресурсы браузера на свою обработку?
Вопрос: Индивидуальные стили css для страниц

Здравствуйте!
Прикрутил к отдельным страницам свои стили, с целью смены фонов на разных страницах
Прикрутил следующим кодом в header:

Код PHP
1
2
3
4
5
6
7
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen"/>
<?php if (is_page('32')) : ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style1.css" type="text/css" media="screen"/>
...
<?php if (is_front_page()) : ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style5.css" type="text/css" media="screen"/>
<?php endif; ?>
Теперь возникла потребность убрать с главной страницы полупрозрачную подложку (не знаю как это называется правильно, но я хочу сделать область страницы прозрачной, чтобы всё было непосредственно на фоне.

Сделал индивидуальный css для главной, но стиль этой подложки, почему-то, цепляется из основного стиля.
Как это исправить? Не силён в php, поэтому никак не могу исправить, помогите пожалуйста

Сайт: http://old.lobbyconsult.ru/
Ответ: Да! Огромное спасибо за помощь!
Вставил стиль в нужное место (там где и был он изначально), и всё заработало.
Вопрос: Почему не срабатывает CSS-класс?

Есть вот такая страница:

<!DOCTYPE html><!-- HTML5 -->

<html lang="ru-RU" dir="ltr">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

		<title>Доплата банковской картой без комиссии</title>

		<meta charset="utf-8" />
		<!--[if IE]><meta http-equiv="ImageToolbar" content="False" /><![endif]-->
		<meta name="generator" content="Incomedia WebSite X5 Professional 11.0.8.31 - www.websitex5.com" />

		<meta name="viewport" content="width=947" />

		<link rel="icon" href="favicon.png" type="image/png" />
		<link rel="stylesheet" type="text/css" href="style/reset.css" media="screen,print" />
		<link rel="stylesheet" type="text/css" href="style/print.css" media="print" />
		<link rel="stylesheet" type="text/css" href="style/style.css" media="screen,print" />
		<link rel="stylesheet" type="text/css" href="style/template.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="style/menu.css" media="screen" />
		<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="style/ie.css" media="screen" /><![endif]-->
		<link rel="alternate" type="application/rss+xml" title="Новости" href="x5feed.php" />
		<link rel="alternate" type="application/rss+xml" title="" href="blog/x5feed.php" />

		<link rel="stylesheet" type="text/css" href="pcss/800.css" media="screen" />

		<script type="text/javascript" src="res/jquery.js?31"></script>
		<script type="text/javascript" src="res/x5engine.js?31"></script>
		<script type="text/javascript" src="files/checkid(1).js"></script>

		<script type="text/javascript">
			x5engine.boot.push(function () { x5engine.bgStretch('style/bg.jpg', true, 0); });
		</script>

		<style type="text/css">
			.incorrect-input {
			background-color: lightpink;
			border: red 1px solid;
			color: red;
			}
			.inactive-button {
			cursor:default;
			}
			.active-button {
			cursor: pointer;
			}
		</style>
						
		<script type="text/javascript">
		var jqs = jQuery.noConflict();
		(function(jqs) {
			jqs(document).ready(function () {
			alert(jqs('[name=PAYMENT_NO]').attr('class'));
				jqs('[name=PAYMENT_NO]')
				.addClass('incorrect-input')
				.bind('keypress', function(eo) { return checkId(eo); })
				.bind('keyup', function() { checkIdFormat(); })
				.bind('change', function() { checkIdFormat(); });
			alert(jqs('[name=PAYMENT_NO]').attr('class'));
				jqs('[type=submit]').addClass('inactive-button').attr('disabled', 'dissabled');
				});
		})(jQuery);
		
		</script>
		

		<meta name='yandex-verification' content='15d125435ecda98c' />
	</head>

	<body>

		<div id="imHeaderBg"></div>

		<div id="imFooterBg"></div>

		<div id="imPage">

			<div id="imHeader">

				<h1 class="imHidden">Доплата  банковской картой без комиссии</h1>

				

			</div>

			<a class="imHidden" href="#imGoToCont" title="Заголовок главного меню">Перейти к контенту</a>

			<a id="imGoToMenu"></a><p class="imHidden">Главное меню:</p>

			<div id="imMnMn" class="auto">

				<ul class="auto">
					<li id="imMnMnNode0" class="imMnMnFirst">
						<a href="index.html">
							<span class="imMnMnFirstBg">
								<span class="imMnMnTxt"><span class="imMnMnImg"></span><span class="imMnMnTextLabel">Оплата </span></span>
							</span>
						</a>
					</li><li id="imMnMnNode3" class="imMnMnMiddle">
						<a href="kak-oplatit-trikolor-tv.html">
							<span class="imMnMnFirstBg">
								<span class="imMnMnTxt"><span class="imMnMnImg"></span><span class="imMnMnTextLabel">Как оплатить</span></span>
							</span>
						</a>
					</li><li id="imMnMnNode105" class="imMnMnMiddle">
						<a href="kanaly.html">
							<span class="imMnMnFirstBg">
								<span class="imMnMnTxt"><span class="imMnMnImg"></span><span class="imMnMnTextLabel">Каналы</span></span>
							</span>
						</a>
					</li><li id="imMnMnNode6" class="imMnMnMiddle">
						<a href="aktsii.html">
							<span class="imMnMnFirstBg">
								<span class="imMnMnTxt"><span class="imMnMnImg"></span><span class="imMnMnTextLabel">Акции</span></span>
							</span>
						</a>
					</li><li id="imMnMnNode50" class="imMnMnMiddle">
						<a href="support.html">
							<span class="imMnMnFirstBg">
								<span class="imMnMnTxt"><span class="imMnMnImg"></span><span class="imMnMnTextLabel">Служба поддержки </span></span>
							</span>
						</a>
					</li><li id="imMnMnNode5" class="imMnMnMiddle">
						<a href="novosti.php">
							<span class="imMnMnFirstBg">
								<span class="imMnMnTxt"><span class="imMnMnImg"></span><span class="imMnMnTextLabel">Новости</span></span>
							</span>
						</a>
					</li><li id="imMnMnNode8" class="imMnMnLast">
						<a href="o_kompanii.html">
							<span class="imMnMnFirstBg">
								<span class="imMnMnTxt"><span class="imMnMnImg"></span><span class="imMnMnTextLabel">О компании</span></span>
							</span>
						</a>
					</li>
				</ul>
			</div>
			<div id="imContentGraphics"></div>
			<div id="imContent">
				<a id="imGoToCont"></a>
				<h2 id="imPgTitle">Доплата </h2>
				<div style="width: 912px; float: left;">
					<div id="imCell_166" class="imGrid[0, 0]"><div id="imCellStyleGraphics_166"></div><div id="imCellStyle_166"><div id="imTextObject_166">
						<div class="text-tab-content"  id="imTextObject_166_tab0" style="text-align: left;">
							<div class="text-inner">
								<div style="text-align: center;"><span class="fs16 cf1 ff1">Доплата за тариф "Единый Мульти"</span></div>
							</div>
						</div>
					</div>
					</div></div>
				</div>
				<div style="width: 912px; float: left;">
					<div id="imCell_167" class="imGrid[1, 1]"><div id="imCellStyleGraphics_167"></div><div id="imCellStyle_167"><img id="imObjectImage_167" src="images/line_small_i55m0978.png" title="" alt="" height="20" width="900" /></div></div>
				</div>
				<div style="width: 912px; float: left;">
					<div style="float: left; width: 130px;">
						<div style="height: 40px;"> </div>
					</div>
					<div style="float: left; width: 130px;">
						<div style="height: 40px;"> </div>
					</div>
					<div style="float: left; width: 392px;">
						<div id="imCell_204" class="imGrid[2, 2]"><div id="imCellStyleGraphics_204"></div><div id="imCellStyle_204"><div id="imHTMLObject_204" class="imHTMLObject" style=" overflow: auto; text-align: center;">
						<form name="ShopForm" method="POST" action="https://paymaster.ru/Payment/Init">
						<font face="Comic Sans MS" size="2">
						<input type="hidden" name="MERCHANT_ID" value="50f6484d-4dbe-4893-83ab-10ba61000d83">
						Номер договора*:

						"12 или 14 цифр"

						<input type="text" class="num" name="PAYMENT_NO" size="18" placeholder="12 или 14 цифр" maxlength="14" />
						

						Содержание заказа:


						<p>Тарифный план 1руб.</p>
						<input name="PAYMENT_AMOUNT" value="1" type="hidden">

						<input type="hidden" name="CURRENCY" value="RUB">
						<input type="hidden" name="PAYMENT_DESC" value="Оплата пакета каналов Ночной">
						<input type="submit" value="Оплатить">

						
</font></form> </div></div></div>
					</div>
					<div style="float: left; width: 260px;">
						<div style="height: 40px;"> </div>
					</div>
				</div>
				<div style="width: 912px; float: left;">
					<div style="height: 15px;"> </div>
				</div>
				<div id="imFooPad" style="height: 213px; float: left;"> </div><div id="imBtMn"><a href="index.html">Оплата </a> | <a href="kak-oplatit-trikolor-tv.html">Как оплатить</a> | <a href="kanaly.html">Каналы</a> | <a href="aktsii.html">Акции</a> | <a href="support.html">Служба поддержки </a> | <a href="novosti.php">Новости</a> | <a href="o_kompanii.html">О компании</a> | <a href="imsitemap.html">Главная Карта Сайта</a></div>				  
				<div class="imClear"></div>
			</div>
			<div id="imFooter">
				<div style="position: absolute; top: 17px; left: 441px; width: 42px; height: 31px; overflow: hidden;"><!-- Yandex.Metrika counter --><script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter32928629 = new Ya.Metrika({ id:32928629, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks");</script><noscript><div><img src="https://mc.yandex.ru/watch/32928629" style="position:absolute; left:-9999px;" alt="" /></div></noscript><!-- /Yandex.Metrika counter --></div>
			</div>
		</div>
		<span class="imHidden"><a href="#imGoToCont" title="Прочесть эту страницу заново">Назад к содержимому</a> | <a href="#imGoToMenu" title="Прочесть этот сайт заново">Назад к главному меню</a></span>
	
		<noscript class="imNoScript"><div class="alert alert-red">Чтобы использовать этот сайт, необходимо включить JavaScript</div></noscript>
	</body>
</html>


Почему-то не отображаются параметры, заданные в стиле incorrect-input. alert показывает, что класс цепляется к input'у но его настройки не отображаются. Если же я устанавливаю каждую настройку отдельно, то всё отрабатывается нормально.
То же самое и submit'ом.
причём, при проверке в Visual Studio и выкладывании части кода связанного как раз с изменением настроек контролов на другой сайт (IIS) всё работает нормально.

Что может мешать применению класса к контролу?
Ответ: Antonariy, спасибо, дружище! Это сработало!
Вопрос: CSS медиа запросы для интернет эксплорер виндоус 7

Доброе время суток Уважаемые друзья. пытаюсь сделать адаптивный дизайн для десктопа и мобильных устройств, тоесть если экран больше 400 пикселей подключаются стили для десктопа а если меньше то стили для мобильных устройств. Вроде во всех браузерах пашет кроме интернет эксплорер на виндоус 7.Пишу медиа запрос, и он просто не выполняется, но без медиа запроса все пашет хорошо. Основная идея, сделать фотку на весь экран на фон, а на фотку поместить разную информацию. Прописать фотку прямо из CSS не вариант, потому, что при обновлении страницы фотка будет меняться, поэтому принципиально фотка должна находиться в HTML (это я так думаю). Сможете подсказать в чем моя ошибка ? Может я что то не правильно делаю или что то упускаю?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="width-device-width, initial-scale=1.0" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="style.css"  media="all" type="text/css" rel="stylesheet"/>
<title>
</title>
</head>
<body>
 
<div class="wrapper">
<img src="2.jpg"  class="bgimg"/>
</div>
</body>
 
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@media screen and (min-width:400px) {
   body {
    background-color: green;
    
   }
   
   
   .bgimg{
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    border:0; 
   }
   .wrapper{
    position: relative;
    height: 200px;
    width: 200px;
    background-color: blue;
   }
}
Ответ: Burjuy164, медиазапросы так не пишутся. Пишется стиль исходно сайта, а потом медиазапросами, ограничивая сайт по максимальной ширине, адаптируете его.
CSS
1
2
3
4
5
6
7
8
9
10
// Основная таблица
@media all and (max-width:767px) {
// Таблица для экранов меньше 768 и больше 480px
}
@media all and (max-width:479px) {
// Таблица для экранов меньше 480 и больше 360px
}
@media all and (max-width:359px) {
// Заключительная таблица
}
И в каждую последующую таблицу пишут именно правки к основным стилям, для адаптации, а не отдельные таблицы для каждого типоразмера. Вы так с ума сойдёте сайты делать.

Не знаю какой у вас IE, у меня медиазапросы работают без проблем.
Вопрос: Не срабатывает @media правило

HTML5
1
2
3
4
5
6
7
8
9
10
11
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet"  type="text/css" href="./css/style.css" />
</head>
<body>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 * {
    padding : 0;
    margin : 0;
}
 
body {
    background : white;
}
 
@media screen and (max-width: 600px) {
    body {
        background-color: red;
    }
}
 
  @media screen and (max-width: 1024px) {
    body {
        background-color: blue;
    }
}
На планшета разрешение в браузере вертикально ширина 600, горизонтально ширина 1024, но фон белый при обоих случаях, путь к файлу указан правильно. Подскажите почему не срабатывает.
Ответ: Сработало вот так

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html> 
<html lang="en">
    <head> *
    <meta charset="UTF-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Document</title> 
    <style> 
        @media screen and (max-width: 1024px) { div { background-color: blue; }}
              @media screen and (max-width: 600px) { div { background-color: red;}} 
    </style> 
    </head>
    <body>
        <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            Ut earum, iure, enim assumenda, numquam itaque deserunt, magnam cum nisi expedita quia.
            Iure dolor, maiores facere eos fugiat nobis quasi voluptas.
        </div>
    </body>
    </html>
Вопрос: Помощи ищу: Javascript / CSS

Приветствую, коллеги!
Пытаюсь настроить под себя шаблоны толкового конструктора.
И столкнулся с проблемой, которую сам решить не могу.
 
Мне нужно задать размеры одной конкретной картинке на странице, ширину и высоту в пикселах - относительный размер в процентах для пропорционального масштабирования не годится.
 
Доступа к исходному коду страницы НЕТУ, но есть возможность внедрять кастомный CSS / жаваскрипт средствами конструктора.
 
Проблема в том, что я не могу описать эту картинку в CSS - выдаваемый сервером код не присваивает ей никаких уникальных и постоянных аттрибутов, которые можно было бы использовть в CSS! Все аттрибуты, которые присваиваются картинке и родительскому DIV - либо генерируются системой (т.е. меняют значения при перезагрузках), либо не являются уникальными для данного элемента. А вписать в шаблон свой собственный аттрибут, как я уже отметил, нет возиожности.
 
Есть единственный аттрибут, который удовлетворяет параметрам уникальности и неизменности - но он, собака, не явдяется ни классом, ни ID - а следовательно, насколько я понимаю, не может быть использован для описания элемента в CSS. Кроме того, этот аттрибут присваивается не самой картинке, а родительскому DIV: data-slide-url="gallery-description" (в приведенном коде выделен зеленым)  
 
при этом размер картинки должен устанавливатьсчя в зависимости от размера ркна браузера.
 
Насколько я понимаю, эта ситуация может быть обработана только скриптом, но тут я совершенный нуль. Может ли кто-нибудь помочь решить этот ребус?
 
Вот кусок кода:
 

Код:
 
 
<div class="slide sqs-gallery-design-strip-slide sqs-active-slide" data-slide-id="570836b92b8dde076f2016f4" data-slide-url="gallery-description" id="yui_3_17_2_28_1460187781722_544" data-type="image">
            <img data-src="" data-image="" data-image-dimensions="700x900" data-image-focal-point="0.5,0.5" data-load="false" style="" alt="" class="loaded" src="" data-image-resolution="750w">
             
</div>
 
 

 
Спасибо заранее!
Ответ: и все-таки пока немного ooops.
прошел все настройки блоков. Один странный глюк.
десктопная раскладка обрабатывается как часы.
а мобильная, при вроде бы таком же CSS, не обрабатывается при загрузке. При перерасчете размера окна - все работает. Например, на планшете - загрузил в ландшафте (благодаря размеру, грузится корректно работающая десктопная раскладка, не мобильная), перевернул в портрет - раскладка меняется на мобильную и всё рассчитывается как прописано; или на десктопе при масгтабировании окна - при сужении до заданных размеров происходит смена раскладки на мобильную с корректным перерасчетом блоков. А при загрузке - нет. На том же планшете при загрузке в портрете - загружается мобильная раскладка, но разметка блоков игнорируется. Если при этом перевернуть в ландшафт - перерассчитает на обычную раскладку, потом вернуть в портрет - вернет мобильную, но уже с корректным расчетом блоков.
 
Чего ему не хватает?
 
Вот два фрагмента кода, для десктопа и мобилы:
 
десктоп:

Код:
 
@media only screen and (max-height:1200px){.collection-type-gallery #slideshow{height:800px}.collection-type-gallery #slideshow .slide,.collection-type-gallery #slideshow .slide img{height: 800px;}#headerWrapper nav, #headerWrapper nav a, #mobileNav nav a, #mobileNav nav label {font-size: 14pt;}.site-title .logo {font-size: 40pt;}.logo-subtitle {font-size: 10pt;} #header, {padding-top: 10pt; padding-right: 60px; padding-bottom: 10pt; padding-left: 90px; }  
   
/*галерея-описание */
.collection-type-gallery #slideshow .slide div.image-description {background: white; opacity: 100; margin-left: 65px; padding-top: 0px; /* border-top: 1px solid black;*/ top: 0px;}
 
.collection-type-gallery #slideshow .slide div.image-description strong {font-size: 40pt; color: #bbbbbb; font-weight: normal; opacity: 100; }
 
.collection-type-gallery #slideshow .slide div.image-description p {font-size: 16pt; color: black; opacity: 100; padding-top:10px; padding-bottom: 0px; margin-bottom: 0px;}
 
#header, #footer {padding-top: 10pt; padding-right: 60px; padding-bottom: 5pt; padding-left: 85px; }
.sqs-footer-injection {padding-left: 85px;}
 
div[data-slide-url="gallery-description"] img {width: 500px;}  
}
 

 
мобила:

Код:
 
@media only screen and (max-width:800px){#slideshowWrapper.mobile-gallery #slideshow .slide .image-description {position: absolute; margin-top: 10px;}
 
#slideshowWrapper.mobile-gallery div#slideshow.sqs-gallery-design-strip div.sqs-wrapper div.slide[data-slide-url="gallery-description"] img {height: 300px !important;}    
     
/*галерея-описание */
.collection-type-gallery #slideshow .slide div.image-description {background: white; opacity: 100; margin-left: 35px; padding-right: 30px; padding-top: 0px; /* border-top: 1px solid black;*/ top: 0px;}
 
.collection-type-gallery #slideshow .slide div.image-description strong {font-size: 28pt; color: #bbbbbb; font-weight: normal; opacity: 100; }
 
.collection-type-gallery #slideshow .slide div.image-description p {font-size: 13pt; color: black; opacity: 100; padding-top:10px; padding-bottom: 0px; margin-bottom: 0px;}
 
#header, #footer {padding-top: 10pt; padding-right: 40px; padding-bottom: 5pt; padding-left: 85px; }
.sqs-footer-injection {padding-left: 63px;}
   
}
 

 
Добавлено:
 
 
Добавлено:
P.S. Вернул разговор р основную тему,
Вопрос: Responsive CSS на мобильном устройстве: не срабатывает при загрузке.

Был у меня вопрос по форматированию картинки под разные разрешения. На всякий случай, начало обсуждения тут:

Проблема решилась через чистый CSS.
Но небольшой ooops имеется.

Сайт - пока на триале, надо нажать кнопу и ввести предложенный код, простите за неудобства. Конструктор SquareSpace не дает доступа к исходному коду, но позволяет внедрять кастомный CSS и скрипты.

На сайте две раскладки: десктопная и мобильная.

Десктопная раскладка обрабатывается как часы.

А мобильная, при вроде бы такой же структуре CSS, не обрабатывается при загрузке. При перерасчете размера окна - все работает. Например, на планшете - загрузил в ландшафте (благодаря размеру, грузится корректно работающая десктопная раскладка, не мобильная), перевернул в портрет - раскладка меняется на мобильную и всё рассчитывается как прописано; или на десктопе при масштабировании окна - при сужении до заданных размеров происходит смена раскладки на мобильную с корректным перерасчетом блоков. Если на десктопе перегрузить узкое окно "телефонных" размеров, то загрузится мобильная раскладка без перерасчета. Но если после этого изменить размеры окна до десктопного, а потом вернут к телефонному - то всё перерассчитается. Но на том же планшете при загрузке в портрете - загружается мобильная раскладка, но разметка блоков игнорируется. Если при этом перевернуть в ландшафт - перерассчитает на обычную раскладку, потом вернуть в портрет - вернет мобильную, но уже с корректным расчетом блоков. На телефоне еще хуже: поскольку, из-за размеров экрана, грузится только мобильная раскладка - корректного рассчета блоков не происходит никогда, как его ни крути.

Чего ему не хватает?

Масштабироваться дожна КАРТИНКА, описываемая в коде как div.slide[data-slide-url="gallery-description"] img {...} (так много обвеса - чтобы победить приоритет оригинального кода), на десктопе проще - собственно минимально-достаточный уникальный идентификатор элемента div[data-slide-url="gallery-description"] img {...}

Вот два фрагмента кода, для десктопа и мобилы (блоков под разные размеры там много, но они типовые):

десктоп:
@media only screen and (max-height:1200px){.collection-type-gallery #slideshow{height:800px}.collection-type-gallery #slideshow .slide,.collection-type-gallery #slideshow .slide img{height: 800px;}#headerWrapper nav, #headerWrapper nav a, #mobileNav nav a, #mobileNav nav label {font-size: 14pt;}.site-title .logo {font-size: 40pt;}.logo-subtitle {font-size: 10pt;} #header, {padding-top: 10pt; padding-right: 60px; padding-bottom: 10pt; padding-left: 90px; } 
  
/*галерея-описание */
.collection-type-gallery #slideshow .slide div.image-description {background: white; opacity: 100; margin-left: 65px; padding-top: 0px; /* border-top: 1px solid black;*/ top: 0px;}

.collection-type-gallery #slideshow .slide div.image-description strong {font-size: 40pt; color: #bbbbbb; font-weight: normal; opacity: 100; }

.collection-type-gallery #slideshow .slide div.image-description p {font-size: 16pt; color: black; opacity: 100; padding-top:10px; padding-bottom: 0px; margin-bottom: 0px;}

#header, #footer {padding-top: 10pt; padding-right: 60px; padding-bottom: 5pt; padding-left: 85px; }
.sqs-footer-injection {padding-left: 85px;}

div[data-slide-url="gallery-description"] img {width: 500px;}  
}


мобила:
@media only screen and (max-width:800px){#slideshowWrapper.mobile-gallery #slideshow .slide .image-description {position: absolute; margin-top: 10px;}

#slideshowWrapper.mobile-gallery div#slideshow.sqs-gallery-design-strip div.sqs-wrapper div.slide[data-slide-url="gallery-description"] img {height: 300px !important;}   
    
/*галерея-описание */
.collection-type-gallery #slideshow .slide div.image-description {background: white; opacity: 100; margin-left: 35px; padding-right: 30px; padding-top: 0px; /* border-top: 1px solid black;*/ top: 0px;}

.collection-type-gallery #slideshow .slide div.image-description strong {font-size: 28pt; color: #bbbbbb; font-weight: normal; opacity: 100; }

.collection-type-gallery #slideshow .slide div.image-description p {font-size: 13pt; color: black; opacity: 100; padding-top:10px; padding-bottom: 0px; margin-bottom: 0px;}

#header, #footer {padding-top: 10pt; padding-right: 40px; padding-bottom: 5pt; padding-left: 85px; }
.sqs-footer-injection {padding-left: 63px;}
  
}


что упущено?
Ответ: !!!!
разобрался.
В погоне за увеличением веса идентификаторов набрал их слишком много. Упростил конструкцию описания до необходимого минимума - заработало как надо. Не очень понял, почему не работало в том виде как было записано - описание соверенно корректное, ну и хрен с ним.

Удалил бы тему, но не нашел, как
Вопрос: не могу подключить css

index.php

CODE (htmlphp):

  1. <html>
  2. <head>
  3. <title> Проба <title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <link rel="stylesheet" type="text/css" href="/dacha/style.css"/>
  6.  
  7. </head>
  8. <body>
  9.  Это работает1!!!
  10. <?php
  11.  
  12. echo "Это работает2!!!"
  13.  
  14.  
  15. ?>
  16. </body>
  17. </html>



ничего не меняется



style.css

CODE (htmlphp):

  1. <STYLE type="text/css">
  2. body {background:black; font-size:9pt; color:red; font-family:Arial Black}
  3.         .base{color: blue; font-style: italic}
  4.         h1 {color: white}
  5.         #bold {font-weight: bold}
  6.        
  7.  
  8. </STYLE>


Отредактировано модератором: Мелкий, 08 Января, 2013 - 12:10:51
Ответ:
Такая же фигня.
<link rel="styleshee" type="text/css" href="css/style.css" media="screen" />


<title>Интернет магазин</title>
</head>

<body>
<div id="bloc-body">
#bloc-body
{
width: 1035px;
height: 600px;
border: 5px solid black;
margin: 0 auto;
}

reset сбрасывает но style не подключается
Вопрос: Используя только CSS добавить анимацию при наведении

Доброе время суток.

делая резиновую таблицу пытался сделать следующее:

Нужно сделать таблицу 4*4.-сделал
использовать только блочные элементы (не табличная верстка);-сделал
предложить два варианта верстки подобной таблицы;-1 вариант
таблица должна быть «резиновой» с максимальным значением в 1600px по ширине и минимальным – 600px;сделал только 600
используя только CSS добавьте анимацию при наведении (на свой вкус: подсветка ячейки/анимация текста)

подскажите как сделать остальное...

исходники выложил

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
 
<html>
    <head>
        <title>Резиновая таблица</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" href="newcss.css" type="text/css"> 
    </head>
    <body> 
        <div> 
            <table>
 <thead>
 <tr>
 <th>Payment</th>
 <th>Issue Date</th>
 <th>Amount</th>
 <th>Period</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td data-label="Payment">Payment #1</td>
 <td data-label="Issue Date">02/01/2015</td>
 <td data-label="Amount">$2,311</td>
 <td data-label="Period">01/01/2015 - 01/31/2015</td>
 </tr>
 <tr>
 <td data-label="Payment">Payment #2</td>
 <td data-label="Issue Date">03/01/2015</td>
 <td data-label="Amount">$3,211</td>
 <td data-label="Period">02/01/2015 - 02/28/2015</td>
 </tr>
 <tr>
 <td data-label="Payment">Payment #3</td>
 <td data-label="Issue Date">04/01/2015</td>
 <td data-label="Amount">$4,311</td>
 <td data-label="Period">03/01/2015 - 03/28/2015</td>
 </tr>
 </tbody>
</table>
  </div>
    </body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 body {
 font-family: arial;
 }
 
 table {
 border: 1px solid #ccc;
 width: 100%;
 margin: 0;
 padding: 0;
 border-collapse: collapse;
 border-spacing: 0;
 }
 
 table tr {
 border: 1px solid #ddd;
 padding: 5px;
 }
 
 table th,
 table td {
 padding: 10px;
 text-align: center;
 }
 
 table th {
 text-transform: uppercase;
 font-size: 14px;
 letter-spacing: 1px;
 }
 
 @media screen and (max-width: 600px) {
 table {
 border: 0;
 }
 table thead {
 display: none;
 }
 table tr {
 margin-bottom: 10px;
 display: block;
 border-bottom: 2px solid #ddd;
 }
 table td {
 display: block;
 text-align: right;
 font-size: 13px;
 border-bottom: 1px dotted #ccc;
 }
 table td:last-child {
 border-bottom: 0;
 }
 table td:before {
 content: attr(data-label);
 float: left;
 text-transform: uppercase;
 font-weight: bold;
 }
 }
Ответ: flashcsgroup, Ширину таблицу? Просто в ваших стилях замените
CSS
1
2
3
table {
width: 100%
}
на

CSS
1
2
3
table{
width: 1600px;
}
Надеюсь я вас правильно понял, а анимацию я уже вам показал пример