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
-
Ячейки таблицы с одинаковыми полями без скриптов
Доброго времени суток, уважаемые! Никак не могу решить такую задачу: нужно сделать "резиновый" ряд "кнопок" Суммарная ширина ряда - 100% от родителя. Ширина каждой "кнопки" = ширина текста в ней + ОДИНАКОВЫЕ ВО ВСЕХ КНОПКАХ поля. при растягиваии "родителя" размер всех кнопок тоже меняется НА ОДИНАКОВУЮ ВЕЛИЧИНУ хоть дивами, хоть таблицей, но без скриптов желательно вот так должно быть:
0 votes19 answers -
Перенос слов если не хватает места
Подскажите, есть такой код - http://cssdeck.com/labs/ykznzejh если тексту не хватает места он начинает перетекать (переноситься) на новую строку (весть блок div), что выглядит достаточно криво, как сделать так, что бы если не хватало места, что бы НЕ содержимое блока div переносилось на новую строку, а содержимое тегов span. <div class="wr"> <span>один два три</span> <span>четыре пять шесть</span> <span>семь восемь девять</span> </div> .wr { padding: 20px; } .wr > span { padding: 10px; border: 1px solid gray; } Ну или как сделать что бы при переносе содержимого блока div все выглядело п…
0 votes2 answers -
Перенос контецнера на новую строку
Доброго времени суток! Оч нада решить следующую задачку: имеется такой код <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> p { /* ?????????????? */ } .span { /* ?????????????? */ } </style> </head> <body> <p> <span class="span">1</span> текст; <span class="span">2</span> текст; <span class="span">3</span> текст; </p> </body> </html> что нужно прописать вместо '?????' чтобы получить в браузере 1 текст; 2 текст; 3 текст; Или имея доступ только к стилю абзац…
0 votes6 answers -
Картинка при наведении + навигационная карта
Попробую детальней описать свою проблему. У меня есть картинка карты страны. Там много городов. Каждый город я выделил на картинке (карте) чёрной жирной точкой. Мне нужно, чтобы каждый город имел ссылку. Это можно воплотить с помощью навигационной карты. Но есть одна загвоздка: при этом мне надо, чтобы наводя мышкой на город, его картинка изменялась - то есть чёрная точка изменялась, например, на синюю. Подскажите как подобное воплотить? Просто уже много вариантов испробовал, но полностью ни один не подошёл.
0 votes7 answers -
Не растягивается контейнер
Добрый вечер! Возникла проблема во время верстки макета Вердера, никак не могу понять как с ней бороться. У блока .container ширина задана 100% и флаг спозиционирован в правом верхнем углу бэкграундом, но тем не менее, когда я позже поместил меню на сайт со свойством nowrap - оно почему-то вышло за границы контейнера при разрешении 1024х768. Чем обусловлено такое поведение? http://sleepwalker51.narod.ru/
0 votes9 answers -
Съезжает блок в Google Chrome
После вёрстки возникла проблема: когда первый раз заходишь на сайт через chrome - блок съезжает. Нажимаешь обновить и всё становится на свои места. В остальных браузерах всё норм (даже в IE7). В чём может быть проблема? Вот html код: <div id="header"> <img id="site_name" src="/img/site_name.jpg" width="465" height="51"> <div id = "reg"> <form> <p align = "center" id = "input">Вход</p> <p id="surename"><input type="text" placeholder="Фамилия"></p> <p id="password"><input type="password" placeholder="№ читательского"></p> <input type="image" class="login" src="/img/login.jpg"> <a href="" …
0 votes2 answers -
Как сделать адаптивную таблицу?
Делаю адаптивный дизайн. Запутался, что с таблицами делать. Вот например дано: <style type="text/css">.tg td{border-style:solid;}.tg th{border-style:solid;}</style><table class="tg"><tr> <td rowspan="2" >Ячейка 1</td> <td nowrap >Ячейка 2</td> <td>Ячейка 3</td> <td rowspan="2">Ячейка 4</td></tr> <tr> <td colspan="2">Ячейка 5</td> </tr> </table> Погуглил, предлагают делать на основе дивов. заменил на дивы <style type="text/css">.mytable {width:500px; border:1px solid black;}.mytable td{border:1px solid black;}.tr {border:1px solid black; }.td {border:1px soli…
0 votes6 answers -
Нулевой отступ сверху для хедера
Привет, друзья! Банальная проблема, возможно детская, но я никак не могу достойно с ней справиться. Суть вот в чем: есть шапка сайта (часть таблицы) и мне нужно, чтобы она пристыкована к окну браузера, тоесть нужен нулевой отступ сверху. Вот как это выглядит сейчас: Прописав в стиль таблицы следующее: position: fixed; top: 0px; Я добился, что мне и нужно: Но теряется выравнивание по центру таблицы и вообще, в IE6 это не работает. Мне кажется, что должно быть что-то попроще. Буду рад вашим советам!
0 votes4 answers -
Позиционирование футтера
Помогите пожалуйста разобраться! Проблема возникла с позиционированием футтера. При уменьшении окна браузера по вертикали футтер "наезжает" на контент. Как избавиться от этого и сделать так чтоб он останавливался перед последним блоком? саму страничку можно найти на http://outfoxer.ua.elro.com/yoga/ball/index.html заранее спасибо.
0 votes2 answers -
Листаж страницы, навигация. Как это делается?
Нужно сделать номера страниц, стрелочки, предыдущая/следующая, т.е. листаж страниц. DHTML, JS? Или средствами CSS можно? Может быть есть скрипт готовый несложный. Или где это можно изучить...
0 votes7 answers -
хак только для opera 9
Всем привет. Подскажите хак, который бы работал в 9й опере, и не распространялся бы на 10 и 11 Знаю, что плохо, но нет времени копаться.
0 votes10 answers -
Блоки отскакивают при наведении
Здравствуйте. Вот пример того, как должно быть: Т.е. при наведении на блок, он должен увеличиваться вместе с изображением товара. Как это получилось у меня http://codepen.io/anon/pen/bNQOKa Я сделал это следующим образом: При наведении на блок, он увеличивается, а его марджины уменьшаются. В обычном состоянии я задал в .item-slider li margin:25px 15px 30px 15px; А при наведении: .item-slider li:hover margin:20px 5px 20px 5px; Но проблема в том что другие блоки начинают отскакивать. Что с этим делать? И также интересует следующее: При наведении на блок всплывает круг "SHOP IT". Как сделать чтобы он всплывал плавно. Пробовал как-то сделать через opacity и tr…
0 votes7 answers -
Специфические шрифты в psd макете
Всем привет. Возникла такая проблема. Теорию html и css я прочитал и решил попрактиковаться. Скачал несколько макетов и тут появилась проблема со шрифтами. В Photoshop я пока плохо разбираюсь, но чувствую нужно будет подучить теорию с ним. Я разобрался, что если в системе нет нужного шрифта, то его легко можно скачать и установить. Но в паре макетов, которые я очень хочу сверстать, шрифты платные. То есть как я понял, единственный вариант - заменить их уже встроенными в Windows. Но при это возникает проблема с размером и полнотой шрифта. Если с полнотой ещё понятно, то проблема с размером более объёмная. Заменяю я шрифт, он становится или Arial, или вообще …
0 votes2 answers -
фиксирование высоты таблицы
Нужно сделать так, чтобы при увеличении текста(Ctrl++) табличка не меняла своей высоты. Есть способ: добавить в отдельные ячейки табицы, другую табицу , но так как у меня достаточно много ячеек, то код получится ОГРОМНЫМ! Если кто знает как решить эту проблему или знает другой способ фиксации таблиц по высоте, пишите.
0 votes1 answer -
Появляется пустое место при уменьнении размеров окна
Подскажите, пожалуйста. Есть страница, которая состоит из : -шапки (имеет параметр float:right и width: 800px} -блока кнопок (горизонтального под шапкой) -содержимого (одно изображение, размером width:1000 height:500, позиционировано как и шапка position: relative float:right) Задумано, чтобы шапка при уменьшении размеров окна оставалась"прилипшей" к правому краю. На всех страницах нет проблем, кроме как с этой из-за большого изображения на ней. При уменьшении размеров окна (меньше 1000px) появляются полосы прокрутки. И при прокручивании назад видно, что шапка сдвинулась влево, как и задумывалось, но справа от шапки появляется пустое место. Как избежать появления пуст…
0 votes3 answers -
CSS float
Всем доброй ночи. Хотел что то похожее на это тут текст тут картинка тут текст побольше тут картинка текст выравнивается по левому краю а картинка поправому <style type="text/css"> div { width:10%; } dl dd { float:left; } dl dt { float:right; } </style> <div> <dl> <dt>тут текст</dt><dd>тут картинка</dd> <dt>тут текст побольше</dt><dd>тут картинка</dd> </dl> </div> И если div меньше ширины картинки и текста то картинка падает вниз. В этом и есть моя проблема.
0 votes9 answers -
Как подогнать высоту страницы под высоту экрана?
Здравствуйте, друзья! Подскажите, пожалуйста, как сделать так, чтобы высота страницы (например вот этой - http://toolbird.com/signup/)отображалась на любом десктопном устройстве тютелька-в-тютельку под размер экрана, без скроллинга. Речь идет о верстке в Bootstrap3, но с благодарностью приму и другие возможные решения. Спасибо большое!
0 votes9 answers -
Как сделать такую сетку
Итак, имеется 4 блока, на мобильных устройствах они располагаются в столбик, друг за другом. Задача: сделать для больших разрешений сетку в два столбца, в которой высота всех блоков может быть различной, и не должно быть разрывов между блоками
0 votes15 answers -
и снова привет
вот подскажите много ли косяков в этом коде <table background="images/shapka4.jpg " bgcolor="#660f0f" border="0" cellpadding="0" cellspacing="0" height="150" width="100%"> <tbody> <tr> <td width=100% valign=bottom> <center> <div id=menu> <font class="middle"><b>Вход для пользователей</b></font> <table cellspacing="0"> <form action="index.php" method="post"></form> <input name="enter" value="1" type="hidden"> <td align="right"><font class="shapka">Логин:</font></td> <td><input class="ss" name="user_login" size="10" type="text"></td&g…
0 votes13 answers -
Отсутпы блочных элементов
Трабл следующий При верстке в html все блочные элементы, как и положенно отображаются один под другим. После разбиения страницы на php шаблоны, которые вывожу через <? php include 'имя файла.php'; ?> первый блочный! элемент в шаблоне типа <div> или<table> выводится с отступом на 1 строчку. При этом, если в шаблоне сперва написать текст или <span>, он появится там, где ему положенно. Лечу через position:relative; top:-20px; но, это дурдом... Хотелось бы вылечить в корне. Еще один вопрос: в файле шаблона, который буде выведен через include обязательно писать echo или эта команда не нужна? Все выводится и так и так...
0 votes13 answers -
Наследование высоты блока
Друзья, помогите разобраться... уже весь мозг сломал Есть 2 блока, левый основной и правый, который должен наследовать высоту левого. Но есть небольшая хитрость! Максимальная высота левого не ограничена, когда как минимальная - 400px. У правого нужно жестко зафиксировать, что если высота левого 400px, то у него 400px. А если больше 400, то наследовать его высоту, которая меняется в зависимости от наполнения! Собственно все это нужно, что бы прикрутить полосу прокрутки для правого блока. Т.е. если вдруг высота правого становится больше левого, то у него должна появляться прокрутка! Возможно криво объяснил #main { float: left; margin-top: 16px; background-image: ur…
0 votes2 answers -
Проблема с Float в IE8 и с Margin: 0 auto; в общем.
Добрый день уважаемые дамы и господа. В общем учусь и набираюсь опыта в этом нелегком деле, и потихоньку делаю сайт. В общем на сайте на странице регистрации все нормально работает, но только не в IE, там почему то все Дивы берут и превращаются в лестницу, посмотрите пожалуйсто http://redsealtd.ru/?page=register Подскажите плизз что нужно написать в условных комментариях в таблице стилей для IE, что бы все показывалось как и Хроме и Мозилле. В общем если вы не возражаете, с вашего позволения задам 2 вопрос. В общем меню сверху хотел задать margin: 10px auto; что бы слева и справа был одинаковый отступ, что бы в общем меню было по центру. Вроде как дизайнеры так делаю. и п…
0 votes11 answers -
Чтиво для начинающих
Добрый вечер, я совсем недавно решил вплотную начать участвовать в веб-разработке и глубоко изучить html5 и css3 (для начала). Прошу помощи, скажите, с каких книг лучше всего начать это делать? Желательно конечно, чтобы еще можно было в эл.книге их читать)
0 votes11 answers -
тег abbr и IE6
Тег abbr в IE6 не поддерживается, стили для него тоже не принимаются. Но вроде как есть решение - надо в стилях писать html\:abbr. Проверил - не работает. Но на всякий случай желательно проверить. У кого есть IE6 посмотрите, подчеркивается текст или нет? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Тег ABBR</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style type="text/css"> HTML\:ABBR, ABBR { border-bottom: 1px dashed red; /* Пунктирное подчеркивание текста */ color: #000080; /* Темно-синий цвет текста */ } &…
0 votes9 answers -
Фиксед left: 0; при max-width
Собствено возникли такие траблы. <!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" xml:lang="ru" lang="ru"> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251" /> <title>fixed for min-, max-width body</title> <style type="text/css"> *{ margin: 0; padding: 0; } body,html { height: 100%; } body { background: rgb(235,235,235); width: 100%; min-width: 1000px; /* max-width: 1600px; - в реальном значении */ max-width: 1000px; /* Имитация монитора с разрешением бо…
0 votes18 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-