Jump to content

HTML Coding

Subforums

  1. Discussion of works

    Source code audit and recommendations

    30.1k
    posts

  2. Practise Templates

    Templates for self education and practise

    1k
    posts

Explore Questions

There are no popular questions to show right now

  1. Вёрстка футера на движке Xenforo

    Asked by Mondeus,

    0 votes
    0 answers

  2. Примеры верстки

    Asked by torsar,

    0 votes
    0 answers

  3. Список покидает див

    Asked by DeZ,

    0 votes
    0 answers

  4. Проблема с шириной ячеек

    Asked by ArrogantSpectator,

    0 votes
    1 answer

  5. Html кнопка

    Asked by НикитаL,

    0 votes
    3 answers

29,542 questions in this forum

  1. Резиновый сайт

    Друзья, буду краток: в принципе, по долгу службы вчстречался с фиксированными шаблонами/макетами Но было все хорошо, пока не увидил сайты на широкоформате 21,5 дюйма, все выглядело хорошо, в плане верстки, но сайт был печальным Теперь вопрос по разрешениям экрана. На какой делать упор основной? (в принципе можно посмотреть по статистике) Я вот подумываю о таком действии: .class { width:75%(90% ?); max-width:1200px; min-width:768px; } для меньше 768px идет адаптивная верстка и т.д. У какого какие мысли? может ссылки на литературку по этому вопросу? Заранее спасибо з.ы. напримере, портального типа.

    Asked by talgautb,

    0 votes
    6 answers

  2. Резиновый сайт

    ЧИТАЕМ МОЙ САМЫЙ ПОСЛЕДНИЙ ПОСТ!!!

    Asked by vitaxastifler,

    0 votes
    8 answers

  3. Резиновый сайт и background-image

    Не могу разобраться как сделать 3-х блочный header. По центру фикс, по бокам резина. По коду, думаю, понятно что хочу сделать: #header-menu-fon { width: 100%; } .header-menu-fon-center { background: url('image/header-menu-fon.jpg')no-repeat; width: 1300px; height: 146px; margin: 0 auto; } .header-menu-fon-left { background: url('image/header-menu-fon-left.png') repeat-x; width: 2px; height: 146px; float: left; } .header-menu-fon-right { background: url('image/header-menu-fon-left.png') repeat-x; width: 2px; height: 146px; float: right; } Пробывал разные вариант, в том числе width:100% у боковых, но в место повт…

    Asked by Ritter,

    0 votes
    11 answers

  4. Резиновый сайт на div'ах

    У меня такой макет: Вот код, который я набрал: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>...</title> <style> body { margin: 0px; } #container { display: inline-block; } #wrap { display: inline-block; margin: 10px; padding: 5px; background: yellow; } #header { height: 50px; background: green; } #content { float: left; min-width: 200px; background: orange; } #right { float: left; background: #a5a530; } </style> </head> <body> <div id="container"> <div id="wrap"> <div id="header">Header</d…

    Asked by Webscripter,

    0 votes
    1 answer

  5. Резиновый сайт по центру экрана

    Задача: сделать резиновый макет сайта, расположенный по центру. Сделать фиксированный макет по центру, например шириной 960 пикселей, не трудно. На мониторах с шириной 1024 и 1280 такой сайт будет смотреться хорошо, но вот на мониторах с шириной 1680, и тем более 1920, уже не устраивает. Хотелось бы, что бы на больших расширениях сайт растягивался допустим до 1200 пикселей (не будем трогать тему удобочтения длинных строк), а на маленьких (1280, 1024) 960. Или как-то пропорционально растягивался с ростом расширения. Недорешений несколько: 1. Как предлагают в большинстве статей: сделать сайт на всю ширину экрана. Такой вариант сразу отпадает. 2. Прописать свойства min-widt…

    Asked by bob_24,

    0 votes
    6 answers

  6. Резиновый сайт с динамическим сайдбаром

    Есть дизайн, резиновый (растягивается по всей ширине страницы)? в две колонки (контент и правая колонка). Проблема в том, что на одной странице правая колонка имеет ширину допустим 40%, а на другой - 20%. то есть я понимаю так, что для правой колонки я ширину не задаю, но как сделать, что бы левая( то есть контент) растягивался в первом случае на 60%, а во втором на 80%. Помню где-то видел подобное решение, но нету времени искать. Заранее спасибо.

    Asked by dradven,

    0 votes
    1 answer

  7. Резиновый сайт с помощью CSS и DIV.

    Здравствуйте. Подскажите, кто сталкивался с такой проблемой. Есть дизайн сайта, надо сделать резиновую верстку. Но эта верстка должна отвечать многим требованиям: Сайт должен быть резиновым. Но крайне желательно ограничить размеры сайта шириной 1200 пикселей и минимальной шириной 860 пикселей. И нужно, чтобы сайт был позиционирован по центру на широких мониторах. В шапке сайта есть три рисунка. Нужно их позиционировать таким образом, чтобы рисунок слева оставался слева, рисунок справа оставался справа, а рисунок по центру находился по центру всегда, независимо от ширины монитора. Подскажите, кто сталкивался с такими трудностями - как решить? Спасибо.

    Asked by Artweb,

    0 votes
    3 answers

  8. Резиновый сайт с фиксированным сайдбаром

    Не получается тольком сделать сайт с фиксированной шириной сайдбара и резиновым контентом. К примеру родительский блок 100%, сайдбар 300 пикселей, а контент в чем измерять ?

    Asked by kpripper,

    0 votes
    3 answers

  9. резиновый сайт слоями. Смещение при input 100%

    Добрый день, помогите разобраться, делаю двух колонную верстку сайта слоями. Расположение слоев позиционное. Не могу разобратся с проблемой: если во вторую колонку вставить элемент input(с другими тоже бывает) с шириной 100% то появлется смещение/растяжение второй колонки. В Chrome это слабо заметно но она есть, а в IE6 вообще появляется полоса прокрутки.. Если этот input еще и обернуть 100% div, то в IE6 вообще появляется огромное смещение input относительно колонки, и появляется полоса прокрутки.. Нашел тут тему про полосу прокрутки в резиновом сайте в IE6 http://forum.htmlbook.ru/index.php?showtopic=20894 Если октрыть код приведенный там, то тоже все нормально, сайт в …

    Asked by xim,

    0 votes
    4 answers

  10. Резиновый сайт, координационные карты..

    Есть сайт, фото на нём резиновые, меняются в зависимости от разрешения экрана... Я могу к ним применить координационные карты??? Ведь при задании их, надо указывать координаты пикселей.... А фото постоянно меняется в размерах.....

    Asked by Marcsc777,

    0 votes
    1 answer

  11. Резиновый слайдер со скроллбаром

    Возникла потребность узнать, а существуют ли вообще в природе такие слайдеры. Даже на jQuerry UI обнаружил то, что итоговая ширина для всей линейки слайдов всё равно фикс. Резина нужна не для самого окна со слайдером, а для всей линейки слайдов.

    Asked by John Do,

    0 votes
    10 answers

  12. Резиновый слой

    Помогите пожалуйста У меня есть внешний div Внутри него находятся еще 2 div. Один слева, другой справа! Когда в правый попадает много текста он начинает растягиваться вниз, но при этом внешний div остается прежнего размера! Я ни где не задавал размеры внешнего div и по идее он должен автоматически растягиваться при увеличении внутреннего, но так не происходит. Как мне заставить его расширятся в зависимости от размеров внутренних тегов

    Asked by kent666,

    0 votes
    4 answers

  13. Резиновый слой по центру окна броузера

    Всем привет Чтобы было понятнее, приведу пример: http://htmlbook.ru/layout/sloy-po-tsentru-veb-stranitsy Нужно сделать слой по центру окна броузера, но не фиксированной ширины, а резиновое! Внутри окна будут выводиться данные в несколько колонок, поэтому важно чтобы ширина окна подстраивалась под выводимые данные. По центру-то я его размещаю без проблем (правда, не тем способом, который описан в примере): div#main-window{ width: 500px; /* если убрать ширину, то получается говно */ margin-left: auto; margin-right: auto; } Но вот ширина 500px смущает. Если убрать width, то слой распахивается на всю ширину окна, что не есть гуд. Можно конечно использовать max-wi…

    Asked by abused,

    0 votes
    9 answers

  14. Резиновый слой с изображением

    Доброго дня. Начал изучать HTML совсем не давно,вот столкнулся вот с такой проблемой. Задача: Создать фон для страницы,используя изображение большого разрешения,но при этом сделать его резиновым по горизонтали. Давно видел,такую идею,за фон берут изображение,режут его вертикали по полам и при изменении размера монитора или открытии панели закладок,то есть подгонка размера изображения фона под монитор пользователя,одна часть изображения фона заходит на другую,при этом изображение оптимизировано так,что швов практически не видно,а фон хорошо подогнан под разрешение монитора. Помоги советом,как такое или другим способом реализовывается. Вот мой начальный код,очень мало,но д…

    Asked by Gohhan,

    0 votes
    8 answers

  15. Резиновый список товаров

    Здравствуйте. Попробую описать внятно суть моей проблемы: Есть таблица, ширина которой зависит от ширины окна браузера. Например, она равна 60% от ширины окна. Есть некоторая минимальная ширина одной ячейки таблицы. Допустим, что 200px. Мне нужно, чтобы было так: Когда ширина таблицы 900px - отображаются 4 ячейки по 225px, когда 801px - четыре по 200px, а когда ширина таблицы становится 799px - должны отображаться 3 ячейки по 266px. Ну, и так далее. Реализацию видел на ozon.ru - там собственно список товаров так работает. Но принцип не пойму. И так пытался, и эдак - не выходит. Помогите пожалуйста.

    Asked by boilroom,

    0 votes
    11 answers

  16. резиновый текст

    здравствуйте, подскажите, пожалуйста: в полностью резиновом списке делаю font-syze: 120%. но при изменении размеров окна блоки <li> меняют свой размер, а вот текст в нем нет. в чем может быть проблема??? чего не понимаю ol.leftbar { float: left; width: 20%; padding: 0; } li.bar { font-style: italic; font-size: 120%; border: solid grey; margin: 5% 0 5% 0; } <ol class="leftbar"> <li class="bar">Текст не масштабируется1</li> <li class="bar">Текст не масштабируется2</li> <li class="bar">Текст не масштабируется3</li> <li class="bar">Текст не масштабируется4</li> </ol>

    Asked by bdshadow,

    0 votes
    7 answers

  17. Резиновый трех колонных макет

    Здравствуйте, не могу понять как составить трёх колонный макет. Как на картинке: html: <div id="structure"> <div id="header"> </div> <div id="l_menu"> </div> <div id="content"> </div> <div id="r_menu"> </div> </div> CSS: #structure { position: relative; width: 80%; height: 100%; left: 10%} #header {width: 100%; height: 100px} #l_menu {height: 100%; width: 150px; float: left} #content {height: 100%; float: left } #r_menu {height: 100%; width: 150px} #bottom {width: 100%; height: 50px } что здесь не так? надо что б content занимал всё оставшееся место после l_menu и r_menu

    Asked by deadmeat,

    0 votes
    9 answers

  18. Резиновый трехколоночник и ложные колонки.

    Возникла необходимость сделать шаблон, отвечающий следующим условиям: а. Три колонки. б. Боковые колонки - фиксированной ширины, центральная тянется. в. Высота всех колонок визуально одинакова, и тянется от низа header`а до верха пристыковнного к низу экрана footer`а. г. Шаблон должен тянуться по ширине от 600 до 800 пикселей. д. При высоком разрешении шаблон должен располагаться по центру окна, а не пристыковываться к левой его стороне. Пункты "а", "б", "г" никаких проблем не вызывают. Для решения задачи, описанной в пункте "в", решил попробовать воспользоваться методом ложных колонок. Для background`ов создал два изображения - orange_200 шириной 200px - для создания лев…

    Asked by skatadov,

    0 votes
    0 answers

  19. резиновый трехколоночный макет с отступами по бокам

    Ссылка: http://concept.dax.ru/ В IE6 не удается получить тоже, что и в FF и Opera, а именно отступы от краних колонок по 10%. Так же в IE6 не удаётся задать ширину для центральной колонки такую, как прописанно в стилях (min-width: 4,9%) почему не ясно хотя я прописал min-width:4,9%; width: auto !important; width: 4,9%; а вотFF и Opera хоть и отдают для этой колонки нужное пространство, но судя по border сам слой эту ширину не имеет? Как можно исправить проблему с отступами в IE, какими принципами можно руководствоваться тут для верстки такого макета? Почему ширина min-width не входит в рамку колонки pust?

    Asked by ardjuna,

    0 votes
    23 answers

  20. Резиновый фон

    Добрый день. Задача слудующая, есть изображение размером 2800x2800, нужно сделать так, что бы картинка отображалась на всю страницу, а все, что выходит за границы обрезалось. То есть больше разрешение - больше видишь. Например здесь http://shtokman.ru/ сделано в точности то, что мне нужно, но к сожалению моего опыта как верстальщика не хватает на то, что бы разобраться самому.

    Asked by megabug,

    0 votes
    2 answers

  21. Резиновый фон

    Доброго времени суток. Прошу помочь с реализацией резинового фона. Просмотрел все варианты, попробовал сделать через div+img, но возникла одна проблема. Суть ее в том, что при сужении окна браузера появляются скролллбары, которые как бы обрезают фон (см. изображение).

    Asked by Underline,

    0 votes
    4 answers

  22. Резиновый фон

    Здравствуйте. Постоянно при верстке возникает проблема, как сделать резиновый фон из нескольких картинок. Допустим, мы имеем три картинки для шапки, например эти: 1, 2, 3. Также есть фон на сайте, такой. Подскажите пожалуйста, как из всего этого сделать так, чтобы шапка была по центру сайта, и при просмотре её, допустим на разрешении 800x600, шапка обрезалась с обоих сторон, то бишь с левой и правой.

    Asked by Буллет,

    0 votes
    7 answers

  23. Резиновый фон

    Подскажите, как реализовать резиновый фон? Есть нижняя и верхняя картинка. Нижняя статична, тоесть по идее не должа растягиваться, а верхняя это уже резиновая картинка, типа полоски которая тянется вниз и вправо. P.S. Создал два дива с классами - верхний и нижний BG, положил все содержимое макета в див с классом верхний BG (top-bg), и туда-же положил див с нижним BG(bottom-bg), задал для двух этих дивов две разные картинки как background, для нижнего дива установил значение - bottom. Браузер вообще не реагирует, не пойму в чем дело. .top-bg { background: url(/image/top.jpg) repeat-x; } .bottom-bg { background: url(/image/bottom.jpg) repeat-x bottom; Если я воо…

    Asked by Noraad,

    0 votes
    1 answer

  24. Резиновый фон для меню. Дайте совет...

    Ребят пожалуйста помогите. Вот честно юзал поиск, но не нашел подобной темы. Интересует мнение опытных верстальщиков. Ситуация следующая http://linkme.ufanet.ru/images/2e5e9e0e12db0195fe7d601beb4aa5bf.jpg набросал макет. Имеется три блока <div>. 1-header 2-menu 3-content в 1 все понятно. Логотип, телефон и т.п. Ширина фиксированная допустим 1000px margin:0 auto; 2-меню ! Блок шириной 100% Вот тут то моя проблема. Ломаю голову целый день не могу найти красивого решения проблемы, и некрасивого не нашел. Возможно все делается просто, но я не могу найти выход... Вроде и опыта не мало, но как коса на камень... Что тут требуется, а нужно сделать след. на картинке изоб…

    Asked by Rasel,

    0 votes
    13 answers

  25. резиновый шаблон

    Такой вопрос: есть 2 колонки: .fon {position:fixed; width:40%; text-align:right; min-width:200px; background-color:#000000; height:100%; float: right}.content {margin-left:60%; position:relative} Проблема возникает, когда экран сильно сжимается. левый слой доходит до 200 и останавливается, а правый-то продолжает сжиматься и текст заходит за левый столбец. Как это "победить"?

    Asked by Borodulka,

    0 votes
    5 answers

  • Обсуждения

    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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 } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
    • Switch74
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Switch74 · Posted

      <input type="number">
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
    • DeZ
      Список покидает див

      By DeZ · Posted

      Решение нашел.  Заменил на  Всем привет. Список выходит из дива. При этом, другие элементы в диве отображаются корректно. Не могу найти причину. Нужно чтобы список был под кнопкой ПЛЕЙ...          
    • AIek
      ищу клиентов,услуги

      By AIek · Posted

      Здравствуйте! Мы команда программистов с многолетним опытом разработки. Работая с нашей командой, Вы получаете порядок условий и развитие с обеих сторон: разработка проекта и продолжение сотрудничества на долгосрочной основе, так же специалисты всегда готовы предложить различные идеи и дополнения.  Разрабатываем проекты любой сложности: скрипты для автоматизации рутины, боты, сайты, админ панели, ico, ldo, разработка криптовалюты, смарт контракты, приложения, игры. Ответственность, качество, соблюдение дедлайнов - это про нас!  Наш контакт:  https://t.me/MadFury (https://t.me/madfury) (TG) TG:  https://t.me/2e7.io Сайт: https://code-r.io/
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept