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
29,542 questions in this forum
-
Как совместить в одной ссылке несколько атрибутов rel?
Есть на сайте ссылка-картинка на профиль G+, в ней три атрибута rel: <a rel="me" href="https://plus.google.com/u/0/105.....8276?rel=author" rel="nofollow" target="_blank"> <img title="Добавиться в Google+" src="http://..../gplus.png" alt="Google+" style="border:0;width:32px;height:32px;"/></a> мне кажется что атрибут rel="nofollow" в этой ссылке не работает, так как она вроде бы определяется как открытая к индексации. Можно ли ставить несколько атрибутов rel в одной ссылке, будут ли они работать и как это сделать правильно?
0 votes9 answers -
Gulp, с чем его едят?
Добрый день. Прошу помочь разобраться с этим зверем. Js знаю на уровне написания скриптов на jquery. Что пока есть. Установил Node, gulp. В папке с проектом создал папку dev, в которой храню less,js исходники bootstrap. (Bootstrap просто взял чтобы поучиться настраивать gulp) Задача состоит вот в чем. Хочу чтобы less файлы объединялись в один, затем конвертировались в css, прогонялись через autoprefixer минимизировался и сохранялся в папке /css/min.css Так же и js, но с этим думаю справлюсь как пойму принцип. Так же вопрос насчет плагинов, нужно их самому ставить если стоит npm? Допустим вот исходный файл gulpfile.js var gulp = require('gulp');gulp.task('css', func…
0 votes6 answers -
Сложное обтекание div-ов
Здравствуйте. Столкнулся со следующей проблемой с обтеканием div-ов. На картинках ниже приведено, что есть и что нужно получить. Это у нас есть: (http://itmages.ru/image/view/287959/d5fb3475) А вот так надо: (http://itmages.ru/image/view/287960/4a7d5e0b) Код: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> <style> .news_main{ font-weight:normal; text-align:left; padding-top: 3px; padding-bottom: 7px; } .news_box{ text-align: left; vertical-align: top; padding: none; height: auto…
0 votes4 answers -
div лесенкой
Не могу нормальным способом сделать следующее: - слой - слой - слой - слой Единственное, что приходит в голову - или каждому слою дать id или запихнуть слой № 2 в №1, 3 в 2, 4 в 3 и каждому выставить отступ.
0 votes4 answers -
Резиновая шапка при фиксированном сайте
Сайт на шаблоне с фиксированной шириной. Необходимо сделать на сайте шапку. Сейчас шапка на сайте есть, сделана по вот этому уроку, но вариант не подходит, так как в нём используется body { background <...> }, а мне нужно через backgroung задать сайту фон. Пробовал ещё такое решение: CSS: .container { background: #fff repeat; margin: 0 auto; height: 192px; width: 100%; overflow: hidden; position: relative; } template.php: <div class="container"> <div align="center"><img src="http://site.ru/themes/theme/images/top.jpg" alt="" /></a></div> </div> С высотой шапки 192px и шириной >1700px. Но при использовании этого способа,…
0 votes8 answers -
Прыгает текст при наведении
сверстал меню из иконок и текста и выделил это все добро borderом при наведении. когда наводишь на картинку текст прыгает как сделать так чтобы он не прыгал. вот здесь можно посмореть ->http://test19.testilpi.ru меню там где краны и т.п...
0 votes8 answers -
Вопрос по перекатываниям
Всем привет,у меня такая ситуация:решил сделать кнопки с эффектом перекатывания,но через CSS и с помощью идендификаторов,с JS ещ? не знаком,так вот первые две кнопки отображаются нормально,но когда я делаю третий идентификатор с указанием картинки и функцией hover,то кнопки изчезают,в ч?м дело?Буду очень благодарен за ответ. Вот код: A#rollover{ background: url('Глава1.gif'); display: inline; width: 80px; height: 40px; border: 0px solid #000; position:absolute; left:140px; top:20px; } A#rollover:hover{ background: url('Глава1(актив).gif') } A#rollover2{ background: url('Глава2.gif'); display: inline; width: 80px; height: 40px; border: 0px solid #000; position:absolute; l…
0 votes15 answers -
Тянущийся фон
Собственно вопрос. При разрешении монитора 1024*768 пользователь должен видеть только картинку center. Пользователь с разрешением выше, чем 1024*768 должен видеть уже картинки left_1, center, right_1. Пользователь, у которого разрешение ещё больше, видит left_2, left_1, center, right_1, right_2. Если у пользователя разрешение ещё больше, то он видит все картинки, а картинка left_3 и right_3 должны полностью замощать оставшееся пространство Кода не требую. Просто хочу понять, как это можно сделать Спасибо
0 votes14 answers -
Форма контактов на Twitter Bootstrap
Нашел интересную форму контактов сделанную на Twitter Bootstrap, стараю повторить тоже самое на своем сайте, но не получается. Ссылка на урок: http://bootstrap-ninja.ru/snippets/snippet-details/snippet-contacts-form.html Должно получиться так: А у меня получается так: Вот мой исходный код, согласно инструкции я все верно сделал: <!DOCTYPE html><html lang="ru"><head> <meta charset="utf-8"> <title>nartan.ru</title> <!-- Bootstrap --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css"></head> <body><div class="container"> <br /> <br /> <a href="../" cla…
0 votes5 answers -
распределение дивов
Вопщем такой вопрос созрел: надо сделать из 4 дивов которые выводятся друг за другом, что бы при сжимании окна браузера они смешались вниз тока по 2, а не по 1-ому. <div style="float:left; width:200;">12345</div> <div style="float:left; width:200;">123456</div> <div style="float:left; width:200;">1234567</div> <div style="float:left; width:200;">1234578</div> Может кто уже делал что-то подобное, помогите плиз!) {...перенесено "Слои" kiD}
0 votes14 answers -
Помогите с сочитанием горизонтальных и вертикальных списков (ul li)
Есть сайт http://www.microsoft.com/web/platform/default.aspx Пытаюсь перерисовать его дизайн. Основное горизонтальное (чёрное) меню удалось, по нажатию на кнопку сделал popup меню, в котором должен быть выбор элементов - так же сделал через ul и li. Но этот выбор никак не хочет вставать вертикально! Копирую часть кода с этим списком в отдельный htm, там он вертикально. С помощью fireBug'а сравниваю css свойства в обоих файлах у этих ul и li - одинаковы (display: block !important). При этом смотрю свойства li горизонтального меню - там display: list-item, а не inline. Помогите поднять второстепенный список вертикально. Так же не понимаю как microsoft положил список горизон…
0 votes6 answers -
растягивание фона
Можно ли сделать так, чтобы фоновое изображение ячейки растягивалось на ширину ячейки? У вас наверно может возникнуть вопрос зачем мне это надо. но у меня на сайте есть горизонтальна менюшка, которая состоит из 6 ячеек, в каждой их которой рисунок, шириной 184пиксела. и надо, чтобы менюшка тянулась в ширину 100%. я делал это давая ширину общей таблице 100%, и каждому рисунку 100% (ну и ячейкам по 16%),и вроде как все должно было тянуться хорошо. И так оно и было в ФФ, Сафари и Опере. Но всеми любимый нами ИЕ не хочет при уменьшении ширины браузера уменьшать рисунки меньше их действительного размера. больше-пожалуйста, растягивает нормально, но меньше-никак. Я уже не знаю,…
0 votes4 answers -
margin-left в IE6 удваивается
В IE6 удваивается марджин-лефт и сдвигает слой больше чем надо. Как с этим бороться подскажите плиз <!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=windows-1251"> <title>Untitled</title> <style> * { margin: 0px; padding: 0px; } #osnova{ width:100%; height: 100%; min-width:1000px; } #bodier{ height: 100%; background:#CFCFCF; position: relative; z-index:0; } #left_body{ width: 100%; height:600px; z-index:0; position: relative; } #podlogo{ backgro…
0 votes4 answers -
Не работают внешние таблицы стилей
Здравствуйте. Такая проблема. При выносе стилей в отдельные файлы с расширением .css они перестают работать в документе. Как только переношу код из файла назад в тег style всё снова работает. При том что javascript, подключаемый также из внешнего файла, работает нормально. Заранее спасибо за помощь Вот часть кода страницы и далее содержимое файла header.css: <DOCTYPE html> <html> <head> <link rel="stylesheet" type=”text/css” href=”../global/styles/header.css” /> </head> <body background="../global/images/bg1.png" text=black link=blue vlink=923b8b> <div id="header"> <table width=1280 align=center border=0 cellspacing=0 cel…
0 votes5 answers -
Прямоугольник+треугольник через псевдоэлемент и градиент
Как сверстать такую фигуру? Моя идея: Сделать прямоугольник, добавить через псевдоэлемент треугольник. но как сделать его так, чтобы залить градиентом таким же, как и у прямоугольника? Ссылка на псд. http://rghost.ru/56934778
0 votes5 answers -
Подключение стиля с помощью @media
Здравствуйте! Есть вот такая конструкция: <link rel='stylesheet' media='(min-width: 1281px) and (max-width: 1366px)' href='css/1366x768.css' /> <link rel='stylesheet' media='((min-width: 1025px) and (max-width: 1280px)) and ((min-height: 874) and (max-height: 900))' href='css/1280x1024.css' /> Но на практике она не работает... Хочу с её помощью подключать стилевой файл, если ширина окна будет колебаться от 1025 до 1280, а высота от 874 до 900 . Высота страницы задана в процентах, но высота блока с контентом - 874px. При увеличении ширины экрана (более 1280px) должен подключатся другой стилевой файл. Но почему-то этого не происходит. Даже при ширине в 1400 …
0 votes8 answers -
margin - padding в таблице
Хочу получить нумерованный список в ячейке таблицы и установить отступ от границы ячейки до цифр 10px. Вообще не врубаюсь в логику IE 6, Mozilla, Dreamweaver 8 и как они соответстыуют рекомендации http://www.w3.org/TR/REC-CSS2/box.html. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style title="text/css"> ol{ /*margin-left: 10px;*/ /*Непонятно... в IE 6 цифры не входят в блок ol и заходят на границу ячейки Как считает Mozilla 2.0.0.4 тоже не понятно*/ padding-left: 10px; /*IE 6, Mozilla, Dreamweaver 8 - у всех поразному ...*/ border: 1px solid #00FF66;} li{ …
0 votes7 answers -
Кнопка Сделать Стартовой
Подскажите пожалуйста какой адрес надо написать для кнопки чтоб при нажатии на нее моя страница делалась стартовой.
0 votes9 answers -
Дизайнер или я криворукий?
В общем у меня макет псд сайта. Нужно верстать и чтобы сайт был резиновым. Я копирую шапку, в псд макете она 900 пикселей в ширину. Потом вставляю в style.css ( #header { background-image: url (img/header.png); }) и шапка всё равно фиксированна, хотя в конструкторе хтмл шаблона указывал, чтобы сайт был резиновым. Если увеличивать ширину картинки в гимпе и потом вставлять, то всё равно же она фиксированна будет в браузере. Вопрос: какая ширина должна быть у сайта, когда он в псд, если сайт должен быть резиновым? Каким его должен делать дизайнер? Просто дизайнер мой друг и мы оба позорные дилетанты в сайтостроении, мы пока только 1 сделали и он был фиксированным, и вперв…
0 votes31 answers -
Не масштабируемый фон
Допустим есть такой код: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;padding:0;} html, body{height:100%;} .back{ width:100%; height:100%; background:url('1 (2).jpg') no-repeat; } </style> </head> <body> <div class="back"> </div> </body> </html> и выглядит все это вот так: если уменьшить страницу, то будет так: с увеличением тоже самое. как сделать так, что бы при изменении страницы фон оставался как на первой картинке?
0 votes14 answers -
верстка фиксирование позиции слоя
Всем привет. Решил вот поиграться с divной в?рсткой - натолкнулся на проблему: Идут подряд 2 дива: #main_logo { float: left; width: 25%; min-width: 300px; } #header_nav { min-width:400px; } В первом диве картинка, во втором текст. При уменьшении размеров окна текст во втором диве переносться как только хочет вплоть до того, этот див переноситься под див с картинкой. :/ Меня же такое положение вещей в корне не устраивает. Как это побороть?
0 votes5 answers -
Импорт ie-only.css
Не знаю может баян, не нашел ответа. В общем дано: 1. index.html: <link href="style.css" rel="stylesheet" type="text/css" media="all" charset="utf-8" /> 2. style.css 3. iestyle.css Как грамотней подключить iestyle.css ? Варианты: 1. В index.html пишем <!–[if lte IE 6]><style type="text/css">@import url("iestyle.css"); </style><![endif]–> 2. В style.css пишем @import "iestyle.css" all; В первом варианте грузим в два потока(для IE) что нежелательно, во втором варианте нет условий для @import, т.е. грузят все браузеры. Как быть? Идеальным решением был бы второй вариант если бы для него можно было задать условие (if IE). Или я много хочу?
0 votes8 answers -
Элемент сайта в отдельном файле.
Доброго времени суток. Пока разрабатывал сайт, понял, что нужно сделать меню в отдельном файле, чтобы при обновлении его, не переписывать каждую страницу, а намечается их довольно много. Посмотрел несколько форумов, предлагают через фреймы, но они меня не устраивают. Можно через php, но пока я далек от него. Поэтому хочу узнать, можно ли сделать так, чтоб меню подгружалось из отдельного файла, средствами обычного html? Если нет, то расскажите как сделать это с помощью php (желательно поподробней) или каким другим способом, может через js, если такое возможно? P.S. Ну и на последок посоветуйте пожалуйста хороший учебник по php. Всем спасибо.
0 votes13 answers -
Картинка напротив сайта в поисковике!
Подскажите код для того, чтобы при выдаче поисковиком (например яндексом) слева от текста была картинка. и код для добавления сайта в избранное. Спасибо!
0 votes16 answers -
почему размеры шрифта на макете и на сайте так различаются?
Например: 1. В фотошопе смотрю параметры шрифта: 2. пишу в css: span {font: 12pt Arial, sans-serif} 3. текст на макете: отображение в хроме (в других примерно также): Подскажите пожалуйста, почему такие различия?
0 votes13 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-