Светлана Гр.

Оттачивайте свое мастерство, а о скорости не нужно думать. Я сама начинала с курсов HTML 6 лет назад. Тоже никто не хотел брать на работу: возраст, нет опыта и т.п. Потом подвернулась одна работа, за ней другая. Работаю... Хороший специалист нужен всегда! Главное - настойчиво идите к своей цели, совершенствуйтесь в своих знаниях. И люди это оценят! Поверьте!

Здравствуйте! На странице размещаю видео: <iframe width="304" height="183" src="http://www.youtube.com/embed/ccOx041__PE" frameborder="0"></iframe> При этом, на странице используется lightbox для показа увеличенной картинки. В IE проблема: видео находится поверх затемненного фона. Можно это как-то исправить?

Может быть воспользоваться другим сервисом? Подскажите, пожалуйста, таковой.

А эта ссылка и есть наша заставка.

Здравствуйте! Размещаю на сайте видео через сервис: http://flv-mp3.com/ru/flv/ Не показывается наша заставка. В чем проблема? Код такой: <object type="application/x-shockwave-flash" data="http://flv-mp3.com/i/pic/uflvplayer_500x375.swf" height="495" width="880"> <param name="bgcolor" value="#FFFFFF" /> <param name="allowFullScreen" value="true" /> <param name="allowScriptAccess" value="always" /> <param name="movie" value="http://flv-mp3.com/i/pic/uflvplayer_500x375.swf" /> <param name="FlashVars" value="way=http://www.protontonnel.ru/video/pts_2_2.flv&swf=http://flv-mp3.com/i/pic/uflvplayer_500x375.swf&w=880&h=495&pic=http://www.protontonnel.ru/video/video_block.jpg&autoplay=0&tools=1&skin=white&volume=70&q=1&comment=" /> </object>

Да, я думала об этом.

Здравствуйте! Нужно сверстать такую таблицу со скроллбаром. Пока не получается ограничить высоту содержимого, чтобы получилась прокрутка. HTML: <section class="prop_2"> <h3>Вес и количество:</h3> <div class="sectionInner2"> <div class="sectionInner"> <div class="detailsProp"> <div class="detailsPropHeader"> <div class="detailsPropRow"> <div class="detailsPropCell">Размер</div> <div class="detailsPropCell">Цена</div> <div class="detailsPropCell">Количество</div> </div><!--/.detailsPropRow--> </div><!--/.detailsPropHeader--> <div class="scroll-pane1"> <div class="detailsPropRow"> <div class="detailsPropCell">5 кг</div> <div class="detailsPropCell">1000 р.</div> <div class="detailsPropCell">5</div> </div><!--/.detailsPropRow--> <div class="detailsPropRow"> <div class="detailsPropCell">15 кг</div> <div class="detailsPropCell">2000 р.</div> <div class="detailsPropCell">31</div> </div><!--/.detailsPropRow--> <div class="detailsPropRow"> <div class="detailsPropCell">10 кг</div> <div class="detailsPropCell">1500 р.</div> <div class="detailsPropCell">10</div> </div><!--/.detailsPropRow--> <div class="detailsPropRow"> <div class="detailsPropCell">5 кг</div> <div class="detailsPropCell">500 р.</div> <div class="detailsPropCell">1</div> </div><!--/.detailsPropRow--> </div><!--/.scroll-pane--> </div><!--/.detailsProp--> </div><!--/.sectionInner--> </div><!--/.sectionInner2--> </section><!--/.prop_2--> CSS: .detailsProp{ display:table; width:100%; font-size:14px; } .detailsProp .scroll-pane1{ display:table-row-group; max-height:100px; overflow:auto; } .detailsPropHeader{ display:table-header-group; background:#e0e4e5; } .detailsPropRow{ display:table-row; } .detailsPropCell{ display:table-cell; padding:13px 16px; } .detailsPropHeader .detailsPropCell{ padding:8px 16px 9px; }

Все сделала в точности с Вашим примером. Получилось. Спасибо огромное! )

Да, я видела Ваше решение. Пока не разобралась. А не могли бы Вы объяснить Ваше решение на примере уже моей верстки?

