HTML Coding
Subforums
-
- 30.1k
- posts
-
- 1k
- posts
-
- Про макеты
- By klierik,
Explore Questions
There are no popular questions to show right now
-
0 votes0 answers
-
0 votes0 answers
-
0 votes0 answers
-
0 votes1 answer
-
0 votes3 answers
29542 questions in this forum
-
Вопрос по верстке
Приветствую всех. Я так вообще только дизайн рисую, но решил еще и версткой сайтов заняться. Верстаю сейчас шаблон по видео-уроку, но столкнулся с некими проблемами которые не охвачены в уроке, вроде до всего догнал, но столкнулся с проблемой footera он почему-то не лежит постоянно внизу и налазит на более старший div, подскажите пожалуйста в чем проблема. Вот домен на котором тестирую http://transfer.milanodiluxe.com/ спасибо всем заранее))
0 votes14 answers -
Responsive верстка
Добрый вечер, при ширине экране 480px внизу отображается скролл, справа большой отступ, помоги найти причину появления этого отступа, пробовал background-size - не помогло. Вот ссылка http://sport.teslalight.com.ua/ Спасибо.
0 votes10 answers -
Как получить все элементы tr из нескольких таблиц (JavaScript)
Здравствуйте! Есть, например, три таблицы. Для фильтрации по этим трем таблицам одновременно, необходимо получить все элементы tr из всех таблиц. https://jsfiddle.net/kn7L0jn4/1/ Подскажите, пожалуйста, как это правильно сделать?
0 votes4 answers -
CSS условия в стилях
Здравствуйте. Подскажите, возможно ли средствами CSS сделать такое: Есть кнопки в таблице. На кнопке есть числа 0 +0 И это все идет столбиком. Пока цифра однозначная, все ок. Но когда счет переходит на 2-3 знака, структура ломается 0 +0 10 +30 100 +1 Можно ли заранее заложить с помощью CSS условия в стилях? Чтобы было вроде: 0 + 0 10 + 8 100 +122
0 votes4 answers -
CSS сетки
В css сетках есть такое понятие как колонки, во фреймворке бутстрап их кол-во равно 12, в стилях им прописывают следующие ширины: Скрытый текст .col-12 { width: 100%; } .col-11 { width: 91.66666667%; } .col-10 { width: 83.33333333%; } .col-9 { width: 75%; } .col-8 { width: 66.66666667%; } .col-7 { width: 58.33333333%; } .col-6 { width: 50%; } .col-5 { width: 41.66666667%; } .col-4 { width: 33.33333333%; } .col-3 { width: 25%; } .col-2 { width: 16.66666667%; } .col-1 { width: 8.33333333%; } Так вот, откуда берутся эти ширины? Если я разделю 100…
0 votes9 answers -
Блочная верстка
Добрый день, пытался разметить страничку по заданному макету с помощью тега <div>, но столкнулся с проблемой, отступы превращают собранные блоки в полную мешанину. Размеры всех блоков заданы в процентах, размер <body> задан в пикселях. Отступы между элементами и краями <body>, должны быть одинаковыми. Ссылка на код, прилагается. Буду рад любым советам, заранее спасибо. https://jsfiddle.net/6v4t12yg/
0 votes4 answers -
Откуда стык фона в Chrome?
Добрый день. Столкнулся с тем, что в Хроме градиентный текстурный фон страницы имеет стык, причем если покрутить колесиком масштаб, он исчезает, пока не вернёшься к определённому масштабу. Вот картинка: Почему? В других браузерах такого нет. Вот код: <body> <div id="main"> ... </div> </body> body { font: 14px/21px Verdana, Geneva, sans-serif; text-align: center; color: #003; background: url(images/bg.jpg) repeat; } #main { width: 100%; text-align: center; background: url(images/bg2.jpg) repeat-x top;/*верхний текстурный градиент фона*/ }
0 votes14 answers -
Как вернее использовать логотип?
Логотип должен быть картинкой или фоном?
0 votes6 answers -
Отображение полей и кнопок было, как в Opera
Как сделать, прописать, чтобы отображение полей и кнопок, в других браузерах было, как в Opera <input name="LMI_PAYMENT_AMOUNT" size="3" value="10" title="Введите сумму"/> ... <select name="LMI_PAYEE_PURSE" title="Выбор валюты" style="min-width:30px;"> <optgroup label="Выбор"> <option value="1">WMR</option> <option value="2">WMZ</option> <option value="3">WME</option> <option value="4">WMU</option> <option value="5">WMB</option> </optgroup> <…
0 votes10 answers -
проблема с версткой сайта в ie
http://sitemakers.lo...l/html/comment/ зайдите на эту страницу в IE: тут-то и появились проблемы во всех остальных браузерах - нормально HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Документ без названия</title> <link href="/0.css" rel="stylesheet" type="text/css" /> <link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon" /> </head> <body> <div id="layoutblock"> <div id="headerblock…
0 votes11 answers -
Разная реакция браузеров на float
Здравствуйте . Подскажите пожалуйста , почему разные браузеры реагируют на свойство float по разному? Вот есть два блока <div id = 'shapka'> <div id = 'firsttable'> <table> </table> </div> </div> <div id = 'tm' > <table> ...................................................................... </table> <div> задаем такой стиль #firsttable table { margin-top: 14px; float: right; text-align: center; width: 56%; } и что мы видем в фаирфокс а в chrome т.е фаирфоксу пофиг что firstable находится в d…
0 votes14 answers -
PSD web ui какой смысл всех этих элементов?
Появилось желание немного разобраться в PSD Шаблонах. Представляю себе это так: в Фотошопе, или в чем-то похожем из PSD файла вырезаются нужнее элементы и вставляются на страницу. А в с самом PSD можно прикинуть как будет выглядеть страница. Понимаю, что для этого нужны навыки, но вопрос сейчас не об этом. Также удалось обнаружить, что есть просто некоторые компоненты: Кнопки, списки и т.д. Возьмем, к примеру вот этот http://www.freepik.com/free-psd/amazing-clean-web-ui-elements-kit-psd_596993.htm Допустим, вырежу я кнопку? и что дальше? ведь она будет иметь фиксированные размеры X*Y пикселей. Как я смогу написать более длинный текст? Дальше: сам прогресс-бар? А с ним-то …
0 votes3 answers -
Оформление блока графика работы
Доброго времени суток. Очень нужен ваш совет, по оформелнию, прикрепила картинку примера Есть расписание работы, по картинке видно, что полоски по длине меняются относительно друг друга (установленного времени) Не могу определиться с методом, который использовать, сперва хотела сделать slider, но через jQuery UI Slider выйдет как-то громоздко... Есть ли метод проще или можно сделать это чисто с помощью стилей? Спасибо.
0 votes2 answers -
Оформление страницы с помощью flexbox
Всем привет! Я очень начинающий верстальщик, можно сказать что совсем никакой но тяга к знаниям есть, подскажите пожалуйста как грамотно оформить страничку, расположить графические блоки в столбик, текст должен обтекать слева и справа, пример на скриншоте, как это описать в css? Пробовал через flex все делать но текст либо снизу, либо сверху остается. Спасибо за понимание!)
0 votes5 answers -
Проблемы с переносом на новую строку
Добрый день, уже довольно давно столкнулся с проблемой не желания Оперы вмещать текст в одну строку, хотя в том же IE и Мозиле все впорядке и еще место остается.. Вот на этой странице, в опере видно, что "11 Орангутан ( Pongo pygmaeus abelii, Pongo pygmaeus pygmaeus )" расположилось в двух строках. Мне же надо, чтобы оно не переносилось (если будете смотреть в IE, там будут проблемы с центральной колонной(она съезжает вниз, эту проблему уже решил, просто не закачал еще на сервер, так что не обращайте внимание). Вот что из кода, относящегося к этой колонне, есть #center { float:left; overflow:hidden; width:560px; min-height:500px; background: url(../i…
0 votes3 answers -
Css-где ошибка?
Всем привет, помогите пожалуйста. Не знаю где ошибка в css коде. нужно что бы при входи в класс "active", показывалась картинка de_1.png html: <div id="myle"> <li id="qtranslate-language-chooser" class="widget qtrans_widget_switch"> <ul class="qtrans_language_chooser" id="qtrans_language_chooser"> <li class="active"> <a href="http://www.myscreenevent.com/MY/" class="qtrans_flag qtrans_flag_de"> <span style="display:none">Deutsch</span> </a> </li> <li> <a href="http://www.myscreenevent.com/MY/?lang=en" class="qtrans_flag qtrans_flag_en"><span style="display:non…
0 votes2 answers -
embed и DM
Подскажите пожалуйста почему DM перехватывает mp3 из embed и предлагает скачать, можно ли как исправить? отключить интеграцию в DM не предлагать. <embed src="sounds/message1.mp3" hidden="false" width="0" height="0" autostart="true" loop="0" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed> Спасибо. Забыл добавить, в IE все нормально, потому что он запрашивает установку плагина, а Опера и Лис, ни чего не запрашивают, сразу предлагается закачка mp3
0 votes3 answers -
First-letter в Firefox
Во всём кроме Фаерфокс эта конструкция корректно работает, а как её подружить с ФФ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> a { display: block; width: 123px; height: 114px; border: #505050 1px solid; text-decoration: none; position: relative; } a:hover { background-image: none!important; background-color: #eff4e7!important; text-decoration: none!important; } a span { di…
0 votes5 answers -
Как работает height: 100% для <div>?
Почему тут работает height: 100% для <div>, а тут не работает?
0 votes2 answers -
Прыгают кнопки
Верстаю сайт, сделал резиновым по ширине, а один див не получается сделать нормальным по длине. Там есть большое меню, см. картинку, когда меняется разрешение, то иконки становятся не ровно, одна выше другая ниже и т.п, причем не знаю с чем это связано, добавляю vertical-align: top; Тогда все притягивается к верху и иконки не уезжают, а вот кнопки "подробнее", прикрепляются сразу после текста, т.е мне надо чтоб они все были на одной линии, а они на разных, т.к область с контентом разная по высоте. Если указываю область с контентом фиксированной высоты, то кнопки стоят на месте, но когда меняю разрешение, на них залазит текст, т, к он вылезает за границы блока, overflow…
0 votes12 answers -
Как пустить орнамент вдоль рамки?
Здравствуйте Есть задача вдоль рамки по внешнюю сторону от неё пустить орнамент на подобии такого: Посоветуйте, какое может быть решение? Благодарю
0 votes14 answers -
проблема с div'ом id=#topmenu
в css я писал для этого div'a margin-top:10px; а он отступает не от родительского div'a header , а я не знаю от чего, похоже от окна браузера. index.php: <?php // защита от прямого доступа к файлу defined('_JEXEC') or die; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" > <head> <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template…
0 votes4 answers -
Нету прозрачности в ie
Здравствуйте. Вот у меня по разному отображаются картинки в шапке. Пропадает прозрачность видимо. Причём это происходит в ie7 и ie8 (под ie6 не верстаю). Просто то, что я гуглил по этому вопросу, всё сводится к фиксу в ie6. Про 7 и 8 написано, что всё нормально должно быть. Вот пример: Ie 7: http://smotr.im/5QgD Chrome: http://smotr.im/5QgE
0 votes18 answers -
Меню сайта картинками
Хотел сделать меню сайта как здесь -> _http://www.mighty-sport.ru/ то есть меню состоит полностью из картинок и наползает на шапку, а при наведение на пункт одна картинка меняется меняется на другую (получается, что пункт под курсором выделяется). Долго мучился, но никак не получается, а на том сайте больно хитромудрый код, никак не могу разобраться. В общем то я знаю как сделать одинаковый background ко всем пунктам меню, если оно состоит из слов -> http://jsfiddle.net/7Jp2q/ Но в данном случае меню полностью состоит из готовых картинок и background присваивать просто не к чему. Гуглил, но точно таких готовых решений нет. Как это можно реализовать?
0 votes4 answers -
Рамка в виде изображения
Есть некая рамка, в которую заключены по всему сайту фотографии. Изображения имеют фиксированную ширину и длину. Вроде бы ничего сложного нет. Но по углам идет вырез, и все бы хорошо, но фон, на котором расположена эта рамка, не повторяющийся, а значит просто вставить как рисунком рамку нельзя. И прозрачной тоже соответственно не сделать, так как будет видно уголки фотографий. Как поступить, подскажите? Вот фото: http://joxi.ru/Zi5mBv3
0 votes6 answers
-
Обсуждения
-
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ -
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ Портфолио https://www.behance.net/d4d4186e
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-