Search the Community

Здравствуйте! Возникла небольшая проблема с вёрсткой. Есть html: <div class="best"> <div class="slider"> <img src="img/food.png"> </div> </div> Есть css: .slider:active > img { background-image: url("../img/block.png") } Моя цель, чтобы на картинку, которая из html загружался сферху фон из css (block.png) по клику. Но выходит так, что фон (block.png) загружается за картинкой из html (food.png) и ощущение, что ничего не происходит.

Привествую профессионалов и новичков вкрстки. Стокнулся с некоторой проблемой во время верстки сайта Верстка резиновая и с ней как таковой проблем нет, чего не скажешь о фоне Вот такой вот борк должен быть на главной странице. И как это сдедать с помощью HTML/CSS - я понять не могу. Решение с JS имеется, но прежде чем его применять, хотелось бы удостовериться что без JS не обойтись. Еще раз подмечу, что верстка резиновая.

Приветствую профессионалов и новичков верстки. На днях столкнулся с задачей, оказавшейся для меня необоримой. Все, я полагаю, знают кнопочку в роде со значком маркера-фломастера, который выделяет цветом текст, причем если выделены две строки, то между полосками цвета имеется зазор, что и отличает \ту кнопочку от кнопочки "заливка фона". Вот с такой задачей и столкнулся. Имеется текст в тэге h2. На экране он отображается в две строки, причем вторая строка короче первой. Нужно сделать как раз такой эффект как в Ворде - фон должен быть залит цветом, между строками должен быть прозрачный зазор. Использоавание заливки картинкой png с repeat не удовлетворяет требованияй, ибо во второй строке заливка распространяется на всю долину, а надо, чтобы только на длину текста во второй строке. Сделать нужно именно на html/css без js и текст должен располагаться в одном тэге Картинка, как должно быть, прилагается. Буду признателен за любую помощь (кроме советов прибить дизайнера =) )

Добрый вам день!!! Создаю свой первый сайт, продумал дизайн, но столкнулся с проблемой реализации. по замыслу страница имеет один задний фон, циклирующийся до конца страницы, высотой 14 px, в формате jpg. но поверх него мне нужно наложить второй фон в формате png высотой 240 px. как вы пониматете, в один фон их не уместить, иначе в конце страницы будет пробел. что-то похожее я изобразил. второй фон появляется поверх первого, но как-только заканчиввется строка меню сайта, от исчезает за основным фоном. что не так? как поправить? вот ссылка: http://infobusiness.hol.es/index.html 1. основной фон - серый, сбоку с как бы решеткой 2. второй фон - диньги, видна только качть под "нефтяными вышками"

Доброго времени суток. Пытаюсь добиться эффекта, как на изображении Картинка взята с поста на Хабре, там реализация меню с плавным переходом от одного пункта к другому. Мне нужно нечто попроще: есть блок фискированной ширины (назову "родитель"), внутри него еще один блок (ширина любая, не превышающая родительскую — "потомок"). Внутри текст. Та часть текста, что не выходит за границы потомка - одним цветом. А та часть, что выходит - должна быть другим цветом. Как можно добиться этого эффекта? JS можно использовать. Получается что-то вроде прогресс-бара с надписью внутри.

Не могу сообразить как сделать следующее. Делается в Bootstrap 2.3.2. Имеется картинка монитора, в ней видео(допустим iframe) Есть решения на css-tricks Я пробовал - и получается что либо само видео у меня корректно меняет размер, либо бек. Сейчас сама конструкция выглядит как <div class="video"><iframe width="542" height="305" src="http://www.youtube.com/watch?v=niyFA24H5_E?rel=0&hd=1" frameborder="0" allowfullscreen></iframe></div> .video {width: 542px;padding: 28px 29px 0 54px;height: 485px;float: left;background: url("../images/screen.png") no-repeat 25px 0;} Если добавить враппер под респонсивку такого плана .videoWrapper {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 25px;height: 0; }.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%; } То возникает проблема с экраном)))) Видео скалится ОК, а картинка режется и падает под видео.... Вобщем, нужно решить задачу: адаптивный бекграунд+видео в отдельно взятом блоке...Если у кого есть рабочий пример - дайте плиз ссылку? Спасибо.

