Search the Community

Я смотрю на современные сайты и их исходный код. Потом я смотрю на то, какой получается верстка, благодаря bootstrap и ему подобных css-фреймворков. И у меня зреет далеко не новый вопрос - как верстать? Чтобы выровнять тот или иной блок, приходится прибегать к тому, что мы плодим бесконечные <div>. Для каждого пишем класс и разрабатываем его в лишних строках CSS. И подключаем еще один CSS с media queries, чтобы все получилось адаптивно... Да, сейчас к нам приходят flex и это здорово! Это как раньше была замена табличной верстки или введение анимаций. Но семантика рушится. Раньше я ориентировался на What Beautiful HTML looks like, но сейчас это далеко не всегда возможно. Какие ваши мысли?

Друзья, возникла задача построения ряда блоков. Блоки располагаются один под другим. В каждом есть изображение, которое должно обрезаться снизу. Однако сам div нестандартный. Смотрим картинку Какие у меня были варианты решения: Использовать overflow: hidden; Но идея потерпела крах, потому что он обрезает не по линии, а по горизонтали. Использовать clip; Тоже крах, потому что теряется адаптивность и каждый раз рассчитывать clip даже с помощью js тяжело Разные варианты совмещения. Например, взять из макета дугу и картинку, сохранить как PNG и установить в основном слое как background-position: bottom; Пока это самая лучшая идея, но она не универсальна. Необходимо сделать так, чтобы работало с любой картинкой, не только с выбранной из макета. То есть было бы странно сначала закидывать любую картинку в макет, там вырезать ее вместе с дугой и вставлять как background Как строить такие блоки с обрезкой картинок на нижней границе?

