Светлана Г.

Вот страница с проблемой. Этого достаточно?

Нашла решение: body:after { content:''; display: block; height: 50px; }

Все равно фотки меняют пропорции. Может есть какие-то другие решения?

Вот здесь верстка: http://lustshop.biz/

Вот: http://lustshop.biz/

Если убрать у html указание высоты - работает. Но разве так правильно?

Не помогло - также искажается картинка.

Да, точно! А если бы они были разного размера, можно сделать их одинаковой высоты?

Не работает, как только содержимого становится больше, чем 100%. Что можно еще сделать?

Здравствуйте! Нашла вот такой пример верстки фотогалереи, подстраивающейся под разную ширину экрана. http://themeforest.net/item/tongtiew-travel-agency-html5-responsive-template/full_screen_preview/6542247 Но не могу понять, что нужно сделать, чтобы картинки были одинаковой высоты? Вроде нет никаких специальных стилей, а они одинаковые...

Это видимо, из-за таких стилей, которые сгенерил генератор: /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4Y2JkNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUlIiBzdG9wLWNvbG9yPSIjZTljYmQ1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTMlIiBzdG9wLWNvbG9yPSIjZTVjNmNlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjZTRjMGNhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDMlIiBzdG9wLWNvbG9yPSIjZTFiZGM3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTIlIiBzdG9wLWNvbG9yPSIjZTBiYWM1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTglIiBzdG9wLWNvbG9yPSIjZTBiOGMzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzMlIiBzdG9wLWNvbG9yPSIjZGNiMGJkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzglIiBzdG9wLWNvbG9yPSIjZGJhZGJhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iODklIiBzdG9wLWNvbG9yPSIjZGFhYWI2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5YWFiNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, rgba(232,203,212,1) 0%, rgba(233,203,213,1) 5%, rgba(229,198,206,1) 13%, rgba(228,192,202,1) 25%, rgba(225,189,199,1) 43%, rgba(224,186,197,1) 52%, rgba(224,184,195,1) 58%, rgba(220,176,189,1) 73%, rgba(219,173,186,1) 78%, rgba(218,170,182,1) 89%, rgba(217,170,182,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,203,212,1)), color-stop(5%,rgba(233,203,213,1)), color-stop(13%,rgba(229,198,206,1)), color-stop(25%,rgba(228,192,202,1)), color-stop(43%,rgba(225,189,199,1)), color-stop(52%,rgba(224,186,197,1)), color-stop(58%,rgba(224,184,195,1)), color-stop(73%,rgba(220,176,189,1)), color-stop(78%,rgba(219,173,186,1)), color-stop(89%,rgba(218,170,182,1)), color-stop(100%,rgba(217,170,182,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(232,203,212,1) 0%,rgba(233,203,213,1) 5%,rgba(229,198,206,1) 13%,rgba(228,192,202,1) 25%,rgba(225,189,199,1) 43%,rgba(224,186,197,1) 52%,rgba(224,184,195,1) 58%,rgba(220,176,189,1) 73%,rgba(219,173,186,1) 78%,rgba(218,170,182,1) 89%,rgba(217,170,182,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(232,203,212,1) 0%,rgba(233,203,213,1) 5%,rgba(229,198,206,1) 13%,rgba(228,192,202,1) 25%,rgba(225,189,199,1) 43%,rgba(224,186,197,1) 52%,rgba(224,184,195,1) 58%,rgba(220,176,189,1) 73%,rgba(219,173,186,1) 78%,rgba(218,170,182,1) 89%,rgba(217,170,182,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(232,203,212,1) 0%,rgba(233,203,213,1) 5%,rgba(229,198,206,1) 13%,rgba(228,192,202,1) 25%,rgba(225,189,199,1) 43%,rgba(224,186,197,1) 52%,rgba(224,184,195,1) 58%,rgba(220,176,189,1) 73%,rgba(219,173,186,1) 78%,rgba(218,170,182,1) 89%,rgba(217,170,182,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(232,203,212,1) 0%,rgba(233,203,213,1) 5%,rgba(229,198,206,1) 13%,rgba(228,192,202,1) 25%,rgba(225,189,199,1) 43%,rgba(224,186,197,1) 52%,rgba(224,184,195,1) 58%,rgba(220,176,189,1) 73%,rgba(219,173,186,1) 78%,rgba(218,170,182,1) 89%,rgba(217,170,182,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8cbd4', endColorstr='#d9aab6',GradientType=0 ); /* IE6-8 */ Если это все убрать - то фон однородный. Надо почистить от лишнего. Лучше сделаю картинкой фон! Прописывала и для body - также. wwt, спасибо большое за помощь! Оставлю вариант: min-height: 95%; margin-bottom: 5%;

- сработало!

Здравствуйте! Вот такая задача. Низ макета имеет тень и выглядит так:. Как это сверстать? У меня получается так, что тень не видна: Стили и код: @boxshadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.43);html { height:100%; font-family:Arial, Helvetica, sans-serif; font-size:12px; background: rgb(232,203,212);}body{ height:100%; margin:0;}#wrapper { position: relative; min-height:100%; max-width: 814px; /*overflow:hidden;*/ background-color: #f0e5e4; margin:auto; box-shadow: @boxshadow;}@media (max-width: 480px) {header {position: absolute;height: 30%;width: 100%;}}<!DOCTYPE html><!--[if lte IE 8]><html class="ie8" lang="ru"><![endif]--><!--[if gt IE 9]><html lang="ru"><![endif]--><!--[if !IE]>--><html lang="ru"><!--<![endif]--> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link type="text/css" rel="stylesheet" href="style.css" /> <title>lustshop.biz</title> </head> <body> <div id="wrapper" class="clearfix"> <header> <img src="/img/headerBg.jpg" alt=""> <nav id="menu"> <ul> <li><a href="#">Каталог</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">Доставка</a></li> <li><a href="#">Размеры</a></li> <li><a href="#">О нас</a></li> </ul> </nav><!-- /#menu --> </header> </div><!-- /#wrapper --> </body></html>Также обращаю внимание на то, что мне важно указывать высоту #wrapper, так высота header рассчитывается от общей высоты контейнера.

Спасибо, буду изучать ).

Здравствуйте! Заинтересовало меня вот такое подстраивание изображений под размеры окна: _http://www.yootheme.com/demo/joomla/subway Как это сделано? С помощью js? PS: к сожалению, ссылка не ведет напрямую... Но если выбрать Moreno - то, что нужно. Вообще, сайтов с таким способом подстраивания встречается много. Вот скриншот:

Первое, что пришло в голову: использовать position:absolute; только для формирования выступающей части пункта меню с помощью псевдоэлемента :before; вообще, хорошо бы увидеть левую часть макета - то, что слева от меню.

Блоку, стоящему за с position:absolute;, задать поля с учетом размеров этого блока.

Потому что блок с position:absolute; вырван из потока и о его существовании, а также о его размерах никакие другие блоки не могут ничего знать.

Нашла для себя подходящий вариант: WebMatrix + расширение OrangeBits Compiler. После соответствующей настройки этого расширения автоматом компилируется из .less в .css. Есть подсветка синтаксиса, отслеживаются ошибки.

Пока не знаю, но работать с командной строкой для меня непривычно.

Заработало в FF. wwt, спасибо за помощь!

Зачем это, если плавающий элемент все равно будет иметь display:block; ?

Нет, в FF тоже не работает. Также запускала через WebMatrix - не работает.

Здравствуйте! Начала изучать less... И тут же проблема: не отрабатывается .less, выдаются ошибки: XMLHttpRequest cannot load file:///E:/LESS/styles.less. Cross origin requests are only supported for HTTP. index.html:1 Uncaught NetworkError: A network error occurred. less-1.5.0.min.js:11 Вот так подключаю: <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less-1.5.0.min.js" type="text/javascript"></script> Что я делаю не так?

footer{clear:both;}