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
-
Bootstrap: проблема с фиксацией блока ( affix)
Приветствую коллеги! Пытаюсь с помощью Bootstrap сверстать меню которое прокручивается до верхней границы экрана и там фиксируется. В Bootstrap для этого есть специальный класс affix ( http://twitter.githu...ript.html#affix ) Вертикальную фиксацию сделал, но не могу решить проблему с шириной. До фиксации ширина одна, после фиксации - другая. Хотя величина в свойствах стоит одна и та же (23.4... %) До фиксации: .row-fluid .span3 { width: 23.404255319148934%; *width: 23.351063829787233%; } После фиксации: .affix { position: fixed; top:0; width: 23.404255319148934%; /* *width: 23.351063829787233%;*/ } Ширина родительского элемента совпадает. Так в чём же проблема? Го…
0 votes2 answers -
Затемнение картинки divом
Здравствуйте! Имеется код типа: html <img src=""><div class="div_class"><a>Текст</a></div>css .div_class {display: table;}.div_class a {display: table-cell;text-align:center;vertical-align: middle;background-color: #2b2b2b;opacity: 0.75;color: #ffffff;}.div_class a:hover {background-color: #2b2b2b;opacity: 0.15;cursor: pointer;}Блок позиционирован абсолютно и находится поверх картинки, затемняя её по умолчанию. При наведении курсора затемнение снимается. Суть в том, что текст, как по умолчанию, так и при наведении имеет прозрачность. Есть какой-то способ оставить текст без прозрачности, исчезать (opacity: 0.15;) должен только фон, а текст ост…
0 votes2 answers -
Изменение рисунка при наведении курсора
Подскажите пожалуйста! Что делать что-бы верхняя картинка изменялась при наведении на ссылку? www.sdlmebel.h.com.ua
0 votes5 answers -
При верстке в utf-8, IE-6 как-будто не видит css...
Привет. Такая проблема, есть страница к примеру. В header'e расположены 2 блока ? 1. лого 2. правый блок, расположенный по правому краю. Если заметить, кодривка стоит - utf-8, при этой кодировке IE-6 как будто не видит стилей..т.е. правый блок не выравнивается по правому и что бы я не делал, какие бы стили я не прописывал в CSS, он их игнорирует, а если прописать их в самом div'e то все нормально... и ЕЩЕ ! когда я меняю кодировку на windows-1251, то УРА, ЗАРАБОТАЛО! В чем дело? Нужно разобраться... и надрать этому IE его наглый зад!) CSS body { margin: 0; padding: 0 15px 0 15px; font-family: Arial; font-size: small; background: #fff; color: #404040; background: url(..…
0 votes3 answers -
Обтекание блоков - как выровнять высоту блока-контейнера?
Всем здравствуйте. Есть такой код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test2</title> <style> div, h1, h2, h3, p { padding: 0; margin: 0; } h1, h2, h3 { padding-top: 9px; padding-bottom: 3px; } #container { width: 980px; margin: 0 auto; border: 1px solid #f00; background: #ccf; } </style> </head> <body> <div id="container"> <div style="border: 1px solid #000;"> <div style="width: 500px; float: left; border: 1px solid #000;"> Главная<br>О компании<br>Услуги </div> <div sty…
0 votes6 answers -
Вёрстка
Доброго времени суток! Подскажите пожалуйста новичку,какой нибудь простой psd макет для того,что бы с него сверстать страницу, нужен именно простой что бы научиться ну и разумеется советы какие нибудь,если таковые имеются,заранее благодарен!
0 votes22 answers -
Gif анимация и курсор
Всем привет! Ситуация такая. Есть код (из урока), благодаря которому при наведении мышью на картинку, она появляется сбоку увеличенная и при этом анимированная на пару секунд. Если курсор убрать с картинки, то анимацмия вынужденно преращается, так как gif, собственно, исчезает =) Может ли кто нибудь помочь подправить код, чтобы после отвода мышы гифка проигрывалась до конца, а уж потом изчезала? Заранее благодарю! <STYLE type=text/css> .bar A { DISPLAY: inline } .bar A SPAN { DISPLAY: none } .bar A:hover SPAN { DISPLAY: inline; right: 30px; POSITION: absolute } .bar A:hover { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; COLOR: #f90…
0 votes2 answers -
переход между страницами
возможно ли сделать такой интересный переход влево вправо между страницами на хтмл? например как на сайте http://luxedeco.ru/ www.igorpronin.ru если да то как? скиньте примеры кода, скрипты, файлы
0 votes2 answers -
expression - зависимость контента от активной области браузера
Возникла проблемма. Имеется дизайн у которого по бокам много различных элементов(узоров). Сам шаблон в ширену 1200, а основная часть приблезительно 1000. 100пикс по левому и по правому краям занимают узоры. Прикрепил узоры слоями к основной части по левому и правому краю. Основная часть фиксированная, поэтому варианты с тянущейся основной отпадают.... Проблемма собственно в чем: пытаюсь адаптировать этот дизайн под 1024, но ничего не получается -- из-за узоров появляется полоса прокрутки. Нужно средствами CSS узнать ширешу экрана и в зависимости от расширения автоматически подрезать слои-узоы чтобы полосы не возникало. Слышал о небольших JavaScript включениях в файлы CSS…
0 votes7 answers -
Google chrome min-height , height:auto не робит!
#container { width:900px; height:auto !important; height:100%; min-height:100%; background-color:white; margin: 5px auto 0; } <div id="container"> [indent]<div id="header"></div> <div id="leftmenu"> <div id="logo"></div> <ul> <li><a href="index.php">Главная</a></li> <li><a href="index.php?p=articles">Статьи</a></li> <li><a href="index.php?p=about">Обо мне</a></li> <li><a href="index.php?p=feedback">Обратная связь</a></li> </ul> </div> <div id="content">много текста</div>[/indent] &l…
0 votes5 answers -
заблокирован из-за несоответствия типа MIME
https://proverka1.000webhostapp.com/ На пк сайт отлично работает, а на сервере не запускает css файлы : wp-content/plugins/fullpage172/fullpage/nav/section/filled-circles.css@ver=2.9.2 ; Перерыл весь интернет и не нашел ответа.Помогите )
0 votes3 answers -
Как запретить горизонтальную прокрутку?
Как запретить горизонтальную прокрутку?
0 votes4 answers -
не могу растянуть среднюю колонку в IE
Сайт сверстан таблицей из трех колонок. Крайние колонки ограничены шириной 160 пикселей, а средняя должна растягиваться на оставшуюся ширину экрана. Т.е. сайт должен быть резиновым. И везде это работает, но только не в IE. Если я задаю ширину любой ячейки в средней колонке = 100% - то таблица уходит за пределы экрана. Если не задаю - сжимается до одиноковой ширины с крайними колонками. Если вкладываю в нее (в любую ячейку в средней колонке) таблицу с шириной 100% - все равно не помогает. Вот код: <table width='100%' border='0' cellpadding='0' cellspacing='0'> <tr> <td width='160'> текст </td> <td> <table width='100%' cellpadding='0' cells…
0 votes5 answers -
browsersync.io работает только с html страницей
Что есть: - локальный сервер (OpenServer) - на локальном сервере сайт "php-site" - установлен чистый browsersync без grunt и прочего запускаю brosersync: browser-sync start --proxy "php-site" --file "*"в браузере открывается мой сайт с адресом http://localhost:3000 Автообновление работает только с html файлами, если сервер к примеру отдает script.php или style.css browsersync перестает обновлять страницу при изменении файлов. Как заставить работать автообновление brosersync с php?
0 votes3 answers -
Как залить сайт на хостинг?
Блин, кроме как на бесплатных хостингах не было сайта. Не знаю как залить сайт на хостинг допустим host-food.ru Зарегиался блин все дела, выбрал тариф, а куда заливать там все страницы, не нашел кнопки или модуля. Вобщем это больше похоже на репертуар "то ли лыжи то ли я". Подскажите пожалуйста...
0 votes9 answers -
Глюк в Опере
Чудеса, но на этот раз глючит Опера 9.26, а в IE 6 всё нормально. Вот эта страница отображается нормально, как просили: http://www.trinity-bridge.221b.ru/index.htm Обратите внимание, что поле контента отстоит от нижней рамки на 10 px (bottom: 10px;), независимо от разрешения экрана. Теперь делаем невинную вещь: вставляем в контент ещё одну картинку с обтеканием. И всё - поле контента уезжает вниз за край экрана: http://www.trinity-bridge.221b.ru/index2.htm В IE 6 при этом всё нормально, но это, видимо, оттого, что для IE там прописаны костыли, по совету Searcher: *height: expression(parentNode.offsetHeight - 165 + 'px'); *width: expression(parentNode.offsetWidth - 344 + '…
0 votes16 answers -
Помогите пожалуйста выронять меню
Здравствуйте. Я "верстаю" шаблон, и в ie6 верхнее меню не пристыковывается с левой стороны к шапке. А firefoxe всё хорошо. Вот вёрстка HTML <!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" /> <title>Rational by Free CSS Templates</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="outer"> <div id="header"&…
0 votes22 answers -
Портфолио на Github
Добрый день. Сделал страницу с портфолио и разместил на Github.io. И вот какая проблема - при переходе по ссылкам на работы вся верстка ломается, и вроде бы причину нашел. Каким то образом в HTML файле в head оказывается инлайновый стиль, но он чужеродный, в моей верстке его нет. Выключаю его в инструментах разработчика все норм. Но как мне вообще от него избавиться? Где это, откуда, вообще не пойму. Ссылка на порфолио http://cdsy.github.io/ Ниже сам кусок кода от которого надо избавиться. <style><!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta http-e…
0 votes0 answers -
жирный шрифт в таблице при XHTML 1.0 Strict
добрый день. Первый раз столкнулся с такой проблемой, использую доктайп <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> и как оказалось в нем(именно из-за него, проверил) не могу сделать текст жирным ни одним из пришедших мне в голову способом. Мистика какая-то, ни задание класса для td с параметром font-weight:bold,ни для всех td,даже прописывание тега <b> ничего не прокатывает. Подскажите кто знает,как по этому стандарту.сделать жирный текст
0 votes7 answers -
Резиновый сайт
Есть шапка размером 1024Х180px Хочу сделать чтоб шапка при больших разрещениях увеличивалась ,а при уменьшении экрана на 700-800 пикселей ,чтоб появлялась во всех браузерах полоса прокрутки, чтоб нормально показывалось на всю ширину на экранах 15,17,19,22 дюйма. Подскажите как, код пробный. Проблема в том, что у меня не появляеться полоса прокрутки при уменьшении окна браузера на меньше 800 пикселей в браузере ИЕ, там и 900 и 1000 пикселей, полоса появляеться. А в др. браузерах аообще не появляеться при уменьшении на меньше 800 пикселей. Хочу чтоб на всю шрину было в экранах размером 15,17,19,22 дюйма. Подскажите как в моём коде правильно написать. Заранее благодарю за …
0 votes26 answers -
Выравнивание блока и input
<!DOCTYPE html> <html> <head> <title>Добавление адресата</title> <style type="text/css"> body { font-family: "arial", sans-serif; font-size: 12px; font-size-adjust: none; font-style: normal; font-variant: normal; font-weight: 400; line-height: 110%; color: #333333; } .side1 { margin: 0pt 2% 0pt 0pt; padding: 0px 0pt 0pt; width: 65%; overflow: hidden; min-width: 550px; } .big_input { width: 99%; } select.big_select { width: 85%; /*min-width: 350px;*/ max-width: 715px; } .dark_grey { margin: 0pt; padding: 1pt 15px 7px; background: rgb(228, 228, 228) none repeat scroll 0% 50%; } .big_textare { margin: 0; display: block; width: 99%; cli…
0 votes6 answers -
http://www.htmlbook.ru/css/hover.html - в IE6 меню не работает
Народ такая ситуация, во на сайте дается код выпадающей менюшки!! Так вот в IE6 она вообще не работает!!! Как исправить??? Код написал <!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"> <title>hover</title> <style type="text/css"> UL { width: 180px; /* Ширина меню */ list-style: none; /* Для списка убираем маркеры */ margin: 0; /* Нет отступов вокруг */ padding: 0; /* Убираем поля вокруг текста */ font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */ font…
0 votes4 answers -
Проблема с позиционированием
Не знаю, обсуждалась данная тема или нет, простите нет времени просматривать кучу тем. Суть проблема следующая: Сайт состоит из 3 таблиц - верхняя и нижняя имеют фиксированную высоту. Среднюю с контентом разбиваю на 3 ячейки, правая и левая (менюшки) тоже с фиксированной шириной, средняя width="100%". Проблема в том что в крайних колонках с менюшками, хочу к их дну прикрепить картинки но чтобы у всей ячейки был valign="top", чтобы выровнять слои с менюшками и чтобы ячейки имели резиновый дизайн и тянулись на 100% в высоту. Пример такого сайта http://promteks-ips.ru, но там это работает потому что quot;-//W3C//DTD HTML 4.0 Transitional//EN">, а при quot;-//W3C//DTD HTML…
0 votes14 answers -
Как сделать слой ССЫЛКОЙ??
Всем привет, возникла проблема незнаю как слой сделать ссылкой, например есть слой #bob1{ POSITION:absolute; left: auto; right: 50px; top: 0px; bottom: auto; WIDTH: 192px; HEIGHT: 100px; background-image: url(BOB1.gif); background-repeat: repeat-y;} Ссылка сама работает, НО!!! когда наводишь на этот слой курсор "рука" не отображается, т.е курсор мыши не меняется как это обычно бывает когда наводишь на ссылку, Как сделать что бы при наведении курсора на этот слой, курсор реагировал что это ссылка?? подозреваю что с помощью ONMOUSEOVER но как именно незнаю, буду признателен за помощь.
0 votes11 answers -
как диву присвоить высоту другого дава?
Знаю что на чистом CSS это почти невозможно, так как у меня два дива внутри другого, и один из них float, а вот как это сделать хотя бы через JS?
0 votes5 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-