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
-
Размещение блоков с контентом
Здраствуйте! Хотел бы узнать у вас, как делается подобный макет? Что мы имеем? (1) "Подложка" фиксированной ширины(по центру экрана) на которой размещаются контейнеры с контентом (2) Несколько блоков на "Подложке", а именно: Шапка, меню, два-три контейнера под меню(Там Мб личный кабинет, теги и тп), 5-7 контейнеров, расположенных справа от меню, в которых предпологается размещение новостей, подвал под всем этим делом ( Забыл нарисовать, но да ладно, с ним не возникает проблем) Итак, вопрос, как грамотнее всего реализовать данный макет? У самого были такие варианты: - с помощью position:fixed(left, top, right и bottom) попытаться все эти блоки разместить на "подложке". …
0 votes3 answers -
yandex опять пустое место показывает! как починить?
Приветствую, Вроде получалось победить яндекс, не было пустого места слева, причём мне этот способ подсказали в техподдержке яндекса. но на днях способ просто перестал работать. а техподдержка молчит. css для яндекса у меня: первые две команды - убрать привязку строки поиска - работает и сейчас, но третья строка раньше убирала пустое место слева. сейчас она ничего не делает. .b-head-floater_fixed_yes{display: none;} .b-scroll{display: none;} .b-page-layout__column-proxy {margin-left: 0 !important} я пробовал найти, что отвечает за появление прорехи и нашёл - смотреть вложенный рисунок. но - не получается переопределить. как мне переопределить для яндекса .b-serp-item { …
0 votes5 answers -
Как можно разместить по горизонтали несколько картинок ?
Как можно разместить по горизонтали несколько картинок ?
0 votes11 answers -
Как убрать вертикальный скролл если высота 100%
Добрый день! Второй день мучаюсь не могу найти ничего по данной проблеме! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>test</title> <style> html, body { height: 100%; widht: 100%; padding: 0; margin: 0; } .wrap{ height: 100%; width: 100%; padding: 0; margin: 0; position: relative; } .header{ height: 50px; width: 100%; background: blue; } .content{ height: 100%; min-height: 100%; padding: 10px 0; width: 100%; background: yellow; } .footer{ display: table-row; height: 30px; width: 100%; background: re…
0 votes3 answers -
два div'а одинаковой высоты
Понимаю что тема уже избита, но всё же. У меня есть два div'а, у одного "float:left", другой просто обтекает + они завернуты в общий блок div. Цвета фонов разные, причем у левого есть ещё рамка. Не получается сделать высоту одинаковым. Ставил обоим div'ам "display:table-cell", но и тут без проблем, если например сделать у одного из div'ов "padding:20px", то и у второго тоже "padding" становится 20px, а мне не надо так. Помогите люди добрые)
0 votes3 answers -
Div поверх gmap
Вобщем есть картинка, которую нужно разместить поверх гугл-карты. Z-index не помог. Есть ли способ? Привожу код страницы: <!DOCTYPE html "-//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>Гугокарты</title> <script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script> <script type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")…
0 votes11 answers -
Валидация w3c
При валидации на w3c заметил ошибку: Line 9, Column 36: The align attribute on the div element is obsolete. Use CSS instead. <div id="page-wrap" align="center"> Когда align переношу в CSS выходит такое: #page-wrap Свойство align не существует : center center Как правильно сделать, что бы пройти валидацию? index.html <!DOCTYPE html> <html> <head> <title>Лестница</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link rel="stylesheet" type="text/css" href="./css/style.css"> </head> <body> <div id="page-wrap"> <img src="./images/circle.png" alt="logo"> </di…
0 votes4 answers -
Всегда по центру, справа и слева рисунки
Есть проблема на http://www.belva.ru/catalog/razdel/kabinety_palaty_posty/ Внизу под меню есть фильтр, не получается сделать его посередине и чтобы округлости были побокам. Не подскажите с этим справиться? Битый час уже извращаюсь.
0 votes6 answers -
Кнопка твитер
Добрый вечер! Как добавить вот эту кнопку в правом нижнем углу слоя?
0 votes13 answers -
Проблемы с сочетанием css свойств position,overflow и white-space в Opera
Здравствуйте! Написал небольшой скрипт для слайдшоу. Для примера: Есть список состоящий из 7-ми изображений: <div id="galery"> <div class="previous"><a href="#">Назад</a></div> <div class="container"> <ul> <li><a href='anketa.php?id=1&name=anketa1'><img class="anketa" src="img/1.jpg" /><img class='newMessage' src='img/newMessage.jpg' /></a></li> <li><a href='anketa.php?id=1&name=anketa2'><img class="anketa" src="img/2.jpg" /><img class='newMessage' src='img/newMessage.jpg' /></a></li> <li><a href='anket…
0 votes0 answers -
Небольшие проблемы с полем ввода
Здравствуйте, есть небольшой вопрос по стилизации формы ввода, а точнее ее placeholder. Возникли разногласия между браузерами (причем даже между Chrome и Safari хотя они же вроде оба на одном движке). Placeholder задан в html разметке у поля input, хочу поменять его цвет - полазив по просторам интернета, пишу следующее: #search_field ::-webkit-input-placeholder { color:#222; } #search_field input:-moz-placeholder { color:#222; } Итог: 1.Firefox - все как надо 2.Safari - все как надо (кроме того что при фокусе, пока не начнешь вводить сам текст, placeholder не исчезает, может кто знает как и это решить, был бы очень признателен) 3. Chrome - другой цвет placeholde…
0 votes8 answers -
Как сделать рамку из текстуры?
Возникла необходимость сделать рамку вокруг div'а, примерно вот так: http://miron.in/images/untitl-1319037614.png Различие в светлых и темных градациях серого можно отбросить, главное сам смысл - текстура с повторяющимся рисунком, обрамляющая блок. Проблема в том, что высота блока заранее неизвестна. Немного подумав (и погуглив) решил попробовать вариант с четыремя вложенными div'ами, каждый из которых можно залить такой текстурой и поставить по периметру. Но тут возникнет другая проблема - ведь текстура может и не совпасть. Еще читал про border-image, но он в IE вообще не работает. Что можно попробовать в такой ситуации?
0 votes8 answers -
Интересная ситуация
Здравствуйте, я записался на курсы веб- программиста при институте(html и php), до этого прочитал несколько книг по html и css. Но тут прийдя на курсы я узнаю по словам препода : существует много типов html. И он короче начал свою первую лекцию с того какие тэги бывают, две вещи которые меня удивили: 1)тег <b> - РАЗДЕЛЕНИЕ НА АБЗАЦЫ! 2)Он описал структуру веб страницы как: 1)<title> 2)<body> 3)<hard>-че за тег? 4)<index><follow>-че за теги? Можете объяснить что он вообще преподает? Я в недоумении... Кроме того он дал две ссылки на которые я еще не заходил: http://ckeditor.com/ http://www.tinymce.com/ ЗЫ Ах да, он часто произносил: "это…
0 votes6 answers -
RSS не отображается в браузере
Всем привет! У меня такая проблема: не отображается rss в браузере в том месте, в котором он должен быть. Браузер просто его не замечает (ни один из rss, даже со сторонних ресурсов), хотя все вроде написано верно: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>XXX</title> <link rel="alternate" type="application/rss+xml" title="Форум htmlbook.ru RSS" href="http://forum.htmlbook.ru/index.php?app=core&module=global§ion=rss&type=blog"> </head> Если кто знает в чем причина сообщите плз. Буду очень признателен за помощь.
0 votes4 answers -
Фон списка внутри абзаца отличается от фона абзаца
Привет! ul, ol, li { margin: 10px; padding: auto; } #right #content p { text-align: justify; margin-top: 15px; padding: 15px 100px 15px 15px; line-height: 1.5; background: #eee; } #right #content p:hover { background-color: #cce; color: #444; } #right #content p:first-letter { font-size: 160%; font-weight: bold; color: #c11; } Абзацы выходят нужного фона, но фон у списков в абзацах белый. В чем дело?
0 votes9 answers -
Автоматическое заполнение diva блоками, следующими слева на право
Доброго времени суток Уважаемые Гуру верстки! Столкнулся с необходимостью автоматически заполнить блок контентом в несколько столбцов. Как здесь: Каждый блок контента принадлежит к одному классу, у каждого фиксированная ширина, а высота разная. Применив float-left блоки заполняют пространство слева направо, но получается разрыв по высоте: Как решить данную проблему? Вот код для примера: <!-- #oblogka { background-color: #C9F; height: 300px; width: 200px; position: relative; } .content { background-color: #CCC; float: left; height: auto; width: 90px; border: 1px solid #00C; } --> </style> </head> <body> <div id="oblogka"> <…
0 votes6 answers -
Как можно обратиться к родителю в CSS ?
Как можно обратиться к родителю в CSS ? В такой структуре : <li> <div class="author"></div> </li> Хочу сделать рамку, а как обратиться к li c класса не пойму ?
0 votes4 answers -
placeholder в Opera
Всем привет В общем, есть проблема: использую собственный шрифт @font-face в input-е строки поиска, внутри указан placeholder тем же шрифтом. Во всех браузерах приемлемый результат, кроме Оперы. Опера, цука, во фразу placeholder-а вместо пробелов тулит "неизвестный науке" символ - "знак вопроса в прямоугольничке". И этот же гадский знак вопроса выскакивает в самом инпуте, если хомячок в поисковой фразе пишет несколько слов. Символ этот — не есть пробел, и не есть неразрывный пробел. Шрифт оптимизирован для загрузки, лишние символы выброшены. Нужно найти недостающий - именно тот, который юзает Опера. ЧТО это за символ такой? Идеи есть, как его выловить? ЗЫ: Дефолтный/систе…
0 votes0 answers -
Вертикальные вкладки справа
Всем привет! У меня в Друпале по умолчанию горизонтальные вкладки используются. Хочу css'ом их превратить в вертикальные, но вот как их позиционировать? <div родитель> <div вкладки> <div контент> - именно к этому блоку справа нужно прижать вкладки </div родитель> пробовал position:absolute, но у меня сайт с резиновой серединой и двумя боковыми фиксированными блоками. То есть окно уменьшаешь и все плывет. Как можно спозиционировать? Спасибо!
0 votes1 answer -
box-shadow не проходит валидацию
Здравствуйте. Пытаюсь приобщиться к CSS3, но не могу пройти валидацию. Имеется код: .box-shadowed {box-shadow: 2px 3px 4px 2px #888;} W3C ругается: Ошибка разбора [empty string]. Если убрать растяжение тени, то все ок, но тень растягивать мне нужно .box-shadowed {box-shadow: 2px 3px 4px #888;} Это баг w3c парсера или я что-то делаю не так? Если указать любой из параметров тени как ноль без размеров - тоже ругается. .box-shadowed {box-shadow: 0 0 4px #888;}
0 votes3 answers -
Позиционирование выпадающего меню
Здравствуйте! Помогите пожалуйста: 1. сайт _hххp://aktivsport.com.ua меню слева категорий сделано в виде выпадающих подкатегорий, в случае если пункт меню находится возле нижнего края экрана то подкатегории уходят за нижнюю границу экрана, а нужно что бы они в этом случае открывались как бы "вверх". 2. сайт _hххp://nkt.ua в шапке присутствует вывод валют комбобоксом, в ФФ он отображается а в ИЕ его не видно Прошу помощи, помогите пожалуйста
0 votes0 answers -
Как постепенно делать бекграунд невидимым ?
Вот у меня бекграунд резко заканчивается там, где заканчивается контент. В принципе картинка плавно переходит в фон, но когда контента много. А когда мало - вот такая четкая граница, как сделать чтобы фоновая картинка внизу плавно исчезала, независимо от количества контента ?
0 votes6 answers -
Проблема с печатью документа
Здравствуйте. Опишу вкратце ситуацию. В общем есть биллинг.(может кто знает UTM5). В нем все документы, которые печатаются из него редактируются на html. Редактируются прямо в окне самого биллинга. И просматривается результат там же. Оформляю шаблон договора в биллинге. Вроде все нормально сделал, но появляется проблема при печати. Некоторые слова в тексте либо наслаиваются друг на друга либо становятся без пробела. При предварительном просмотре такой проблемы не видно. Только при печати на листе бумаги. Плюс ко всем открыл код html в отдельном файле через браузер - при печати на странице такой проблемы нет. Подскажите в чем может быть проблема? Спасибо.
0 votes0 answers -
Помогите пожалуйчта я навечек с ссылкой в div
столкнулся с проблемой, я новичек, при использовании div не все ссылки в некоторых браузерах работают корректно, из 8 только 3 появляются ( в опере все работают в гугл хроме несколько... помогите разобратся с кодом, что бы правильно отображал, все перепробовал , мозги кипят, вот он сам код #test0{ position:absolute; top:100px; left:130px; width:160px; height:400px; border-style:solid; border-width:5px; border-color:#EEE9E9; } #test2{ position: relative; bottom:0px; left:0px; border-style:solid; border-width:0px; border-color:#EEE9E9; } #te…
0 votes7 answers -
Не работают стили для div
Есть div-елемент вроде хедера . В нем задан фон(картинка) . Внутри этого елемента должно быть еще 4-и елемента (переключатель(разделитель)страниц и три тега <p>) Кадый едемент я взял в div и задал ему стиль. И так сам корневой div отбражается коректно(имеет position:reletive;) , пока в него не вставить другие . После этого он сежджает немного вниз. В это время сами елементы (те которые внутри) имеют значение position:fixed; Чтобы корневой div не сежджал в низ ему тожэ присваеваю position:fixed . Но тут другая проблема. Весь контент снизу начинает его перекрывать. Чтобы исправит это , делаю поверх него пустой div с position:reletive . Но снова неудача так как пустой …
0 votes2 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-