Добрый день! Есть вопрос, решение для которого я не смог найти. Скилл маловат. Вот цитата " http://childsecret.ru/kurs/grudnoe/ В GoogleCrome, Opera отображается так как я создавалВ Firefox один фон back2.png повторяется много разВ Yandex brouser один фон back1.png вообще отсутствует В css прописано так body { background-image: url(../img/back2.png), url(../img/back1.png); background-repeat: no-repeat, space; background-position: center top; } Как сделать, чтобы во всех браузерах было одинаково?" У меня даже мыслей нет в чём тут может быть загвоздка. Помогите пожалуйста советом.

Как сдвинуть фон сайта при прокручивании страницы, но только на 500px, а потом, чтобы он остановился?

Добрый день!Проблема такая сегодня хотел поменять стандартный белый фон на свой но когда я это сделал фон встал не на всю страницу а проблема с низу.Когда я меняю padding-bottom всё вроде бы хорошо но это для главной странице когда перехожу на страницу со слайдами где у меня показан товар,снизу огромное пространство после всего контента,когда делаю padding-bottom поменьше на главной опять белая полоса а на странице с товаром если в слайде большая картинка то он увеличиваеться и появляеться опять она же та самая белая полоса), вот сайт nezhnost-luh.ru вот скрины 1 2 3 а вот css http://jsfiddle.net/WGvZm/ Да и еще такой вопрос можно ли сделать что бы на страницах вообще не было оступов слева и справа?Или что бы хотя бы вот этих отступов не было скрин