Доброго времени суток! Подскажите, как можно задать границы слайд шоу так, чтобы они не вылазили с блока боковой колонки? Проблема в том что картинка(№1) вылазит за предел блока, а должна быть в рамке (№2) как показано на скрине ниже… http://savepic.ru/13747125.jpg Ссылка на страницу: http://www.2amovers.com/ru/krupnye-proekty/ Код страницы: <div class="block-3 no-mar sidebar"> <style> #IUAfinance32 {width: 97%; position: relative; margin: 6px; {1}} #IUAfinance32 * {margin: 0; padding: 0;} #IUAfinance32 a, #IUAfinance32 a:hover {border: none; text-decoration: underline; color: inherit;} #IUAfinance32 .IUAfinance_block {overflow: hidden; padding: 4px; font-family: Arial; font-size: 10px; background: #F6F6F6; border: 1px solid #00529c; color: #000000;} #IUAfinance32 .IUAfinance_title {overflow: hidden; margin-top: -4px; font-size: 12px; font-weight: bold; height: 20px; line-height: 20px; color: #00529C;} #IUAfinance32 .IUAfinance_title i {position: absolute; right: 4px; top: 2px; width: 36px; height: 14px; background: url(//i.i.ua/v2/logo/logo_small_14_black.png) no-repeat 0 0 transparent; opacity: .3;} #IUAfinance32 .IUAfinance_content, #IUAfinance32 .IUAfinance_content:hover {display: block; background: #FFFFFF; padding: 4px; margin-bottom: 4px; text-decoration: none; color: inherit;} #IUAfinance32 .IUAfinance_head_title {font-size: 12px; font-weight: bold;} #IUAfinance32 .IUAfinance_item, #IUAfinance32 .IUAfinance_head {padding: 4px 0;} #IUAfinance32 .IUAfinance_item:last-child {padding-bottom: 0;} #IUAfinance32 .IUAfinance_item {border-top: 1px dotted #DDD; font-size: 18px; font-family: Trebuchet MS;} #IUAfinance32 .IUAfinance_item_title, #IUAfinance32 .IUAfinance_item_data {display: inline-block; vertical-align: top; width: 42%; text-align: right;} #IUAfinance32 .IUAfinance_item_title:first-child, #IUAfinance32 .IUAfinance_item_data:first-child {width: 16%; text-align: left;} #IUAfinance32 .IUAfinance-increase:before {content: "\25B2"; color: #40983c; font-size: 11px;} #IUAfinance32 .IUAfinance-decrease:before {content: "\25BC"; color: #ed482e; font-size: 11px;} </style> <div id="IUAfinance32"> <div class="IUAfinance_block" id="IUAfinanceBlock"> <h1 class="IUAfinance_title" id="IUAfinanceTitle"></h1> <a href="//finance.i.ua/informers/" target="_blank" class="IUAfinance_content" id="IUAfinanceContent"></a> <a href="" id="IUAfinanceLink">Курсы доллара, евро и рубля по банкам</a> </div> </div> <script type="text/javascript"> var $container = document.getElementById("IUAfinance32"); $container.style.width = "240"; $container.querySelector(".IUAfinance_block").style.backgroundColor = "rgb(255,109,36)"; $container.querySelector(".IUAfinance_block").style.borderColor = "rgb(255, 255, 255)"; $container.querySelector(".IUAfinance_block").style.color = "rgb(255, 255, 255)"; $container.querySelector(".IUAfinance_content").style.backgroundColor = "rgb(204, 204, 204)"; $container.querySelector(".IUAfinance_title").style.color = "rgb(255, 255, 255)"; $container.querySelector("#IUAfinanceLink").style.color = "rgb(255, 255, 255)";</script> <script type="text/javascript"> if (typeof(iFinance) == "undefined") { if (typeof(iFinanceData) == "undefined") { document.write('<scr' + 'ipt src="//i.i.ua/js/i/finance_informer.js?1" type="text/javascript" charset = "windows-1251"></scr' + 'ipt>'); iFinanceData = []; } iFinanceData.push({b:15, c:[840,978,643], enc:2, lang:0, p:32, ver2: true}); } else { window['oiFinance32'] = new iFinance(2); window['oiFinance32'].gogo({b:15, c:[840,978,643], enc:2, lang:0, p:32}); } </script> <div> <style type="text/css"> {width: 97%; position: relative; margin: 6px; {1}} {margin: 0; padding: 0;} 1:hover {border: none; text-decoration: underline; color: inherit;} .1_block {overflow: hidden; padding: 4px; font-family: Arial; font-size: 10px; background: #F6F6F6; border: 1px solid #00529c; color: #000000;} .1_title {overflow: hidden; margin-top: -4px; font-size: 12px; font-weight: bold; height: 20px; line-height: 20px; color: #00529C;} </style> <div id="1"> <div class="1_block" id="1Block"> </div> </div> <script type="text/javascript"> var total_pics_num = 9; // колличество изображений var interval = 12000; // задержка между изображениями var time_out = 2; // задержка смены изображений var i = 0; var timeout; var opacity = 100; function fade_to_next() { opacity--; var k = i + 1; var image_now = 'image_' + i; if (i == total_pics_num) k = 1; var image_next = 'image_' + k; document.getElementById(image_now).style.opacity = opacity/100; document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')'; document.getElementById(image_next).style.opacity = (100-opacity)/100; document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')'; timeout = setTimeout("fade_to_next()",time_out); if (opacity==1) { opacity = 100; clearTimeout(timeout); } } setInterval ( function() { i++; if (i > total_pics_num) i=1; fade_to_next(); }, interval ); </script> <img src='http://2amovers.com/wp-content/gallery/officenew/1.jpg' id="image_1" style="position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" /> <img src='http://2amovers.com/wp-content/gallery/officenew/2.jpg' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" /> <img src='http://2amovers.com/wp-content/gallery/officenew/3.jpg' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" /> <img src='http://2amovers.com/wp-content/gallery/officenew/4.jpg' id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" /> <img src='http://2amovers.com/wp-content/gallery/officenew/5.jpg' id="image_5" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" /> <img src='http://2amovers.com/wp-content/gallery/officenew/6.jpg' id="image_6" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" /> <img src='http://2amovers.com/wp-content/gallery/officenew/7.jpg' id="image_7" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" /> <img src='http://2amovers.com/wp-content/gallery/officenew/8.jpg' id="image_8" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" /> <img src='http://2amovers.com/wp-content/gallery/officenew/9.jpg' id="image_9" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" /> <!--[if gte IE 5]><script type="text/javascript"> // запрет правой кнопки createPopup().show( 0, 0, 0, 0, 0 ); </script><![endif]--> <body oncontextmenu="return false;"> </div> </div> Заранее спасибо!

Приветствую. Подскажите, как для блока с изменяющимся ID прописать единый стиль. Поясняю: Имеется блок <div id="div-gpt-ad-1485257279370-0"></div> и цифры могут принимать различные значения, неизменным остаётся только "div-gpt-ad-", вот, как для такого блока можно задать стили css?

Добрый день. Есть три элемента(кнопка, див, кнопка). Необходимо расположить их в таком порядке: кнопка прижатая к левому краю, кнопка прижатая к правому краю, див на всю ширину между кнопками. Пробую так:https://jsfiddle.net/dahilu/w82yhgn0/3/. Подскажите что нет так?

Здравствуйте. Подскажите пожалуйста как решить такую задачу. Есть несколько div блоков (один под другим). Верхний Div блок содержит картинку, ширина - 100%, высота 600px. Необходимо, чтобы при изменении масштаба (например, при нажатии на CTRL + "+" или CTRL + "-") размер верхнего div блока, где картинка, сохранялся. Прикрепил картинку, чтобы было более понятно. Красным отмечена область, размер которой должен сохраняться при любом изменении масштаба. Спасибо! З.Ы. У меня получалось решить данную проблему, но возникала другая. При изменении масштаба, остальные div блоки налаживались на верхний и получалась каша.

Внутри блока с фиксированной шириной и высотой должны располагаться четыре блока в один ряд. Между ними не должно быть пустое пространство. (margin:0; padding:0; не помогло). Почему блок с классом 'col-4-2' позиционируется относительно нижней границы текста блока с классом 'col-4-1'? Что я делаю неправильно. Вот ссылка на файл: https://jsfiddle.net/ttoliboff/81oL39y3/

Практикую написание музыкального сайта. Столкнулся с такой проблемой, ни как не получается создать последовательность воспроизведения трэков, когда песня заканчивается, она просто перестаёт играть и всё. В инете не объяснятся как это делать, есть просто уроки по тэгу <audio> ни слова о последовательности. Решил воспользоваться плеером, но проблема всё та же. Я новичок в этом деле, надеюсь на адекватный совет тех, кто имел с этим дело. Спасибо заранее! P.S. если нужно больше информации, говорите, дополню. как выглядит:

Нарооооод я В общем освоил html+css на начальном уровне и вот сварганил первый сайт на дивной верстке вот демка сайта которую копировал http://www.woweb.ru/td1/048/ а вот собственно мои файлы жду так сказать критику что нуб и тд хех ну вродь выглядит неплохо на всех браузерах завтра буду делать что посложнее index.html style.css

Привет! Я начинающий верстальщик,который стремиться в будущем стать Front-end разработчиком и создавать интерактивные и динамичные сайты. Сейчас я получаю опыт в верстке landing page и одностраничных сайтов на HTML5 и CSS3. У меня есть опыт и небольшое портфолио (отправлю ссылки по требованию). От меня вы получите аккуратный валидный код,подключение форм обратной связи(если имеются) ,адаптивность сайта (по макету или вашему пожеланию), установка сайта на ваш хостинг и консультацию в сфере верстки. Мои навыки и умения: Html/HTML5-верстка сайтов и интерфейсов на основе макетов PSD; CSS; Базовые знания PHP и JavaScript. Элементарные знания в AJAX, jquery, OpenServer, Wordpress, bootstrap, юзабилити, настройка контекстной рекламной кампании в поисковых системах. С меня -быстрота обратной связи,исполнительность и кроссбраузерность ,с вас-PSD макет и реалистичный взгляд. Цена устанавливается от сложности работы. 1)https://www.facebook.com/tatiana.kondratyeva.125 2)Tatiana89252514982@yandex.ru

Добрый день друзья. Есть вопрос по поводу верстки, верстаю макет - и в блоке услуг не могу выравнить блоки с видами ремонта в одну линию, задал в hmtl класс, в css - задал отступы и display:inline-block, и ничего не происходит. div class="row"> <div class="col-md-12"> <div class="mc_wrap"> <div class="mc_item_wrap"> <div class="mc_item"> 12345677 </div> <div class="mc_item"> 12345677 </div> <div class="mc_item"> 12345677 </div> </div> </div> </div> </div> .mc_item_wrap { margin-left: 30px; width: 158px; display: inline-block; } Проблема в этом <- Если есть надобность могу скинуть весь архив с проектом

Уважаемые знатоки, помогите решить две проблемы. 1)Я сформировал массив в javascript, но не могу вывести его в поле <span>. Выходит только последний элемент массива, а нужны все. 2) Есть поле <span>. Туда добавляются разные элементы массива, но поле остается того же размера (а должно увеличиваться). Как сделать так, чтобы <span> увеличивался при увеличении выводимого массива.

Друзья, помогите пожалуйста сделать для сайта шапку, у меня есть вот такая разбивка: Могли бы подсказать как сделать такую форму, вот divы <div class="allh div1"> <div class="allh div2"> <div class="allh dostavka div3"> </div> <div class="allh search div4"> </div> </div> <div class="allh div5"> </div> <div class="allh logo div6"> </div> <div class="allh div7"> <div class="allh tel div10"> <div class="allh div8"> </div> </div> <div class="allh call div11"> <div class="allh div9"> </div> </div> <div class="allh occall div12"> </div> </div> <div class="allh cart div13"> </div> </div> Я не силен в позиционировании дивов, подскажите как тут лучше сделать? Может тупо таблицей?

Здравствуйте. Подскажите, как можно растянуть блок вниз до прижатого футера, если высота страницы неизвестна ( т.е. чтобы на любых экранах блок касался футера) ???

Приветствую. Помоги пожалуйста разобраться со следующей проблемой. Есть страничка с центральным позиционированием div размером 980px. Внизу поставил div по ширине окна, "приклеил его" к нижнему краю браузера, по методике, описанной на многих ресурсах. Но есть проблема. При скроллинге, как "прикленный" футер первоначально встал, так он и скроллится, одновременно с содержимым. Причем если потянуть за нижний край окна, футер стоит у нижнего края постоянно. Как сделать так, чтобы футер "приклеился" к нижнему краю окна и оставался там, при скроллинге? Если, по каким-то причинам это невозможно, как сделать этот же div, по всей ширине окна, но чтобы он встал под содержимое страницы. Не получается у меня — он либо 980px, либо никак. Большое спасибо. Подопытный тут. http://cssdeck.com/labs/crgnwtq2

DEMO Когда содержимое не помещается в overflow: auto, то элементы внутри прокрутки выходят за свой контейнер появляется горизонтальная прокрутка (Смотри загруженное изображение) Не понимаю, как сделать, чтобы блок overflow: scroll становился такой ширины, как и элементы внутри (расширялся), а не появлялась горизонтальная прокрутка.

