ShootingStar

Увидел что человек из курсов tutsplus использовал ZendCoding в реальном времени(панелька снизу в которую он писал zendcod и он сразу превращался в html код), подскажите как вызвать эту панельку.

Здравствуйте, использывал карусель от бутстрепа, нравилось то что можно было вставлять картинки большего формата и карусель автоматом уменьшала их. bootstrap 2.0.1: bootstrap 2.0.2: Не могу найти и за чего карусель увеличилась. Если знаете подобную карусель которая умеет уменьшать картинку подскажите пожалуйста. код страници где вставлена карусель: Changelog v 2.0.2 CSS файл версии 2.0.1

такой вариант подойдет? Да, спасибо.

Сработает, но только когда картинки являются обобщенными родственными элементами: <div> <img src="image/cont-img1.jpg" alt="" width="201" height="103"> <hr /> <img src="image/back.png" alt="" width="20" height="22"> <a href="#">Back</a></div>Если картинки не обобщенные родственные элементы, а используется нижеприведенный код <div class="left-panel"> <a href="#"><img src="image/cont-img1.jpg" alt="" width="201" height="103"></a> <hr /> <a href="#"><img src="image/back.png" alt="" width="20" height="22"></a> <a href="#">Back</a></div>то в этом случае обобщенными родственными элементами будут теги a, и тогда надо использовать .left-panel a ~ a img{} ссылка .left-panel a ~ a img{} - круть Сама страница Написал такие стили для hr: <div class=left-panel> <a href="#"><img class=preview-left src="image/cont-img1.jpg" alt="" width=201 height=103></a> <hr/> <a href="#"><img class=back-img src="image/back.png" alt="" width=20 height=22></a> <a href="#">Back</a> </div> .left-panel hr { margin: 0 0 13px 17px; border: 0; background: url("../image/line.png") repeat-x; } В файрфоксе виден hr, а в опере и хроме нет. Может есть способ оптимизировать под все браузеры? Поставил height:1px; и стало видно. Catherine если я вам еще не надоел, можете подсказать как снять стили с .active в меню? Когда наводят на другие элементы в меню. <div class=topnav> <ul> <li><a href="#" class=active>home</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">webhosting</a></li> <li><a href="#">about</a></li> </ul> </div> .topnav ul li a:hover, .topnav ul li .active { background: url("../image/menu_bg.png") repeat-x; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; -o-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; }

Если картинки разделяет </hr>, можно использовать селектор обобщенных родственных элементов: .left-panel img ~ img{} Пожалуйста .left-panel img ~ img{} - тоже не сработало.

.left-panel img + img{} - не работает, потому что картинки раздлеляет <hr /> .left-panel a:first-child img - вот это подошло, спасибо.

Извиняюсь за не точную формулировку, хотелось что бы свойства убирались когда наводились на другие li. Тойсть когда наводят на другой ли, убирается фон у .active. Возникла проблема с выборкой селекторов. Есть картинки, к одной нужно сделать border. Цеплять класс думаю это не очень правильно. Пытался выбрать такими способами: .left-panel img img{} - что бы сбросить бордер и задать свойства второй картинке .left-panel img:first-child{} - что бы задать только первой Код: <div class="left-panel"> <a href="#"><img src="image/cont-img1.jpg" alt="" width="201" height="103"></a> <hr /> <a href="#"><img src="image/back.png" alt="" width="20" height="22"></a> <a href="#">Back</a> </div> .left-panel img{ margin: 0 0 19px 23px; border: 3px solid #000; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }

Сделал вот так Вопрос по поводу меню, можно ли с помощью цсс убирать свойства класса active когда навели на элемент? <div class="topnav"> <ul> <li><a href="#" class="active">home</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">webhosting</a></li> <li><a href="#">about</a></li> </ul> </div> .topnav { margin: 0 164px 0 0; float: right; } .topnav ul { margin: 0 auto; overflow: hidden; padding: 0; } .topnav ul li { float: left; } .topnav ul li a { display: block; float: left; width: 100px; color: #ffffff; padding: 51px 0 9px 0; text-align: center; font: bold 16px Rockwell; text-decoration: none; } .topnav ul li a:hover,.topnav ul li .active { background: url("../image/menu_bg.png") repeat-x; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; -o-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; }

Может поможет: один, два, три css код можно увидеть файрбагом в разделе head

Здравствуйте, верстаю учебный урок №2. Думаю вот так разметить блок: Подскажите как правильней. Чистый скриншот если кто-то захочет нарисовать свою разметку:

то стили бы применились только для text1.Тут я с вами поспорю, стили применятся ко всем соседним li (кроме .text1) которые являются детьми .listhttp://jsfiddle.net/ShootingStar/6NaVG/Свойство color наследуется, поэтому для всех потомков .text2, цвет текста тоже будет красный. А потомками для .text2 являются list2, subtext1, subtext2. Попробуйте задать ненаследуемое свойство, такое как border и увидите сами, что произойдет. http://jsfiddle.net/ShootingStar/6NaVG/1/ , .text1 все равно не при делах.

то стили бы применились только для text1. Тут я с вами поспорю, стиль применятся ко всем соседним li (кроме .text1) которые являются детьми .list Пример: http://jsfiddle.net/ShootingStar/6NaVG/

Значит я правильно делал, спасибо за помощь.

ок, 33 пикселя это отступ который задан в макете: Так и должно быть что оно не впритык к верхней границы? http://dl.dropbox.com/u/10878241/temp/index.html

Замерять нужно затем, что если я поставлю отступ в 33px как на шаблоне, то он “cплюсуется” с тем что есть и будет 33+11= 44px отступ. У картинки есть свойство float:left, ну вот без нее: <header class="header"> <div class="wrap"> <!--<div class="logoimg"><a href=""></a></div>--> <h1 class="logo"><a href="#">Environmental.com</a></h1> <h2 class="slogan">site slogan here</h2> <div class="support">Help Line 24 /7 Support 1800 3246 345</div> </div> </header> .header { height: 113px; width: 100%; background: url("../image/header-bg.png") repeat-x; } .wrap { position: relative; width: 1024px; margin: 0 auto; height: 100%; } /*.logoimg { float: left; margin: 32px 0 0 50px; width: 48px; height: 47px; background: url("../image/logo.png") no-repeat; } .logoimg a { display: block; width: 48px; height: 47px; }*/ .logo a { float: left; /*margin: 23px 0 0 16px;*/ font: 31px 'Century Gothic', Tahoma, Sans-serif; color: #ffffff; text-decoration: none; } Не по теме: На этом форуме отключены ЛС?

Использую /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ Там прописано h1{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } но всеравно отступ был.

<div class="gradient"></div> .gradient { width: 500px; height: 500px; background-color: #2F2727; background-position: center center; background-repeat: no-repeat; background: -webkit-radial-gradient(circle, #1a82f7, #2F2727); background: -moz-radial-gradient(circle, #1a82f7, #2F2727); background: -ms-radial-gradient(circle, #1a82f7, #2F2727); background: -o-radial-gradient(circle, #1a82f7, #2F2727); background: radial-gradient(circle, #1a82f7, #2F2727); }

Написал вот такое: <header class="header"> <div class="wrap"> <div class="logoimg"><a href=""></a></div> <h1 class="logo"><a href="#">Environmental.com</a></h1> </div> </header> .header { height: 113px; width: 100%; background: url("../image/header-bg.png") repeat-x; } .wrap { position: relative; width: 1024px; margin: 0 auto; height: 100%; } .logoimg { float: left; margin: 32px 0 0 50px; width: 48px; height: 47px; background: url("../image/logo.png") no-repeat; } .logo a { font: 31px 'Century Gothic', Tahoma, Sans-serif; color: #ffffff; text-decoration: none; } И почему то сразу есть отсуп: Правил для a или h1 кроме моих не задано. Если мне нужно задать отступ в 33px, то я делаю скрин браузера, меряю сколько он поставил отступ и отнимаю это число от 33. Подскажите пожалуйста как правильно задавать отступы.

Сделал этот же макет только фиксированный: link. Автор использует для позиционирования логотипа position:absolute, что лучше использовать для позиционирования position:absolute или же float:left и потом margin?

Да со стандартными, у Вас по другому разве? Список плагинов.

Нашел что-то подобное Reformat Code в WebStorm. Тут сам плагин или можно вписать в Package Control - Tag. Ctrl + alt + f для форматировки html кода. Кто-то настроил нормально автокомплит css свойств? Если нажать Ctrl + space и выбрать допустим свойство height, то редактор напишет просто height. Если после этого еще раз нажать Ctrl+space и снова выбрать heigh то он добавит : и ; Хотелось бы что бы сразу ставил : ;

Как работает Sublime Alignment? Установил плагин с помощью Package Control, выделаю код: <ul> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> <li><a href="#">Solutions</a></li> <li><a href="#">Price List</a></li> <li><a href="#">Contact</a></li> <li><a href="#">FAQ</a></li> </ul> Нажимаю ctr+alt+a (как написали разработчики тут) и ничего не происходит.

Все что я нашел по этому селектору: h4[class~="example"] { color: blue } или a[title~="hd digital"] { text-decoration:none} То есть должен быть какой-то атрибут что бы использовать "~". h4[class~="top-h"] { color: blue } Я правильно Вас понял?

<div id="bottom-center"> <h4>Nullam vitae leo vel pede sollicitudin suscipit</h4> <p>Nulla in velit nec metus pharetra bibendum. </p> <h4>Nullam vitae leo vel pede sollicitudin suscipit</h4> <p>Nulla in velit nec metus pharetra bibendum.</p> </div> #bottom-center h4{ color: #fff; } #bottom-center h4 + h4{ color: #a5bc79; } При такой разметке, цвет обоих <h4> будет белым, h4 + h4 работает только если они рядом, тойсть вот так: <h4>Nullam vitae leo vel pede sollicitudin suscipit</h4> <h4>Nullam vitae leo vel pede sollicitudin suscipit</h4>

Здравствуйте, верстаю шаблон для новичков . Я хотел дать шрифту который побольше <h4> и применить к нему стиль, но так как там нужно давать два разных стиля для <h4>, этот вариант не подходит. Как правильно применить стиль для этого текста? Дать абзацам класс или можно сделать правильную выборку?