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
-
Некорректное растягивание input'а в процентах
Такая проблема, у меня задача поместить в div (который будет переменной длины), текстовый input который я пытаюсь растянуть на всю ширину родителя с помощью "width: 100%", но почему-то input вылезает за его пределы. Почему так происходит? Пример кода: http://jsfiddle.net/ws7v3ued/31/
0 votes3 answers -
Работа с текстом из фотошоп
Приветствую всех. Давно мучает такой вопрос: почему в шаблоне HTML отображается текст по другому, нежели в макете фотошоп и как сделать его одинаковым? Много раз видел профи шаблоны с идентичными текстами, а у меня такого не получается, хотя использую один шрифт Arial и в Фотошоп и в HTML... Раньше думал, что это связано в расстоянием между строк и между символов в HTML, что легко устраняется задаётся в css, но в профи макетах в css нет никаких правил, связанных с текстом. Мораль, текст не выровнять ни как и это портит вид HTML страницы.
0 votes4 answers -
Слайдер интернет- магазина
Подскажите, пожалуйста, как называется такой слайдер для интернет-магазина? Спасибо.
0 votes1 answer -
Схлопывание отступов и оверлей
Столкнулся с проблемой схлопывания отступов при уменьшении высоты браузерного окна. Пофиксил, добавив overflow: auto; родительскому элементу. Однако, на оверлей это не действует. Как исправить? <header class="header overlay"> <div class="header-content"> <h1 class="header-content__title">We are awesome creative agency</h1> <p class="header-content__descr">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accums…
0 votes0 answers -
Как отделить картинку от текста?
Как отделить картинку от текста
0 votes1 answer -
работа с summary
Как убрать маркер у тега summary. Прописываю в css summary::-webkit-details-marker{ display: none; } но ничего не меняется, маркер все так же есть
0 votes0 answers -
Прозрачность в IE
<!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=windows-1251"> <link rel="stylesheet" type="text/css" href="css2.css"> <title>Главная</title> </head> <body> <div class="ab">Прозрачность </div> </body> </html> body { background-color:rgb(0,0,0); opacity:0.5; filter: alpha(opacity=50); } .ab { background-color:rgb(255,255,255); } http://htmlbook.ru/css/opacity.html - сказано для IE прописать "filter: alpha(opacity=50)", прописываю - в IE 8 beta не работает.
0 votes1 answer -
Можно ли обнулить вышестоящий див?
у меня есть .roundedcornr_content_507949 div { height: 70px; padding-left: 71px; } Я работаю внутри этого класса (.roundedcornr_content_507949) Хочу теперь в него вставить див, но чтобы у него не была height:70px; Как это можно осуществить? Если не прописывать это через style?
0 votes1 answer -
баг ie6 ie7
Помогите с отступами между списками в іе!! КОД СSS: *{padding:0;margin:0} html{height:100%; } body{height:100%; background-color:#5b0302; font:10pt Arial, Helvetica, sans-serif; text-align:center;} ul{list-style-type:none; width:179px;} ul li{width:179px; height:62px;position:relative;} li ul{position:absolute; top:0; left:179px; } li a{display:block; text-decoration:none; font:12pt "Trebuchet MS", Arial, Helvetica, sans-serif; color:red;width:100%; height:100%;} li ul li{height:31px; width:179px;} код html: <ul id="menu"> <li style="background-color:#0F6"><a href="">Home</a> <ul> <li style="background-color:#F9F">…
0 votes3 answers -
проблема с margin-top
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="style/style.css" rel="stylesheet" type="text/css" /> <title>Верстка</title> <style> *{margin:0; padding:0;} #wrapper{ width:980px; height:910px; margin:0 auto; border:1px solid #000; } #header{ height:205px; background: -webkit-linear-gradient(top, #fff, #e8e9ed); background: -o-linear-gradient(top, #fff, #e8e9ed); background: -ms-linear-gradient(top, #fff, #e8e9ed); backgr…
0 votes2 answers -
В ie 6 дочерний блок выходит за границы родительского блока
Доброго времени суток! В ie 6 дочерний блок выходит за границы родительского блока,как это можно исправить? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Документ без названия</title> <style type="text/css"> *{ margin:0; padding:0; } #cont1{ zoom:0; } /* *** Float containers fix ***#cont1 { zoom: 1; } */ html,body{ height:100%; min-height:100%; height:auto !important; background-color:#D2F7DF;} #header{ height:100px; width:1000px; background:#D0D0D0; margin:0 auto…
0 votes3 answers -
Выравнивание сайта по центру
Здравствуйте (: Проблема в выравнивании сайта по центру. Ширина сайта - 1200px; Ширина шапки - 1600px; Сейчас так : body{ background:url(img/header.png) top center no-repeat, url(img/bg.gif) repeat; } #conteiner{ position: absolute; left: 50%; margin-left: -600px; width: 1200px;} При этом : Шапка смещена px на 20 влево. При масштабировании сайта увеличивается средняя часть сайта, с появлением скрола только вправо. (Т.е. видна середина и можно прокрутить её вправо, влево - нельзя) На мобильных устройствах сразу открывается так, что видна только середина и доступен скрол вправо. margin:0 auto;Не работает совсем. Если писать background для div'a header, то…
0 votes3 answers -
Проблема с div (наверное). Помогите!
Вот такой вот код: #prodbtn a { font-family: Century Gothic; font-size: 14px; text-decoration: none; background: #e5e5e5; padding: 5px; border: solid 1px black; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:5px; -khtml-border-radius:10px } #prodbtn a:hover { text-decoration: underline; background: #c1c1c1; } <a href = "http://link"><div id = "prodbtn">Оборудование</div></a> <a href = "http://link"><div id = "prodbtn">Программное обеспечение</div></a> Я в верстке шарю чуть лучше, чем никак. Хочу сделать 2 кнопки простенькие, на которых написано слово, а по клику пер…
0 votes3 answers -
Проблема с меню
Добрый день! Столкнулась с такой проблемой. При редактировании шаблона веб-сайта для одного знакомого фотографа изменила шрифты для cufon (увы, использовать хваленый @font-face не удалось - squirrel почти все выбранные шрифты отказался конвертировать). Ранее при наведении на пункт меню название раздела окрашивалось в голубой цвет, а сейчас все статично. Я весь мозг себе сломала. В стилях прописан hover элемент, но он отчего-то не работает. Может, не там ищу? Вот так выглядит исходный вариант (файлы залиты на yandex). Вот так получилось после преобразований с cufon (это я грешу на cufon, конечно же, вопрос и в другом может быть). Очень хотелось бы узнать мнение экспертов.
0 votes2 answers -
Как наложить кнопки rus и en на флеш?
Здравствуйте! Нужно на сайте www.btn.kiev.ua кнопки EN и RUS поставить на флеш. Подскажите как это сделать? Спасибо
0 votes6 answers -
Отображение [i] в текстовом редакторе как просто текст.
Доброго вам времени суток, уважаемые форумчане! Снова обращаюсь к вам с вопросом =) Есть сайт (не мой, но я знаю владельца и хотелось бы ему помочь. ссылку на сайт не даю чтобы не сочли рекламой, но если будет нужно - без проблем.), суть проблемы в следующем: когда редактируешь во встроенном на сайте редакторе текст страницы (редактор, похож на тот, в котором я сейчас пишу =)) часть кода он проглатывает элемент считая его открывающим bb-кодом курсива (как я понимаю), при вставке пробелов (вот так: [ i ]) всё отображается. Поменять букву в скобках конечно можно, но не хотелось бы. Поэтому интересно, существует ли решение такой проблемы? Если да, то поведайте мне пожалуйст…
0 votes5 answers -
Opacity
Здравствуйте. У меня есть блок, у которого стоит opacity 0.5, в блоке есть изображение и текст. Проблема в том, что от блока передается opacity к другим элементам в блоке. http://jsfiddle.net/Kz9Rm/
0 votes2 answers -
Небольшая проблема с JQzoom
Если резко переместить курсор вправо и остановить его на увеличенной области то она не исчезает вот пример Сайт BigLion использует этот плагин, пробовал копаться в их коде но не шашел как они смогли решить данную проблему, у них если быстро навести на увеличенную область которая справа то она исчезает как и положенно, вот пример
0 votes2 answers -
Форма поиска + :hover ,не работает при наведение на кнопку, как быть?
Как мне сделать, чтобы картинка кнопки была единым целым с оболочкой?? Никак не пойму, как сделать. Просто раньше никогда не делал на сайтах поиск :crazy: теперь пришлось. Когда пишу: z-index: 100; фигня получается. <form class="form-search" method="get" action="/search" target="_blank"><input type="text" name="q" value="Что-то ищите?" onfocus="if(this.value=='Что-то ищите?') this.value=''" onblur="if(this.value=='') this.value='Что-то ищите?'"/><input src="/img/search.png" type="image" alt="поиск"/></form>.form-search {display: inline-block;float: right;position: relative;right: 20px;top: 20px;}.form-search input {width: 100px;height: 25p…
0 votes2 answers -
Маска стрелки
http://jsfiddle.net/Zverushka/FxGXC/2/ Можно ли сделать подобное через маску (с применением в том числе свг для кроссбраузерности), но чтобы так - чтобы по сути мы вырезали только низ - чтобы слой обрезался так - чтобы была лишь стрелочка внизу и все - а по ширине и высоте могли быть любые размеры? Потому как сейчас для маски используется фиксированных размеров квадрат - не бесконечный по ширине и высоте (и если блок будет больше высоты и ширины маски - он просто обрежется и все ...
0 votes7 answers -
и снова вопрос по шрифту
Добрый день. Использую шрифт, семейства PF BeauSans Pro, так как он нестандартный, то использую такой скрипт, для кроссбраузерности: @font-face { font-family:"PF BeauSans Pro-Reg"; src:url('../fonts/PFBeauSansPro-Reg.eot'); src: url('../fonts/PFBeauSansPro-Reg.woff') format('woff'), url('../fonts/PFBeauSansPro-Reg.ttf') format('truetype'); url('../fonts/PFBeauSansPro-Reg.svg') format('svg'); font-weight: normal; font-style: normal;}Он отображается на всех браузерах, но не так как в макете: неаккуратно и жирность шрифта разная, от этого и цвет немного другой, не как в макете: Из макета Из сайта Из макета Из сайта Чем можно э…
0 votes2 answers -
Белая полоса
Добрый день участники форума! Я столкнулся с такой проблемой и не знаю как её решить,решил обратиться к вам за помощью..надеюсь поможете! Есть вот сайт, в хроме появляется белая полоса слева,в опере все хорошо,полоса появляется когда меняешь размеры окна браузера,как по мне вся проблема состоит в этом #body_top_bg {background: url(../images/body_top_bg.jpg) center top no-repeat;}Буду благодарен за подсказки и помощь.
0 votes2 answers -
Позиционирование в разных браузерах!
#logo { position: absolute; top: 15px; left: 55px; width: 220px; } #menu { position:absolute; top: 25px; right: 0px; } Вот такая конструкция. Логотип слева зафиксирован и с ним проблем нет. А вот меню относительно правого края страницы зафиксированно, но левый край меню "играет" туда сюда на несколько пиксел в зависимости от того, каким браузером смотреть Так и должно быть или я чего-то не дописал? С ув. Uncle Fox
0 votes1 answer -
Вопрос касается html, css. Возможно ли сделать список, как на сайте (ссыль на фото) без использования JS?
Всем привет. Вопрос касается html, css. Занимаюсь версткой сайта. Хотел бы сделать список (чисто на divах без конструкции ul li), который похож на тот, что был сделан на сайте (название сайта на картинке ) . Но я не могу с ходу понять... возможно ли сделать это без использования JS? Чисто через html и css3. Если можно, то как? Парочку попыток я предпринял. Сразу столкнулся с кучей проблем. Начиная с картинки, которая хоть и увеличивалась в блоке с помощью события hover, но была слегка забагована. Местами она просто навсего теряла эффект плавности и приобретала дерганное увеличение/уменьшение, что можно наблюдать в демонстрации к этой статье: http://tradebenefit.ru/art?i…
0 votes2 answers -
Айфон не видит правила display: block; для таблиц
Здравствуйте. Дописал адаптивные стили для сайта. Там жуткая вложенность таблиц, но я был уверен, что справлюсь, задавая для таблиц правило display: block; Тесты на андроидах прошли успешно. А вот с айфонами заминка. На определенной глубине вложенности они просто перестают реагировать на это правило, и выводят таблицы в качестве таблиц. Кое-где я смог справиться с этим. Но переверстывать весь сайт на дивы просто нереально. CMS оскоммерц для верстки с нуля мне не по зубам. Для теста верстки под айфон можно использовать этот сервис В нем и режим разработчика имеется. Положите в корзину товар и попробуйте сделать заказ - увидите такую карти…
0 votes1 answer
-
Обсуждения
-
Актуальные контакты: 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-