Всем привет. Я только недавно начал верстать. Сейчас пытаюсь сделать e-mail рассылку. У меня такой вопрос: зачем оборачивать img в div если и без div работает ? Пример : <td width="138" valign="top" style="margin: 0; padding: 0; padding-top: 14px; padding-left: 30px;"> <a href="#" target="_blank" border="0" style=" margin: 0; padding: 0; outline: none; border: none; text-decoration: none;"> <div style="font-size:1px;line-height:1px;"> <img width="138" height="84" src="images/logo.png" alt="БонПари" style=" border: 0; margin: 0;padding: 0; display: block; font-size: 1px; line-height: 1px; font-family: Verdana, Tahoma, Geneva, sans-serif;"> </div> </a> </td> Зачем див? Если и так все работает - <td width="138" valign="top" style="margin: 0; padding: 0; padding-top: 14px; padding-left: 30px;"> <a href="#" target="_blank" border="0" style=" margin: 0; padding: 0; outline: none; border: none; text-decoration: none;"> <img width="138" height="84" src="images/logo.png" alt="БонПари" style=" border: 0; margin: 0;padding: 0; display: block; font-size: 1px; line-height: 1px; font-family: Verdana, Tahoma, Geneva, sans-serif;"> </a> </td>

День добрый. Столкнулся с такой проблемой как перемещение div бока. Сам сайт я пытаюсь как-то сделать адаптивным и мне нужно рядом с div болком поставить еще 1 div блок. Как мне это сделать? Проблема в том что если я буду переносить с помощью px или % то этот блок будет куда нибудь сносить (при других разрешениях экрана).Что делать P.S. Ссылка на сайт: http://fineway.net16.net/ .Как он должен выглядеть: http://imgur.com/TjsJiXv . HEEEELP!

Ребята доброго времени! Строго не ругайте, html далеко не мой конек, новичок прошу помощи.. Помогите пожалуйста с шаблоном, резиновый шаблон, футер прижат к низу страницы, всё работает как мне кажется хорошо. Но в центральную часть (зеленую) нужно вставить карту размером на всю зеленую область, и чтобы она тянулась при изменении размеров окна, и чтобы она не заезжала под/на правый блок и другие блоки. Как это реализовать? Блок карты не реагирует на размеры 100%, только на фиксированный размер в пикселях, а если поставить 100% то она просто исчезает. Если можно такое сделать хотя бы для Google Chrome, буду безмерно счастлив. То, с чем мучаюсь прикладываю во вложении. problem_1.zip

Всем привет! Делаю сайт: учеба.top В данный момент верстаю страницу http://www.учеба.top/anketa.html Народ, как мне сделать высоту серого блока ( class="anketa" ) по содержимому, т.е. если много полей, то у class="anketa" свойство height увеличивается. Если полей мало, то height наоборот уменьшается. Пробовал делать и height:auto и вообще у класса .anketa height убирал - не помогает, когда текстовых полей много, они съезжают вниз, и всё становится некрасиво. Народ, подскажите, как быть?

Помогите с проблемой. Есть один большой блок с классом "list", внутри которого должна отображаться информация с помощью блока "mininfo". Задача: сделать так, чтобы при наведении на любую область блока "list" появлялся блок "maxinfo", в котором будет отображена более полная информация. Пытаюсь реализовать это через изначальное значение 0 параметра "opacity" в блоке "maxinfo" и стиля .list:hover+.maxinfo, который даст при наведении "opacity: 1". При наведении на блок "list" ничего не происходит. Но, когда я проделываю то же самое с блоком "mininfo" (.mininfo:hover+.maxinfo) - все работает отлично. После почти суток проб и ошибок, пришел к выводу, что такое вероятнее всего может быть, потому что "maxinfo" - это блок внутри блока "list", а "mininfo" - нет. Кто сталкивался с такой проблемой, расскажите действительно ли дело в этом, либо я что-то упускаю? И самое главное, как правильно и грамотно сделать такое действивие е при наведении мыши, желательно средствами css, если это возможно.

