- 0
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-
Question
igmar
Если б порядком не замучился, то не стал бы заводить эту простую тему.
Везде написано, что сейчас таблицы не нужно использовать для верстки, а нужны Div.
Подскажите, как сверстать такой сайт - по типу сайтов с фотками и картинками. По высоте он будет на 100% страницы.
Сверху будет заголовок с меню навигации. Снизу будет 3 колонки.
В средней колонке будет картинка и она должна вся умещаться. Полос прокрутки в этом блоке быть не должно. Должен изменяться размер исходной картинки в этом блоке.
Слева будет динамическое раскрывающееся меню. Оно может быть длинным - там нужна полоса прокрутки. Справа будет доп информация, тоже может понадобиться полоса прокрутки.
Снизу будет небольшой подвал вспомогательной навигации.
Я знаю, как это сделать таблицей на 100% высоты, а потом в ячейки поместить div и заполнять их информацией.
А как это сделать только на div, чтобы в крайних блоках были полосы прокрутки, а в центральной не было? И чтобы, кроме заголовка и подвала, все блоки были одинаковой высоты?
Попробовал на основе примера с сайта добавить заголовок и подвал - не получилось. Дочерние div выходят из родительского по высоте, а подвал привязывается к последнему короткому предыдущему div. Как это поправить?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>Макет из трех колонок</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> #container { width: 651px; height: 100%; margin: 0 auto; border: 4px double black;} #header { font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */ font-weight: bold; /* Жирное начертание текста заголовка */ font-size: 80%; /* Размер шрифта */ color: black; /* Цвет текста заголовка */ width: 635px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ border: 1px solid black; /* Рамка вокруг слоя */ margin-left: 5px; /* Отступ слева */ margin-top: 0px; /* Отступ сверху */ } #footer { font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */ font-weight: bold; /* Жирное начертание текста заголовка */ font-size: 80%; /* Размер шрифта */ color: black; /* Цвет текста заголовка */ width: 635px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ border: 1px solid black; /* Рамка вокруг слоя */ margin-left: 5px; /* Отступ слева */ margin-top: 0px; /* Отступ сверху */ } #title1, #title2, #title3, #col1, #col2, #col3 { /* 1 */ font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */ font-weight: bold; /* Жирное начертание текста заголовка */ font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ width: 200px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ border: 1px solid black; /* Рамка вокруг слоя */ margin-left: 5px; /* Отступ слева */ margin-top: 2px; /* Отступ сверху */ float: left; /* Состыковка колонок по горизонтали */ } #col1, #col2, #col3 { /* 2 */ font-family: "Times New Roman", Times, serif; /* Шрифт с засечками */ font-size: 100%; /* Размер шрифта */ font-weight: normal; /* Нормальное начертание */ color: black; /* Цвет текста */ } /* Цвет фона каждого слоя */ #title1 { background: #B38541; } #title2 { background: #008159; } #title3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; } .tr { /* 3 */ clear: both; /* Отменяет действие float */ } </style> </head> <body><div id="container"><div id="header">Здесь блок меню</div> <div class="tr"> <div id="title1">Чебурашка</div> <div id="title2">Гена</div> <div id="title3">Шапокляк</div> </div> <div class="tr"> <div id="col1">Отряд мягкотелых, семейство лопоухих.<br>Это безобидное пушистое животное ныне находится на грани исчезновения, вследствие неправомерных действий людей охотившихся на чебурашек из-за их ценного меха и вкусного питательного мяса.</div> <div id="col2">Отряд длинномордых, семейство зеленых.<br>Хищник. Охотится на охотников, охотившихся за чебурашками. Ошибочно причисляется некоторыми авторами к отряду земноводных. Не имеет ничего общего с крокодилами.</div> <div id="col3">Отряд бабок, семейство вонючевредных.<br>Очень опасное существо из-за особенностей развития в пубертарном периоде. Является симбионтом с животным crysa larisa.</div> </div> <div id="footer">Подвал</div></div> </body></html>Link to comment
Share on other sites
11 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.