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
-
три состояния у SVG: закрасить svg (свойство fill не помогает)
у svg должно быть три состояния обычное, при наведении, при нажатии думаю как это сделать Vне бы хотелось его вставить в html разметку, а не просто с помощью bsckground-position. Т.к. я хочу анимации при наведении (transition). И я могу менять цвет обводки с помощью css-свойства fill. Но есть еще одно состояние когда картинка полностью закрашена. Как сделать чтобы то же свг закрашивалось полностью (например при добавлении класса)? У меня не получается просто добавить css свойство для этого Какие есть еще идеи? https://jsfiddle.net/ypqz5Lh6/
0 votes13 answers -
Как убрать отступ body
Начал верстать шаблон и сразу же непонятный момент. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"> </head> <body> <div class="container"> <div class="header"> <div class="product"> <h1>Product Name</h1> <ul class="sps"> <li>Put on this page information about your product</li> <li>A detailed description of your product</li> …
0 votes13 answers -
Три кусочека (зачёркнуто) слоя фона - градиент, заливка и рисунок. Бывает?
Да, я умею создать проблему на ровном месте. В данном случае требуется создать шаблон для объявления, состоящий из двухцветной рамки, белого поля для текста и логотипа в его правом нижнем углу (См.пример). Первое, что приходит на ум - создать DIV с фоном - первый уровень заливки с градиентом, на него наложить белый фон и на него уже в уголок - логотип. Например, использовать параметр border-box для градиентной заливки, padding-box для белой, а логотип - в правый нижний угол content-box. Но, конечно, я всё делаю неправильно и ничего не работает. Как я понимаю, именно заливка цветом ломает работу множественных фонов. А в принципе это возможно, или нужно усложн…
0 votes13 answers -
нарезка шаблона
здравствуйте. расскажите пожалуйста о основных принципах и правилах при нарезке psd-макетов для дальшейшей верстки. в идеале в реальным примером. спасибо. извиняюсь если не туда написал.
0 votes12 answers -
Индексация в яндексе
Специ, подскажите как поисковый паук яндекса читает код html, допустим если я выделю определенный блок страницы в отдельную папку поставлю запрет индексации на эту папку через робот.тхт будет ли данный блок проиндексирован? Блок через инклуд вставляется в определенную страницу которая разрешена для индексации яндекса. Задача стоит чтобы данный блок не был проиндексирован, но при этом нормально отображался на заданной странице. И второй вопросик, можно ли как-то поменять название тега например тег на <абра-кадабра>, при этом необходимо чтобы тег исполнылся как обычно. Извините если не ясно выразился, как смог.
0 votes12 answers -
про float и width
хреновый все-таки из меня дизайнер. имеем: .pic {float:left; padding:4px; margin:6px; background-color:#3c3c3c; border:1px solid #bdbdbd;} <div class="pic"> <a> <img> text </a> text </div> глюк - идут подряд картинки. пока размер одинаковый все нормально. как только встречается вместо 150*113 вертикальная 113*150, следующие две 150*113 благодаря float позиционируются вертикально и прилипают друг к другу. очевидное решение - задать постоянную высоту, одинаковую для всех картинок. ну, 150px+13pt+11pt примерно 185px. ширина 150px+4px*2(padding)+1px*2(border)=160px. чтоб избежать большого фона снизу, вводим внешний контейнер. получило…
0 votes12 answers -
заголовок нестандартным шрифтом
Здраствуйте, скажите плиз возможно ли сделать заголовок сайта каким-нить своеобразным шрифтом, но чтоб не картинкой, а именно текстом (для оптимизации), а файлик с этим шрифтом например положить где нить в корне?
0 votes12 answers -
кроссбраузерность - частный случай
Добрый вечер Создал первый в свой веб-сайт: http://peartree.ho.com.ua Сильно за дизайн не пинайте Писал, как посоветовали, под Мозиллу. Под Мозиллой работает нормально ? так как и планировал. Но если его открыть через ИЕ ? беда. Сразу возненавидел ИЕ? Подскажите, отчего все мои круглые уголки в левой части сместились вниз? Это хорошо видно здесь: http://peartree.ho.com.ua/news.php Вот кусок кода. Часть ПХП кода забрал, чтобы не отвлекал: .leftcol{ float: left; width: 170px; } .leftcol1,.leftcol2,.leftcol3{ background: #E8E8E8; position: relative; margin-bottom: 10px; } .leftcol4{ background: #E8E8E8; position: relative; } .bolt-top-left{ width: 18px; height: 18px; po…
0 votes12 answers -
HR - отступы, цвет
Подскажите, плиз, как сделать, чтобы у тэга не было отступов - нужно чтобы линия плотно прилегала к верхнему бордеру div-а, в котором находится.Margin и padding помогают, но только не для IE :/
0 votes12 answers -
вертикальное выравнивание div'а внутри div'а??
снова вопрос.. есть что то типа такого кода: <div class="one"> <div class="two"> <a href="boo.htm"><img src="boo.gif" /></a> </div> <div class="three"> <ul><li>boo</li></ul> </div> </div> и к нему CSS .one {width: 600px; height: 85px;} .two {width: 180px; height: 85px;} .three {height: 85px;} Меня интересует как картинку и список выровнять вертикально по центру (их габариты не известны)..
0 votes12 answers -
расположение сло?в
Здравствуйте! Есть два слоя в коде страницы: Some text within layer DIV1и сразу же после него ид?т Some text within layer DIV2Как сделать так, чтобы в броузере div2 был расположен выше чем div1?
0 votes12 answers -
frD-sss марджыны не марджыны?
есть сайт http://www.psi.net.ua/site/index.php вот немогу понять если я в css указываю margin: 0px 0px 0px 0px; то у меня всеравно отступы от контента появляются, а если я указываю margin: -5px -5px -5px -5px; то контент прилипает к бокам но только в ФФ а ИЕ ложыт на это дело с прибором =) да и ваще не выход это эти минусовые марджыны вот как мне сделать чеб теблицы сайта были действительно 100% и плотно прилегали к краям окна?
0 votes12 answers -
dysplay block общие вопросы
Подскажите пожалуйста, уважаемые знатоки, что это за ерунда: http://mp3frog.ru/index.xml Откуда берется этот непонятный отступ под картинкой в Opera и Firefox? В IE все нормально.
0 votes12 answers -
Обтекание текста вокруг изображения при "position:absolute;"
У меня не получается сделать обтекание у картинки которая расположена поверх двух http://powerslave.name/question/yes.gif. Прич?м т?мно фиолетовая часть динамическая, т.е. она полз?т вниз и может обтекать картинку полностью. Если текста в т?мно фиолетовой части не много (как в примере), картинку должен обекать текст в светло фиолетовой части. Так вот, при установке "position:absolute;" у дивного блока картинки, не получается обтекание. Может кто сталкивался, прошу помощи )). Вот что у меня получилось - http://powerslave.name/question/no.gifА вот и код : <div style="margin-top:10px;"><table border="0" cellspacing="0" cellpadding="0"> <tr style="height:5px…
0 votes12 answers -
Резиновый сайт
Вот у меня вопрос: является ли такой способ верстки хорошим, удобным? Как с помощью него сделать "резиновый сайт" чтоб он растягивался вдлину по мере поступления например новостей? Как лучше резать дизайн?? просветите плиз...
0 votes12 answers -
стили для четных/нечетных строк
следующий код нормально отображается мозилой: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> TR[class=even] TD { background: #FF99FF} TR[class=odd] TD{ border: 4px solid #FFCCFF;} </style> </head> <body> <table cellspacing="3"> <tr class="odd"> <td>Нефть</td> <td>43</td> <td>51</td> <td>79</td> </tr> <tr class="even"> <td>Золото</td> <td>29</td> <td>34</td> <td>48</td> </tr> <tr class="odd">…
0 votes12 answers -
Невероятная проблема с png
При реализации очередного проекта я столкнулся с невероятной трудностью в настройке отображения прозрачности png для IE<7. Дело в том, что я постоянно пользовался трюком с созданием .htc-файла, этого было достаточно. Но текущая задача заставила меня убрать тег img и вставить .png-файл в background. И тут начались невероятные трудности... Задача: сделать скругленные края у картинки. Решение: Поместить картинку в background , внутри которого будут лежать еще 4 с полупрозрачными .png-уголкамиРеализация: Ограничения, накладываемые задачей: размеры всех div должны быть одинаковы Думаю, идея ясна. Теперь проблема: в IE<7 как известно прозрачность зад…
0 votes12 answers -
Проблема с "display: block" при разметке в XHTML
Привет всем! Код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> #menu { font-size: 13px; } #menu a { display: block; float: left; height: 32px; border: 1 solid gray; padding: 0 10 0 10; line-height: 32px; background-color: lightgray; } #menu a:link, #menu a:visited, #menu a:hover { color: black; text-decoration: none; } </style> </head> <body> <div id="menu"> <a href="item1.html">Item_1</a>…
0 votes12 answers -
Background-image => width: 100%
Здравствуйте. скажите пожалуйста как можно растянуть фоновое изображение по ширине объекта? эээ... к примеру есть див... резиновый.... как установленое ему фоновое изображение растянуть по его ширине? спасибо
0 votes12 answers -
применение a:hover
Здравствуйте. Смену цвета ссылки при наведении я осилил. Подскажите, пожалуйста, как заставить картинку (Pic.jpg) появляться при наведении курсора на ссылку? Появиться она должна не в этой таблице, а ниже, на голом месте. IMG пришлось заключить в А тег, чтобы отображалось в IE. Нужно без скриптов и для всех браузеров (IE FF Op). ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .b { color: #FFFFFF; font-family: Tahoma; font-size: 13px; text-decoration: none; font-weight: bold; display: block; height: 35px; width: 155px; padding: 1px 7px 1px 7px; border-left: 1px #FFFFFF solid; } .b:hover { background-color: #AE0000 } ~~~~~~~~~~~~~~~~~~~~~~~…
0 votes12 answers -
width для IE6, IE7 и FF
Какой width будет у элемента для IE6, IE7 и FF: #element { width: 100px !important; width: 60px ; } PS: Убедительная просьба - объяснить по максимуму
0 votes12 answers -
проблема в ie, неправильный пересч?т картинок
Здраствуйте, имеется следующая проблема. Есть отдельная страница на которой выводится картинка и под ней панель навигации. Чтобы сохранить высоту страницы постоянной, я в css поставил обрезку картинок по высоте. Так вот в ie картинка искажается, поскольку он неправильно считает ширину файла (в css задано как auto) в ff и opera размеря считаются правильно. Ниже прив?л код страницы и css стили для них. <div class="one"> <div class="two"> <a href="img1.shtml" target="_blank"> <img src=" /pic/gallery/avdeev/avdeev1.jpg" alt="avdeev1.jpg, 1438 kB" title="avdeev1" class="image"></a> <div class="image_menu"> <a href="pre2.shtml">…
0 votes12 answers -
Не задается размер в 100% Div'у
HTML <div class="tr"> <div id="gradient1"></div> <div id="content">jlk df sfrvhjfukfrkfrykfrykkfrykfrykfykfjkfrykfryk </div> <div id="gradient2"></div> </div> CSS #gradient1{ width:150px; height:100%; background-image:URL(i/gradient1.jpg); background-repeat:repeat-y; float:left; } #content{ width:704px; height:100%; background-color:#53060e; float:left; } #gradient2{ width:149px; height:100%; background-image:URL(i/gradient2.jpg); background-repeat:repeat-y; float:left; } Это куски проблемного кода. При впечатывании текста в слой content, слои gradient1 и gradient2 не тянутся на height:100% по высоте родителя tr,…
0 votes12 answers -
XHTML и 100%-ная высота таблиц.
Дублирую тему с раздела Таблицы, вдруг здесь помощи найду... Собственно, я полагаю вопрос многим знаком, но я таки обьясню... Существует эта страничка, которая в HTML тянется в высоту за счет средней ячейки (ряда). Однако, на станице я применяю меню, которое требует XHTML. И тут начинаются проблемы. Ячейка НЕ ТЯНЕТСЯ в XHTML!!!!!! И никак я не могу этому помочь! ((( По крайней мере пока что... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title> XXXXXXXXXX </title> <meta http-equiv="Content-Type" content="te…
0 votes12 answers -
Почему валидатор не пропускает border во frameset?
Такая проблемка. Нужно чтоб страничка была валидной и чтоб адекватно (без бордеров) отображалась в IE, Opera, Firefox. :/ Вот код. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta name="Publisher" content=" "> <META http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta name="Publisher-Email" content="po"> <meta name="Description" content="nh"> <meta name="Keywords" content="fd"> <title>Неважно</title> </head> <frameset rows="117,*" border="0"> <frame frameborder="0" name="banner" src="top.htm" scrolli…
0 votes12 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-