Гуглил эту тему, но как-то не попалось решение. Так как я нуб, сделал самое простое и очевидное решение и решил поделиться с нубами всего мира Суть: на одной строке должно располагаться несколько DIV'ов с одинаковыми отступами, одинаковой высотой и шириной, что их как бы центрирует. Путей решения этой задачи наверняка много, а самый простой вариант: <content> <div></div><div></div><div></div><div></div> <div></div><div></div><div></div><div></div> </content> В принципе, решение на CSS мне виделось примерно: height: width; -- но так к сожалению (или счастью) нельзя. Зато можно использовать фичу CSS3 для ширины: content{ display: block; height: 512px; width: auto; margin: 16px; padding: 4px; background: #fff; } content div{ display: inline-block; /* блоки на одной строке */ min-height: 128px; width: calc(100% / 4 - 8px); /* Используем CSS3 для расчёта ширины блоков, вычтем отступы, созданные margin и padding */ background: #ccc; margin: 4px; } Минимальная высота указана для случаев, когда ширина меньше 128 пикс, что можно сделать и для ширины. Просто так, потому что могу. И осталось только узнать ширину, подставив её в CSS: $(function(){ var myWidth = $('content div').width(); // получаем ширину $('content div').css("height", myWidth); // устанавливаем её }); В итоге оно работает на jsfiddle. Вот и всё! Делитесь своими решениями.

Как сделать, чтобы абсолютный блок не обрезался внешним блоком с ограничением overflow:auto. Структура такая: <div style='overflow:auto; width:500px;'> <div style='position:relative'> <div style='position:absolute; width:1000px;'> длииииииииииииииииииинннннннннннннннннннннннныыыыыыыыыыыыыыыыыыйййййййййййййййййййй тееееееееееееееееккккккккккккссссссссссссттттттттт </div> </div> </div> Как сделать, что бы блок с текстом не обрезался внешним дивом с overflow, но при этом позиционировался относительно блока relative? z-index менял. В статичный блок абсолютный помещал.

почему диф в конце списка опустился тем самым увеличивая высоту ли с бордерами *{ margin:; padding:; border: none; } .wheader{ text-align: center; width: 1100px; margin: auto; height: 90px; } .wheader img { margin-top: 20px; } .wmenu{ height: 50px; background-color: #fafafa; border: 1px solid #eee; } .menu{ width: 1100px; margin: auto; height: 50px; } .menu-list{ list-style:none; display:table-row; } .menu-list li{ display:table-cell; width:auto; text-align:center; border-left:2px solid #eee; } .menu-list a:hover{background-color: #eee; } .menu-list li:last-child{ border-right:2px solid #eee; } .menu-list li a { display:block; width:1000px; height:50px; vertical-align:middle; display:table-cell; font:14px Verdana, Geneva, sans-serif; color:#777; text-decoration:none; } .search-box{ width: 300px; height: 50px; } <!DOCTYPE HTML> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="author" content="Boomer" /> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" type="text/css"/> <title>Интернет магазин Ортопедической обуви</title> </head> <body> <div class="page"> <div class="header"> <div class="wheader"> <a href="/"><img src="images/logo.png" alt="Логотип сайта"/></a> </div> <div class="wmenu"> <div class="menu"> <ul class="menu-list"> <li><a href="#">Categori1</a></li> <li><a href="#">Categori2</a></li> <li><a href="#">Categori3</a></li> <li><a href="#">Контакты</a></li> <li><div class="search-box"><form method="get" action=""> <input type="text" name="seacrh-text" placeholder="Поиск" /> </form></div></li> </ul> </div> </div> </div> </div> </body> </html>

Всем привет, Вроде бональная проблема, но уже несколько часов не могу ее решить. Есть сайт http://aroundthailand.ru. Слева есть блок "сайдбар" ни в какую не тянится на всю ширину экрана. Изначально сайдбар был прилеплен с помощью скрипта. Функция высчитывала высоту и добавляла новые параметры в CSS. Эту фишку отключил, но теперь образовалась пустая область. Надеюсь на помощь. Заранее спасибо.