Очень простая вещь не работает ни в какую: body{ background:url(imgex5/header1.jpg) no-repeat #e9f1f4; background-size:100%; } Нужна вверху узкая картинка во всю ширину окна, а всё ниже фоновый цвет. Картинку видит всё OK, а цвет не видит.Мозги уже вскипели. Спасибо!

Здравствуйте. Не знаю, как реализовать такую схему: необходимо сделать фон для страницы так, чтобы левая сторона окна до середины была одного цвета (например, белого), а правая - другого (например, красного). Т.е. 50% окна по вертикали "залито" одним цветом, 50% - другим. Конечно же, очень хочется, чтобы независимо от разрешения (ширины окна) фон так и оставался на 50% белым, на 50% - красным. Спасибо заранее.

Привет всем! Как верстается фоновая картинка, которая в psd макете выглядит как бы на всю ширину макета? То есть, такая, которую нельзя за-repeat-ить, которая полноценная картинка. На этой странице лежат макеты. Я спрашиваю сейчас про такие как 1, 2, возможно 3, 9, 11, 18, 26. Возможно нужно их верстать с фиксированной шириной страницы соответствующей макету, то есть, выравнивается по центру страница, а по бокам определенным цветом. Или как.. Помогите пожалуйста, не могу понять Например, с макетом 4 все понятно, потому что фон везде одинаковый, а вот макет 2 не пойму как правильно делать Надеюсь вы меня поняли , а если нет спрашивайте, что не понятно

Помогите пожалуйста сверстать такой фон для сайта. Нужно чтобы он занимал все окно браузера. Фон такой Что посоветуете?

Товарищи помогите с вёрсткой! Проблема в следующем.. установил 2 фоновых изображения, одно сверху другое снизу, проблема в том, что на тех страницах где много информации и сайт получается "высоким"- смотрится хорошо, а там где страницы "низкие"- верхний фон наезжает на нижний. Пример высокой: http://vkomforte.su Пример низкой: http://vkomforte.su/index.php?route=information/news&news_id=15 вот код CSS: body { background-image: url('../image/bg.jpg'), url('../image/bg-bottom.jpg'); background-repeat: no-repeat, no-repeat; background-position: top , bottom; background-size: 100% auto; color: #000000; } Что можно сделать? Заранее спасибо!

Всем привет. Подскажите, пожалуйста, как расположить два бэкграунда, так чтобы один всегда был вверху, а другой всегда внизу. Как здесь: http://bit.ly/10CuCWR Сейчас код с одним бэкграундом выглядит так: body{ font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; background: #fff; background: url(http://fart12345.com/wp-content/uploads/2013/04/1.png) fixed; background-position: top center; background-attachment: scroll; background-repeat: no-repeat; color: #777777; line-height: 18px;

Привет, подскажите пожалуйста, почему не применяется картинка <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Maket</title> <link href="css/style1.css" type="text/css" rel="stylesheet" media="screen"> </head> <body> <div class="background"> <div id="shadow_bg"></div> <div id="paper_down_base"></div> <div id="slider_bg"></div> </div> <div id="ribbon_effects"> <div id="shadows"></div> </div> <div id="header"> <div id="header_bg"></div> <div id="logo"></div> <div id="menu"></div> <div id="active_state"></div> </div> <div id="slider"> <div id="info"> <div id="header_block"></div> <div id="list"></div> <div id="button"></div> </div> <div id="slider_image"></div> </div> <div id="content"> <div id="about_us"> <div id="read_more"></div> </div> <div id="our_services"> <div id="read_more"></div> </div> <div id="latest_news"> <div id="read_more"></div> </div> </div> <div id="footer"> <div id="menu"></div> </div> </body> </html> body{ background:url('img/bg/shadow_bg.png') #528036; margin: auto; width:100%; } https://mega.co.nz/#!h9o3SbTA!RBuUI2X9UCkiwrS8XcyWXkE5hsUNVNxNS_CyU1H2LYU

Здравствуйте. Возникла такая проблема... <ul> <li>Слово1</li> <li>Слово2</li> <li>Слово3</li> <li>Слово4</li> </ul> Как сделать чтобы в ul li шло чередование фонов. Допустим, нечётные (<li>Слово1</li>, <li>Слово3</li>, ...) - backgroun-color:#f4f4f4; чётные (<li>Слово2</li>, <li>Слово4</li>, ...) - backgroun-color:#cccccc; Помогите, пожалуйста, кто знает...

Всем доброго дня. Есть такая проблема. Есть простенькая страничка на сайте, на которой отображается инфо о некой команде. Фото участника и краткое инфо. Сделано все табличками и фото участника является фоном таблички. И вот проблема в том, что фоновое изображение долго грузится, около 400ms (в итоге имеем 900ms +/-), хотя при этом оно достаточно маленького размера 50Кб +/-. И если в хроме загрузка картинки происходит более или менее плавно, то в ФФ торчит белый экран в месте картинки до тех пор, пока она не будет полностью загружена. Табличка описана так: При загрузке имеем такую картину: ******************************************************* Посоветуйте пожалуйста, как можно оптимизировать эти странички?

Здравствуйте! Проблема такая. Делаю background в блоках DIV, в бекграунде сразу три изображения по спецификации css3, всё нормально отображается и работает, но только тогда, когда масштаб стандартный, т.е. 100%. Когда в браузере уменьшаю масштаб, то тех бекграундовых изображений, у которых ширина 1px становится не видно. Так и должно быть или от этого как-то можно избавиться, чтобы всё отображалось даже при уменьшении масштаба? Не знаю, что сюда привести... ну, вот css код того блока, в котором исчезает: .cont_verh_svitok_part2_center_fon { display:inline-block; padding:0; margin:0; border:0; outline:none; overflow:hidden; width:189px; font:12pt Palatino Linotype,verdana,arial,helvetica; vertical-align:top; text-align:center; background:url(images/formochki_table/main_left_stolb/verh_svitok_part2_center.gif) no-repeat center top, url(images/formochki_table/main_left_stolb/palka_horizontal_niz.gif) no-repeat bottom, url(images/formochki_table/main_left_stolb/palka_vertical.gif) repeat-y left top, url(images/formochki_table/main_left_stolb/palka_vertical.gif) repeat-y right top, url(images/fons/fons_left_stolb/fon_left_stolb_1.jpg) repeat; background-origin: content-box; background-clip: content-box; background-size: auto; }