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
-
PF Beau Sans Pro vs Webkit
Есть набор шрифтов PF Beau Sans Pro. Шрифты лицензионные со всеми делами и подключены по всем канонам. Разновидности типа Regular, Bold, Light во все браузерах отображаются замечательно. А вот Italic и Light Italic в браузерах на движке webkit никак не хотят заводиться, что латиница, что кириллица. Инспектор хрома показывает, что шрифт как бы подключен, но на деле текст выглядит как Times New Roman. В IE и Firefox все отлично. Шрифты изначально были в формате ttf, даже при подключении этих оригинальных файлов хром игнорирует две эти разновидности. Так что конвертация в другие форматы здесь не причем. Может это косяк самих исходных файлов, возмножно ли такое?
0 votes4 answers -
Опять IE(((
Решил скачать шаблон сайта PSD и еще потренироваться верстать на слоях... Дошел до этого момента, пересматриваю в браузерах.. Опера - нормально, Фаерфокс - нормально, Гуглхром, Сафари тоже также, IE - чего!!??... Получается так, во всех браузерах кроме IE выглядит так: (снизил чуть качевство канечн) А в IE всё перекареживает, пытался, пытался всёравно или текст слит или как на картинке и слит и снесен... Что надо сделать или что неправильно? Код: <!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" …
0 votes6 answers -
Картинка при наведении + навигационная карта
Попробую детальней описать свою проблему. У меня есть картинка карты страны. Там много городов. Каждый город я выделил на картинке (карте) чёрной жирной точкой. Мне нужно, чтобы каждый город имел ссылку. Это можно воплотить с помощью навигационной карты. Но есть одна загвоздка: при этом мне надо, чтобы наводя мышкой на город, его картинка изменялась - то есть чёрная точка изменялась, например, на синюю. Подскажите как подобное воплотить? Просто уже много вариантов испробовал, но полностью ни один не подошёл.
0 votes7 answers -
@font-face (svg) и Safari для iPhone/iPad
Пробую вставлять шрифты, пользуясь онлайн-генератором от fontsquirrel.com (AFAIK самый известный). Он дает на выходе пакет из 4-х форматов, один из которых — SVG — вроде как специательно предназначен для iPhone/iPad. На практике на этих девайсах шрифт не подхватывается (похоже, что вообще берется дефолтный системный — на айфоне у него даже размер другой, крупнее). Что характерно, онлайн-демо на самом сайте (вот, например) тоже не работают. Никто не сталкивался с такой проблемой? В какую сторону копать? В принципе-то ведь SVG-шрифты должны поддерживаться...
0 votes4 answers -
Проверка кроссбраузерности.
Решил заняться версткой более менее профессионально, а не на уровне подправить что-то или сверстать простенькую страничку. Сразу же возник вопрос - как организовать проверку в разных браузерах? Например такое требование к макету: FireFox 2+, Opera 9.0+, Safari, Chrome, IE 6.0+ 1) Какие версии браузеров ставить? Все? Но тогда проверка во всех займет достаточно продолжительное время, так как одних опер больше 30 выйдет. 2) Что делать с IE6? Ставить его одного на виртуалку? 3) Различается ли отображение в разных ОС у одного и того же браузера? 4) Можно ли это как нибудь автоматизировать? Что то типо http://www.lunascape.tv/ но только с выбором нужного браузера, как в IEte…
0 votes12 answers -
DOM или Sprite
В вёрстке мне необходимо изображать несколько квадратов внутри ячейки таблицы. Их можно сделать с помощью применения стилей к некоторому элементу DOM. Например, сделать три div. С одинаковой шириной и высотой, дать отступ справа, выровнять их вправо с помощью float. Но можно сделать Sprite и подставлять эти же квадратики фоном. Я уже делал и так и так. По моим наблюдение много float тормозит отображение. А использование фонового изображения создаёт эффект, что картинки появляются не сразу. Так как таких квадратиком до сотни на странице. Какие вы видите за или против этих двух способов? Или может есть что-то лучше, чем я описал?
0 votes17 answers -
Наследование высоты блока
Друзья, помогите разобраться... уже весь мозг сломал Есть 2 блока, левый основной и правый, который должен наследовать высоту левого. Но есть небольшая хитрость! Максимальная высота левого не ограничена, когда как минимальная - 400px. У правого нужно жестко зафиксировать, что если высота левого 400px, то у него 400px. А если больше 400, то наследовать его высоту, которая меняется в зависимости от наполнения! Собственно все это нужно, что бы прикрутить полосу прокрутки для правого блока. Т.е. если вдруг высота правого становится больше левого, то у него должна появляться прокрутка! Возможно криво объяснил #main { float: left; margin-top: 16px; background-image: ur…
0 votes2 answers -
Резиновый трех колонных макет
Здравствуйте, не могу понять как составить трёх колонный макет. Как на картинке: html: <div id="structure"> <div id="header"> </div> <div id="l_menu"> </div> <div id="content"> </div> <div id="r_menu"> </div> </div> CSS: #structure { position: relative; width: 80%; height: 100%; left: 10%} #header {width: 100%; height: 100px} #l_menu {height: 100%; width: 150px; float: left} #content {height: 100%; float: left } #r_menu {height: 100%; width: 150px} #bottom {width: 100%; height: 50px } что здесь не так? надо что б content занимал всё оставшееся место после l_menu и r_menu
0 votes9 answers -
В Chrome не работает псевдокласс focus для моего кода. помогите разобраться!
Всем привет! помогите разобраться. очень нада. есть вот следующий код с эффектом раскрывающегося списка при клике на нем используя только css c псевдоклассом focus. хочу испольховать его. пример тут Но проблемма! В Chrome данный эффект не работает, а в остальных браузерах работает. если кто знает как эту проблемму можно решить? заранее благодарен.
0 votes3 answers -
Проблема с Мозиллой
Не знаю что делать, помогите : Разрабатываемая страница работает в IE, Opera, но отказывается отображать что либо в Мозилле (вместо рисунков и фреймов просто пустые рамки ) Что делать?
0 votes6 answers -
Исчезает контент во фрейме при overflow: hidden
Есть страничка с фреймами. В левом фрейме дерево папок и файлов. Для элементов в дереве стоит свойство overflow: hidden, иначе происходит наложение и много других проблем. Если контент не помещается в ширину фрейма, он исчезает в ИЕ6. В Других браузерах (Опера, Сафари) показывает все, что помещается, остальное обрезается (как я и ожидал). В ФФ (в другом фрейме) происходит что-то подобное - слишком длинное слово не отображается, если не умещается в ширину фрейма, а во фрейме с деревом все нормально. Проблема исчезает при увеличении ширины фрейма. Но тогда фрейм становится слишком широким и неудобным для использования, тем более, что трудно предугадать, какой ещ? ширины бу…
0 votes2 answers -
Фон ячейки таблицы
Вопрос к спецам: В таблице задал фон ячейки изображение, результат на компьютере: http://forum.astralife.ru/uploads/12267520...4_3102_9237.png Выгрузил в сеть, показывает пустые ячейки (только текст): http://forum.astralife.ru/uploads/12267520..._3102_24049.png Причём проверял раз пять и там и там, перезаливал страницы, опять проверял. При локальном просмотре есть, в сети нет! Что это? Листинг фрагмент: <tr height="27"> <td align="center" valign="center" background="files/str.png">http://</td> PNG'шка 12 х 27 х 24b P.S. А не может сказываться XHTML 1.0 Strict , мол что не полное разделение оформления и содержания? http://stepbystep.htmlbook.ru/?id=62
0 votes5 answers -
небольшой баг с растягиваем.
столкнулся вот с такой проблемой. сверстал макет, растягивание от 1024 -1280. при 1024 все смотрится классно, но при растягивании появляется небольшой промежуток залил на сервер предварительный макет (обратите внимание между картиной погрузчика и поясняющим текстом при разрешении 1280 пик.) не могу понять если при 1024 все смотриться нормально, и растягивается пропорционально, почему тогда появляется такой отступ. общая ширина доукмента 960px. баннер: ссылки ширина 21% (однозначно нужно) общий контейнер (картника с текстом) - 77% фокта - 57% текст - 23% может распорядок соотношений не правильно? тогда почему при 1024 смотрится хорошо? спасибо.
0 votes14 answers -
в ie7 футер нормальный, в w3c-браузерах последний див в футере уезжает вниз
Помогите, пожалуйста. Верстаю страницу. В футере есть две строчки, одна над другой. Я их сделал дивами определённой высоты (их общая ширина такая, что не превышает высоту футера). Во всех браузерах что-то не так. Только в ie7 строчки не уезжают за границы футера. В остальных есть смещение вниз дива #copyright. Если ставлю line-height:0, то во всех браузерах исправляется, а в ie7 текст пропадает. Что здесь не так? С помощью Firebug-а в fitefox попробовал поотключать свойства у дива #copyright, так если у него убрать ширину, то всё исправляется <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l…
0 votes11 answers -
Линия с прозрачными краями (затухание)
Вопрос, как лучше сделать линию ?
0 votes5 answers -
input и градиент border
Подскажите пожалуйста есть ли возможность сделать градиентный бордер для <input> чтобы он появлялся при :focus состоянии, без JS. Только на css.
0 votes8 answers -
Bootstrap и twitter bootstrap
Здравствуйте! Я не пойму, а что bootstrap и twitter bootstrap -- это две разные вещи? (если что, bootstrap -- только недавно начала изучать)
0 votes16 answers -
присвоение классов элементам списка
Здравствуйте. Помогите пожалуйста разобраться новичку с данным вопросом. Подскажите где искать информацию на данную тему. Суть проблемы в следующем: начал делать двухуровневое выпадающее меню и оказалось все не так просто). Допустим есть многоуровневый список вложенный в <div class="memu">, смотрел видео и читал про создание таких меню и не могу понять как можно описать стиль отдельно для вложенных списков. В общем для меня конструкции вида:" .menu ul li {} .menu li ul {} .menu li ul ul {}" реально танцы с бубном не говоря уже о menu ul li:hover>ul и т.д. Не могу понять принципа как описывать свойство вложенного списка да еще и плюс ко всему там п…
0 votes10 answers -
белый iframe в IE7
Всем доброго времени суток. Начал изучать ХТМЛ сравнительно недавно (неделю) и уже столкнулся с первой проблемой. Я сделал страничку с фреймами (). То есть таблица, в ячейках фреймы и в них картинка, а в картинке еще один фрейм :-) Так вот, проблема заключается в том что при отображении данной страницы в мозилле и опере все нормально, но когда я ее запускаю в IE7 то пустой фрейм внутри картинки белый. В мозилле такого нет, там фрейм черный под цвет фона. Вот сайт http://icefroz.ucoz.ru Подскажите пожалуйста в чем дело. Заранее спасибо.
0 votes7 answers -
Сетка
здравствуйте недавно столкнулся с интересной проблемой и должен сказать без понятия как решить ее, без использования абсолютно позиционированных элементов или ужасной кучи блоков... имеем подобный макет: все разноцветные блоки - фотографии (к примеру) собственно интересно есть ли какие хитрости, которые могут помочь расположить фотографии как показано в макете?
0 votes27 answers -
Как присвоить стили CSS разным составляющим одного тэга <ul>
Доброго времени суток, друзья! Подскажите пожалуйста как мне поставить "Exemple" посередине между левой границей и "Home". Извините за неграмотное построение вопроса - я новичок... Вот код: HTML: <Doctype HTML> <html> <head> <meta charset='utf-8'> <link rel="stylesheet" type="text/css" href="new.css"> </head> <body> <nav role='navigation'> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">Our team</a></li> <li><a href="#">History</a></li> </ul> </li> <li><a href="#">Cli…
0 votes9 answers -
Как научится быстро верстать
Подскажите, как можно, научиться быстро верстать?
0 votes9 answers -
Как реализовать таблицу из 2-х ячеек в DIVах..
Есть таблица из 2-х ячеек, левая резина в правой картинка не фоном.(т.е. вся строчка 100% ширины).как реализовать на блоках... В резиновой ячейке может быть блок фиксированной ширины...нельзя чтобы при сжатии экрана картинка уходила вниз под блок в левой ячейке...
0 votes5 answers -
свойства тега br
привет. возник необычный вопрос: можно ли с помощью CSS убрать действие тега br ? то есть, чтоб этот тег не переносил строку. (двигло сайта выводит этот тег, а лезть в скрипты не хочу - это не сложно - поправить разметку в самих скриптах, но есть желание их не трогать - принципиально)
0 votes4 answers -
2 картинки на бэкграунд
Возникла необходимость вставить в бэкграунд с две картинки - одну в правом верхнем углу, другую - в левом нижнем. Как это можно реализовать?
0 votes9 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-