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
-
Верстка блока
Добрый день форумчане, сразу говорю что в html и css я чайник, собственно и создал тут тему дабы получить ответ, а не "иди юзай гугл" и "учи учебники". А вот и проблема: Создал я в PS фон блока, разделил его на 3 части и сохранил, создал DIV с классом: <div class="box"></div> затем описал класс: .box{ border:1px solid #000; width: auto; height: auto; margin:10px auto; background:url('../image/Верхняя часть фона.png') no-repeat center top; background:url('../image/Средняя.png') repeat-y center; background:url('../image/Нижняя.png') no-repeat center bottom; } и как я думал у меня получится фон блока соединённый из 3 частей...но к сожалению ничего не вышло...ка…
0 votes9 answers -
Верстка блока
Доброй ночи ! Ребята подскажите, как правильно сверстать этот блок ? 1) Можно было бы сохранить все кроме робота-пылесоса, но потом нельзя применить z-index. 2) По отдельности сверстать тоже не вариант, потому что блок 960px, все получается маленькое, из-за того что в макете блок имеет ширину 1920px Как быть ???
0 votes2 answers -
Верстка блока для сайта
Требуется: Верхнее оранжевое изображение разделить на 3 части. Т.е. по краям фиксированная ширина по 10 px а посередине background 1 px который растягивается по заданной ширине. Нижняя рамка тоже из трех частей, фиксированный верх и низ а середина тянется. Между двумя объектами должно быть расстояние 3 px. Как это все грамотно сделать в CSS ? И что должно быть в HTML файле? Помогите новичку, уже голова кругом...
0 votes8 answers -
Верстка блока номера страницы
Ребят как одним дивом (кросбраузерно) например сделать такое, чтобы тянулось по ширине: <div class="number">10</div> Тянется только белый блок вокруг номера страницы с округлыми краями.
0 votes12 answers -
верстка блока с иконкой и рамкой, и текстом внутри
Здравствуйте. Подскажите начинающему, как правильно сверстать блок такого плана Скрытый текст (смотри рисунок) , когда по периметру идет граница, а на верху блока иконка возле которой границ нет, но потом есть. Попробовала все это сделать через background.. но не знаю, на сколько это правильно. Ну и хочу, чтобы все это адаптивно было. И как правильно верстать вот такое дерево блоков?
0 votes4 answers -
верстка блока с линками на div
Направте на путь истинный, пожалуйста. Пробую учится css верстке. Проба изложена ниже. Проблема в том, что в блоках не работает декорирование текста. Работают эффекты но шрифты имеют стандартный цвет линка и подчеркнуты. text-decoration: none; не реализуется. Не имеет значение какой шрифт подключается. Помогите разобраться, пожалуйста. Заранее спасибо. скрин проблемы: http://yadi.sk/d/iyjI6prs01eZQ вот код HTML: <!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" content="text/html; charset=utf-8" /&g…
0 votes1 answer -
Верстка блока статистики
Как сверстать эту секцию? Возможно, вы знаете подходящую js библиотеку? Спасибо!
0 votes6 answers -
верстка блока, который появляется только при наличии более 3 заголовков
Уважаемые Гуру форума, как всегда спешу порадовать своей проблемкой и надеюсь на помощь в ее решении... Проблема состоит в следующем, делается шаблон под dokuwiki и там опционально имеется блок который появляется только при наличии в тексте 3 и более заголовков. проблема состоит в том что нужно хитро сверстать как на скриншоте и при этом что б оно не отображалось если менее 3 заголовков... Проблема наглядно: Скрин как должно быть Пример где 3 и более заголовка Пример где менее чем 3 заголовка Скрин где видно, что не пропадает даже если ставлю просто background: #FFFFFF;, а сделать нужно еще тени и округлости, которые корректно получаются только картинками на background …
0 votes8 answers -
Верстка блоками
В общем, не так давно я занялся сайтами, и в чем-то уже преуспел. Вот решил освоить верстку блоками, и столкнулся с такой проблемой, у меня есть картинка (сам сотворил),ее я разбил на 5 частей и их надо собрать вместе: вот план сборки http://s42.radikal.ru/i098/0808/41/4defafb3dd62.jpg В табличной верстки это я делал так http://stars124.narod.ru/1.html (работает во всех браузерах) А как это сделать в блочной я пока не знаю ((( вот сделал пробно http://stars124.narod.ru/2.html (В опере вроде нормально, в остальных браузерах все расплывается как черт знает что) Еще интересует как мне вот эту блочную сборку, выровнять по центру экрана. Собственно блоки начал изучать вот толь…
0 votes12 answers -
Верстка блоки разной высоты
На этом странице есть разделы "Способ доставки" и "Способ оплаты". Сверстал их таблицами. Думаю самый оптимальный вариант в этом конкретном ситуации. Но проблема в том , что , заказчик требует что было возможность динамически изменять , тоесть добавлять и удалять пункты через админки, без влезании в исходный код. Так как, тут, одной удалении td недостаточно, каким еще другим способом можно сверстать такой раздел? чтобы место удаленного пункта заменил преследующий его пункт? Спасибо!
0 votes2 answers -
Верстка блоков
Всем привет! Помогите разместить этот красный прямоугольник внизу где проблем между серым: http://img686.imageshack.us/img686/2708/80596290.jpg Ниже код с шапки <div id="header"><div id="grekovlogo"><div id="grekovtext"><h2>ГРЕКОВ</h2></div></div><div id="bar"></div></div> #grekovlogo { background-color: #000; width: 207px; height: 84px; float: left; } #grekovtext { padding: 15px 45px; float: left; } #bar { background-color: red; width: 1072px; height: 30px; flot: left; } И пользуясь случаем спрошу, как сделать чтобы выравнивание текста было не grekovtext а сразу например в h1 засунуть или, я недав…
0 votes17 answers -
Вёрстка блоков
Привет! вот рабочий пример https://jsfiddle.net/soltx/hdytadeL/embedded/result/всё норм когда я задал ширину для label и у меня достаточно текста блок с вопросом прижат вот другой пример https://jsfiddle.net/soltx/qve5qwpb/embedded/result/ тут криво работает конструкция, нужно блок с вопросом, прижать к тексту, код должен быть универсальным, так как длина текста может быть разная и блок с вопросом всегда должен прижиматься к тексту, .item остаётся с фикс шириной в 300px
0 votes2 answers -
html Вёрстка блоков - как сделать логично?
Здравствуйте. Верстаю макет, рассчитан для мобильных и планшетов, резиновый временами. Есть такой блок - http://joxi.ru/1A59OwzSKyoyPA . Это вариант для десктопов. Далее для планшетов - http://joxi.ru/V2Ve8MBS0J1DLm . И для мобильных - http://joxi.ru/DrlO1yQc4OMjRA Как будучи в здравом уме и хорошем психическом состоянии сверстать логично, без использования скрытых блоков, типа с заголовком или списком, которые расположены не правильно, как по мне, в планшетной и мобильной версии. Вообще, стоил ли попросить другой дизайн или намекнуть дизайнеру, что он немного не понимает, как верстается из десктопного варианта в мобильные?
0 votes5 answers -
Верстка блоков за пределами окна.
Здравствуйте. Вот сайт http://big-buy.in.ua/domashnij-kinoteatr.html. На странице сверстаны "уши" в виде ромбов. Сейчас - это абсолютно спозиционированные блоки :after и :before для #main-content. Проблема: 1) имеем горизонтальную полосу прокрутки(причем она появляется, только, если есть блок :before) 2) на iphone полоса прокрутки автоматически устанавливается по центру, контент как-бы прилипает к левому краю и левые уши не видно вообще. Пробовал устанавливать для body overflow-x: hidden, но это не выход, да и на айфонах проблема остается. Спасибо.
0 votes5 answers -
Верстка бокового меню на джумла через ul li
Бьюсь с css, не выходит сделать пункты меню с фоновым изображением одинаковой фиксированной ширины - или все ломается или делает по ширине текста. Может кто сталкивался? Настраиваю через ul и li Сейчас такая каша уже: .hlink li { line-height:42px; width:180px; text-align:right; font-size:16px;} .hlink ul li a {width:180px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-image:url(../images/80.png); border:1px solid #999; padding:8px 25px; text-align:right; font-size:16px; text-shadow:#555; color:#000; text-decoration:none} .hlink li a:hover { background-image:url(../images/bluebtn.jpg); background-repeat:repeat-x; color:#FFF} hashimk…
0 votes3 answers -
Вёрстка большого количества страниц
Приветствую жителей форума! У меня к вам есть вопрос. Дело в том, что я изучаю вёрстку недавно и столкнулся с очень неприятной проблемой. Мне нужно было сверстать большое количество страниц одного сайта. На каждой странице было разное размещение информации. И для каждой страницы одинаковое положение и наполнение было только у шапки сайта и у подвала. Предположим, на главной была шапка, потом шёл блок со слайдером и подвал. На другой была шапка, две колонки (текст и форма обратной связи) и подвал. На третей опять шапка, после неё две колонки с новостями, которых в каждой колонке должно было быть по три штуки и для других страниц новостей должны были прикрутить скрипт, чт…
0 votes9 answers -
Верстка брэндинг с ссылкой
Всем привет, Посоветуйте, как сверстать страницу с брэндингом , и так что бы фоновая картинка была ссылкой вот макет http://prntscr.com/3vy5fw Вот как это у клиента выглядит http://ezh1.i-d-web.com/
0 votes9 answers -
верстка бэкграунда на высоту потребности макета
Подскажите пожалуйста, как сделать так чтобы для определенного элемента, который охватывает все элементы макета, сделать так, чтобы определенная картинка, которая должна репититься через весь элемент, репитилась и за вертикальной прокруткой.
0 votes1 answer -
Верстка в 2 слоя и их позиционирование
Добрые друзья! Обращаюсь к вам с вопросом, который не могу разрешить уже несколько дней... Есть страница, сверстанная слоями: Заголовок и подвал растягиваются в длину. Content - в длину и в высоту. Слой mini является чем-то вроде боковой колонки. Его высота иногда меняется, а ширина - нет. Вся проблема в том, что когда в слое content мало информации, слой mini наползает на подвал, перекрывая его! Я никак не сумел исправить эту проблему. Пытался использовать табличку, запихнув content и mini в две соседние ячейки, но это лишь породило новые проблемы - т.к. в content'e часто находится преформатированное содержимое (тег <pre>). Пробовал позиционирование - absolute о…
0 votes1 answer -
Верстка в 3-2 колонки сразу
Всем привет. Есть задача сделать 2-х колоночную верстку с динамическим добавлением 3 колонки по надобности. То есть. Если в третьей колонки есть информации, то выводить ее и чтобы вторая колонка уступала третьей колонки место. А если нет третьей колонки, то вторая колонка занимала все свободно место. Вот не пойму, как это возможно сделать. Буду благодарен за помощь. P.S. без JS
0 votes1 answer -
Верстка в Firefox
Есть необходимость использовать окна фиксированного размера для текста. Нужно, чтобы если HTML содержимое не помещается в окно, показывалась прокрутка. Использую следующее решение: fieldset.radios { overflow: auto; height: 300px; } <fieldset class="radios"> <label><input type="radio" ...>Thing 1</label> <label><input type="radio" ...>Thing 2</label> ... </fieldset> Работает идеально во всех браузерах, кроме Firefox, где прокрутки нет и текст просто "вываливается" из окна: пример Подскажите, как можно исправить это для Firefox?
0 votes8 answers -
вёрстка в html5
Всем привет! Друзья нужен совет, ибо изучение html5 на практике зашло в тупик делаю главную страницу сайта так: <header>шапка</header> <nav>навигация</nav> <div>???</div> <footer></footer> вопрос вот в чём: в этом месте <div>???</div> я хочу расположить основной контент станицы - слайдер - блок: новинки (картинка - название) - блок: хиты продаж (картинка - название) В каких тегах правильно это разместить - слайдер и блоки?
0 votes6 answers -
верстка в виде iphone
Как можно сверстать страницу в виде iphone, ну то есть в середине страницы iphone естесственных размеров и там внутри скролл и текст
0 votes8 answers -
верстка в дивах
Подскажите пожалуйста как сделать ссылку с одного дива ( меню ) на другой ( контент). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- saved from url=(0044)http://bitby.net/wp-demo/size-fon/index.html --> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU-lite"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>фон</title> <!--<link rel="stylesheet" href="style.css" />--> <style type="text/css"> *{margin:0;padding:0;} html, body{ width:100%; height:100%; min-width:1000px; } …
0 votes5 answers -
Верстка в первый раз - в чем ошибка?
Добрый день, уважаемые форумчане! Совсем недавно друг попросил сверстать ему Лендинг из PSD файла. Визуально лендинг не сложный, поэтому я согласился. С версткой до этого особо опыта не имел. В процессе вертски я сталкивался со всевозможными пролемами, которые удавалось решить с помощью гугла и форумов верстальщиков, за что вам огромное спасибо. Но одну проблему я так и не победил. Перехожу к сути: Дано: домен http://водоканал-сервис.рф Что хотел получить согласно макету PSD: http://joxi.ru/a2X3ZYMCq9qDmg Для верстки решил использовать Dreamveawer CC2015. Был выбран табличный тип верстки. Все вроде получилось кроме одного НО - в разных браузерах таблицы съезжают с фон…
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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-