Вот здесь находится страница: http://gardenflo.ru/salon/vnutr2_responsive.html Не обращайте внимание на кодировку - кривые настройки сервера.

На сервере тоже исправила.

Я поняла. Попробую. Сделала у себя локально. Сработало. Спасибо огромное!

Страница здесь: http://gardenflo.ru/salon/vnutr2_responsive.html На кодировку не обращайте внимание - настройки сервера кривые.

Если заменить высоту на минимальную: html{ min-height:100%; } то фон растягивается на всю высоту. Странно... Хорошо, сейчас размещу.

Не помогло. Вот смотрю хороший пример: http://alistapart.com/article/supersize-that-background-please Там в body фон.

Сверстала. Почему-то картинка не растягивается на всю высоту. Здесь скриншот: ссылка на изображение, размер: 150 кбайт, 1024 x 517 точек Размер исходного изображения:1200px*669px; CSS html{ height:100%; min-width:960px; font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#fff; } body{ height:100%; margin:0; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='scale')"; } .w100{ width:100%; } .w655{ width:655px; margin:auto; } .w940{ width:940px; margin:auto; } #wrapper{ height:100%; margin:auto; } #main{ min-height:100%; margin:0 0 -214px; } #inner #main{ margin-bottom:-150px; } #all{ padding:0 0 214px; /*min-height:350px;*/ } #inner #all{ padding:0 0 150px; } header{ position:relative; padding:38px 0 0; height:147px; background:rgba(0, 0, 0, .65); } .sale{ font-size:18px; } #cntr{ margin:0 194px; } .nameComp{ position:absolute; display:inline-block; width:93px; height:27px; background: url(name.png) no-repeat; text-indent:-9999em; } .center{ text-align:center; } .left{ float:left; } .right{ float:right; } #menu_l{ float:left; width:194px; text-align:right; } #menu_r{ float:right; width:194px; } #logo{ width:182px; height:123px; background: url(logo.png) no-repeat; margin:auto; } #logo a{ display:block; height:123px; text-decoration:none; text-indent:-9999em; overflow:hidden; } #header_c{ overflow:hidden; width:655px; margin:auto; } header nav ul{ line-height:24px; } header nav a{ font-family: 'Didact Gothic', sans-serif; color:#fff; font-size:11px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; text-decoration:none; } header nav a:hover{ text-decoration:underline; } header nav a.active{ color:#bedb00; } #footer{ height:214px; overflow:hidden; } #inner #footer{ height:150px; } .strip{ background:rgba(0, 0, 0, .65); } #content{ margin-top:75px; } HTML <body id="inner" style="background-image:url(maneBg_2.jpg); background-position:0 100%;"> <div id="wrapper" class="w100"> <div id="main"> <div id="all"> <header class="strip"> <div id="header_c"> <nav id="menu_l"> <ul> <li><a href="#">Парикмахерский зал</a></li> <li><a href="#">Ногтевой сервис</a></li> <li><a href="#">Косметология</a></li> <li><a href="#">Массаж</a></li> </ul> </nav><!-- /#menu_l --> <nav id="menu_r"> <ul> <li><a href="#">Солярий</a></li> <li><a href="#">Контакты</a></li> <li><a href="#" class="active">Наши работы</a></li> <li><a href="#">Главная</a></li> </ul> </nav><!-- /#menu_r --> <div id="cntr"> <div id="logo"><a href="/">Салон красоты</a></div> </div><!-- /#cntr --> </div><!-- /#header_c --> </header> <div id="content" class="w940 clearfix"> <h1>Наши работы</h1> <div id="carousel_wrapper" class="clearfix"> <div class="es-carousel"> <ul id="mycarousel" class="jcarousel-skin-tango"> <li><figure><a href="#"><img src="thumb_.jpg"></a></figure></li> <li><figure><a href="#"><img src="thumb_.jpg"></a></figure></li> <li><figure><a href="#"><img src="thumb_.jpg"></a></figure></li> <li><figure><a href="#"><img src="thumb_.jpg"></a></figure></li> <li><figure><a href="#"><img src="thumb_.jpg"></a></figure></li> <li><figure><a href="#"><img src="thumb_.jpg"></a></figure></li> <!--<li><figure><a href="#"><img src="thumb_.jpg"><span class="stroke"></span></a></figure></li> <li><figure><a href="#"><img src="thumb_.jpg"><span class="stroke"></span></a></figure></li> <li><figure><a href="#"><img src="thumb_.jpg"><span class="stroke"></span></a></figure></li> <li><figure><a href="#"><img src="thumb_.jpg"><span class="stroke"></span></a></figure></li> <li><figure><a href="#"><img src="thumb_.jpg"><span class="stroke"></span></a></figure></li>--> </ul> <!--<a href="#" id="prev">Назад</a> <a href="#" id="next">Вперед</a>--> </div> </div><!-- /#carousel_wrapper --> <p>jjjj</p> <p>jjjj</p> <p>jjjj</p> <p>jjjj</p> <p>jjjj</p> <p>jjjj</p> <p>jjjj</p> <p>jjjj</p> <p>jjjj</p> <p>jjjj</p> </div><!-- /#content --> </div><!-- /#all --> </div><!-- /#main --> <div id="footer"> <article class="center txtStyle_1 w655"> <article> <span class="tel_f">+7(499) 123 45 67</span> </article> </article> <footer class="w655"> <small> <span class="elem"> </span> <p class="center">2013, Салон красоты Криstyle</p> </small> </footer> </div><!-- /#footer --> </div><!-- /#wrapper --> </body>

Был такой вариант. Но мне не нравится то, что у этого блока будет фиксированная высота. Т.е. постоянно надо помнить об этом. Неудобно.

Проблема в том, где и как расположить этот полупрозрачный блок. Трудность в том, что футер прижимается к низу. Как верстать полупрозрачный блок я знаю, можно обойтись и без картинки/

Текст нужен! И не alt, а title тоже рекомендуется прописать.

Здравствуйте! Есть такой макет: ссылка на изображение, размер: 143 кбайт, 1024 x 641 точек Задача состоит в том, как сверстать большой полупрозрачный блок. Я использую верстку с прижатым футером. Код: <body id="inner"> <div id="wrapper" class="w100" style="background-image:url(maneBg_2.jpg); background-position:0 0;"> <div id="main"> <div id="all"> <header class="strip"> <div id="header_c"> <nav id="menu_l"> <ul> <li><a href="#">Парикмахерский зал</a></li> <li><a href="#">Ногтевой сервис</a></li> <li><a href="#">Косметология</a></li> <li><a href="#">Массаж</a></li> </ul> </nav><!-- /#menu_l --> <nav id="menu_r"> <ul> <li><a href="#">Солярий</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">Наши работы</a></li> <li><a href="#" class="active">Главная</a></li> </ul> </nav><!-- /#menu_r --> <div id="cntr"> <div id="logo"><a href="/">Салон красоты</a></div> </div><!-- /#cntr --> </div><!-- /#header_c --> </header> <div id="content" class="w940"> <h1>Наши работы</h1> </div><!-- /#content --> </div><!-- /#all --> </div><!-- /#main --> <div id="footer"> <article class="center txtStyle_1 w655"> <article> <span class="tel_f">+7(499) 123 45 67</span> </article> </article> <footer class="w655"> <small> <span class="elem"> </span> <p class="center">2013, Салон красоты</p> </small> </footer> </div><!-- /#footer --> </div><!-- /#wrapper --> </body> CSS: html{ height:100%; min-width:960px; font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#fff; background:#000; } body{ height:100%; margin:0; } h1,h2,h3,h4,h5,h6,input,button,label,select, fieldset, textarea{ padding:0; margin:0; } h1{ font-size:18px; font-weight:normal; text-transform:uppercase; } small{ display:block; } ::selection{ background:#c9aa93; color:#000; } input[type="search"]:focus{ outline:none; } button::-moz-focus-inner{ /* убираем внутренний отступ у кнопки в FF, который зарезервирован для рамки при фокусе */ padding:0; border:0; } .clearfix:after{ content:""; display:block; clear:both; } .clear{ clear:both; } a{ } a:hover{ text-decoration:none; } p { margin:0; } ul{ list-style:none; margin:0; padding:0; } img{ border:0; } .w100{ width:100%; } .w940{ width:940px; margin:auto; } #wrapper{ position:relative; height:100%; margin:auto; background:url(maneBg.jpg) no-repeat 100% 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='scale')"; } #main{ min-height:100%; margin:0 0 -214px; } #inner #main{ margin-bottom:-150px; } #all{ padding:0 0 214px; } #inner #all{ padding:0 0 150px; } /* #all.h350{ min-height:350px; }*/ header{ position:relative; padding:38px 0 0; height:147px; } .txtStyle_1{ padding:26px 0 0; font-size:14px; font-style:italic; line-height:18px; } .txtStyle_2{ display:block; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#bedb00; font-style:normal; font-weight:bold; text-transform:uppercase; letter-spacing:1px; padding:12px 0 0; } .sale{ font-size:18px; } #cntr{ margin:0 194px; } .nameComp{ position:absolute; display:inline-block; width:93px; height:27px; background: url(name.png) no-repeat; text-indent:-9999em; } .center{ text-align:center; } .left{ float:left; } .right{ float:right; } .w655{ width:655px; margin:auto; } .w940{ width:940px; margin:auto; } #menu_l{ float:left; width:194px; text-align:right; } #menu_r{ float:right; width:194px; } #logo{ width:182px; height:123px; background: url(logo.png) no-repeat; margin:auto; } #logo a{ display:block; height:123px; text-decoration:none; text-indent:-9999em; overflow:hidden; } #header_c{ overflow:hidden; width:655px; margin:auto; } header nav ul{ line-height:24px; } header nav a{ font-family: 'Didact Gothic', sans-serif; color:#fff; font-size:11px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; text-decoration:none; } header nav a:hover{ text-decoration:underline; } header nav a.active{ color:#bedb00; } #footer{ height:214px; overflow:hidden; } #inner #footer{ height:150px; } small p{ font-size:11px; color:#bedb00; } .strip{ background:rgba(0, 0, 0, .65); } .tel_f{ display:block; font-family: 'Istok Web', sans-serif; font-size:24px; line-height:24px; font-weight:bold; font-style:normal; letter-spacing:0.1em; padding:6px 0 0; } .elem{ display:block; overflow:hidden; background:url(elem.png) no-repeat; width:26px; height:27px; margin:6px auto 5px; }

Здравствуйте! Есть такой макет: ссылка на изображение, размер: 143 кбайт, 1024 x 641 точек Задача состоит в том, как сверстать большой полупрозрачный блок. Я использую верстку с прижатым футером. Код: <body id="inner"> <div id="wrapper" class="w100" style="background-image:url(maneBg_2.jpg); background-position:0 0;"> <div id="main"> <div id="all"> <header class="strip"> <div id="header_c"> <nav id="menu_l"> <ul> <li><a href="#">Парикмахерский зал</a></li> <li><a href="#">Ногтевой сервис</a></li> <li><a href="#">Косметология</a></li> <li><a href="#">Массаж</a></li> </ul> </nav><!-- /#menu_l --> <nav id="menu_r"> <ul> <li><a href="#">Солярий</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">Наши работы</a></li> <li><a href="#" class="active">Главная</a></li> </ul> </nav><!-- /#menu_r --> <div id="cntr"> <div id="logo"><a href="/">Салон красоты</a></div> </div><!-- /#cntr --> </div><!-- /#header_c --> </header> <div id="content" class="w940"> <h1>Наши работы</h1> </div><!-- /#content --> </div><!-- /#all --> </div><!-- /#main --> <div id="footer"> <article class="center txtStyle_1 w655"> <article> <span class="tel_f">+7(499) 123 45 67</span> </article> </article> <footer class="w655"> <small> <span class="elem"> </span> <p class="center">2013, Салон красоты</p> </small> </footer> </div><!-- /#footer --> </div><!-- /#wrapper --> </body> CSS: html{ height:100%; min-width:960px; font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#fff; background:#000; } body{ height:100%; margin:0; } h1,h2,h3,h4,h5,h6,input,button,label,select, fieldset, textarea{ padding:0; margin:0; } h1{ font-size:18px; font-weight:normal; text-transform:uppercase; } small{ display:block; } ::selection{ background:#c9aa93; color:#000; } input[type="search"]:focus{ outline:none; } button::-moz-focus-inner{ /* убираем внутренний отступ у кнопки в FF, который зарезервирован для рамки при фокусе */ padding:0; border:0; } .clearfix:after{ content:""; display:block; clear:both; } .clear{ clear:both; } a{ } a:hover{ text-decoration:none; } p { margin:0; } ul{ list-style:none; margin:0; padding:0; } img{ border:0; } .w100{ width:100%; } .w940{ width:940px; margin:auto; } #wrapper{ position:relative; height:100%; margin:auto; background:url(maneBg.jpg) no-repeat 100% 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='scale')"; } #main{ min-height:100%; margin:0 0 -214px; } #inner #main{ margin-bottom:-150px; } #all{ padding:0 0 214px; } #inner #all{ padding:0 0 150px; } /* #all.h350{ min-height:350px; }*/ header{ position:relative; padding:38px 0 0; height:147px; } .txtStyle_1{ padding:26px 0 0; font-size:14px; font-style:italic; line-height:18px; } .txtStyle_2{ display:block; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#bedb00; font-style:normal; font-weight:bold; text-transform:uppercase; letter-spacing:1px; padding:12px 0 0; } .sale{ font-size:18px; } #cntr{ margin:0 194px; } .nameComp{ position:absolute; display:inline-block; width:93px; height:27px; background: url(name.png) no-repeat; text-indent:-9999em; } .center{ text-align:center; } .left{ float:left; } .right{ float:right; } .w655{ width:655px; margin:auto; } .w940{ width:940px; margin:auto; } #menu_l{ float:left; width:194px; text-align:right; } #menu_r{ float:right; width:194px; } #logo{ width:182px; height:123px; background: url(logo.png) no-repeat; margin:auto; } #logo a{ display:block; height:123px; text-decoration:none; text-indent:-9999em; overflow:hidden; } #header_c{ overflow:hidden; width:655px; margin:auto; } header nav ul{ line-height:24px; } header nav a{ font-family: 'Didact Gothic', sans-serif; color:#fff; font-size:11px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; text-decoration:none; } header nav a:hover{ text-decoration:underline; } header nav a.active{ color:#bedb00; } #footer{ height:214px; overflow:hidden; } #inner #footer{ height:150px; } small p{ font-size:11px; color:#bedb00; } .strip{ background:rgba(0, 0, 0, .65); } .tel_f{ display:block; font-family: 'Istok Web', sans-serif; font-size:24px; line-height:24px; font-weight:bold; font-style:normal; letter-spacing:0.1em; padding:6px 0 0; } .elem{ display:block; overflow:hidden; background:url(elem.png) no-repeat; width:26px; height:27px; margin:6px auto 5px; }

Здесь нужно применить замену текста картинкой. <li><a href="" id="news">Новости</a></li> Присваиваете каждой ссылке свой уникальный id. Затем текст ссылки скрывается. А вместо текста показывается картинка для каждого состояния.

Спасибо за книгу - уже нашла, правда предпочитаю бумажный вариант ). Для IE7 все-таки пока верстаем, правда с выводом предупреждения о том, что используется устаревший браузер и корректное отображение не гарантируется.

Спасибо большое! Буду изучать! Многие материалы я читала, конечно, но у меня возникли сомнения в использовании свойств CSS3, т. к. они не будут работать в старых браузерах. А вот какой способ используется на указанных мной сайтах? Там еще и текст подстраивается.

Здравствуйте! Нужно сверстать сайт с фоном, подстраивающимся под любые экраны. Чтобы фоновая картинка была на всю ширину и высоту. Примерно так, как здесь: http://themes.themeg...om/?theme=Keres http://themeforest.n...preview/3801554 Подскажите, пожалуйста, какие есть варианты. Хотелось бы обойтись без фреймворков типа Bootstrap.