- 0
-
Similar Content
-
By Schamil74
Всем привет!
Занимаюсь версткой 3 месяца, без наставника, просто просматривая обучающие ролики и читая источники по этой теме.
На данный момент сверстал 6 макетов: 2 фикс, 2 на бутстрап, 1 адаптивный без фреймворка и 1 резиновый-адаптивный без фреймфорка.
Выкладываю последний. Всю сложность можно оценить путем изменения области просмотра браузера, как ведут себя элементы на разных брейкпоинтах.
Все иконки svg-спрайты (с ними помучился).
В этой верстке немного пытался реализовать именования классов по БЭМ. Немного парился с кроссбраузерностью. Не тестировал на ie9 и ниже, такой задачи не было.
https://schamil74.github.io/Mishka/
-
By Zateya
Всем привет!
Надо сверстать небольшой проект.
По ссылке макеты, пока без подробного ТЗ. Скиньте, пожалуйста, ваши примеры работ на ok@telemark-it.ru и укажите ваши пожелания по бюджету.
Резина, от 1024 до 1280. Подробности как ресайзить и как работают формы будут в ТЗ (в принципе, активные элементы форм прорисованы и уже понятно).
https://cp.telemark-it.ru/workdir/task_files/058000/makety.txt
Предполагаю что тут работы примерно на пару недель. Основная работа будет со стилями форм
-
By lavrentyev
Доброго времени суток. Очень надеюсь на вашу помощь!
Сразу даю ссылку на код https://jsfiddle.net/Lavrentyev/f5ygLoxp/5/#&togetherjs=L9Tx3aRbGa
Проблема в том, что мне нужна резиновая шапка. Чтобы блок с выбором языка и кнопка входа при уменьшении экрана ехали влево, но при этом сама шапка не обрезалась. Когда я ставлю шапке min-width: 1280px то шапка не обрезается но и блок с выбором языка и кнопка входа остаются на месте (http://joxi.ru/52ayglEIdaYQ20), а если ставлю шапке width: 100% блоки едут как надо, но шапка понятно обрезается по ширине экрана. (http://joxi.ru/5mdogq5HZOd5r1)
Не могу разобраться с этим. Помогите, пожалуйста.
Немного разобрался, но не до конца. Получается если ставлю шапке width: 100% то при уменьшении экрана его размер остается 1280px но шапка уменьшается вместе с экраном. Я применил к body overflow-x: hidden и это сработало, убралась горизонтальная полоса прокрутки. Но при сильном уменьшении экрана должна появляться. Я это сделал с помощью медиа запроса. Полоса появляется, но опять же горизонтально прокручивается до 1280px, а шапка обрезана.
Все еще нуждаюсь в помощи!
-
By Ota
Друзья, всем добрый день!
Я полный новичок. Взял первый для себя макет и решил реализовать резиновую верстку. 3 колонки: левая фиксированная (width: 300px), центральная и правая резиновая. При этом центральная и правая делит пространство оставшееся от левой колонки между собой в отношении 70% (центр) на 30% (правый).
Вчера бился полдня, облазил весь гугл, нашел несколько решений, но они у меня почему-то не работали. Сегодня с утра потыкал самостоятельно и получилось реализовать. Вот код html:
<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="wrapper"> <div class="left-sidebar"> Left sidebar </div> <div class="inside-wrapper"> <div class="main"> Central column </div> <div class="right-sidebar"> Right sidebar </div> </div> </div> </body></html> а это css:
.wrapper { width: 100%; height: 500px;}.left-sidebar { width: 300px; height: 500px; background-color: red; float:left;}.inside-wrapper { margin-left: 300px;}.main { width: 70%; height: 500px; background-color: green; float: left;}.right-sidebar { width: 30%; height: 500px; background-color: yellow; float: right;}Собственно мне хотелось бы разобраться, почему в inside-wrapper нужен margin-left шириною в фиксированную колонку? Разве не должен inside wrapper так и так обтекать левую колонку справа и занимать все оставшееся место, а внутренние дивы делить в соотношении 70 на 30 это пространство.
Но если убрать margin-left, то центральная колонка внутри inside wrapper занимает 70% от всего экрана, и сталкивает правую колонку вниз. А правая колонка тоже занимает 30% всего экрана.
Помогите пожалуйста понять, какая там логика?
-
By tarthur
Всем привет.
Собственно по сабжу:
Верстка
GitHub верстки
Верстка резиновая с 1000px до 1600px. Прошу оценить выбранные мною методы верстки(напр. я выбрал верстать на флоатах, хотя мог все через позиционирование сделать. Так как я выбрал флоаты при сужении окна так же были выбраны свои методы перестроения блоков и т.п.) и верстку в целом.
P/S.
При нажатии на изображение все ненужное уходит вниз.
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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
danzo55
В общем есть такая проблема.
дана табличка
<title>Резиновая табличная верстка сайта</title><style type="text/css">.header {height:60px; background-color:#717dc9; padding:20px; text-align:center}.left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top}.center_col {background-color:#ffffff; padding:15px; vertical-align:top}.right_col {width:120px; background-color:#dddddd; padding:15px; vertical-align:top}.footer {padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px}</style></head><body><table cellpadding="0" cellspacing="0" width="100%" align="center"><tr><td colspan="3" class="header">Мой сайт</td></tr><tr><td class="left_col">Меню</td><td class="center_col">Ширинаячейквданномслучаезависитотвеличинымонитораилиразмераокнабраузера.</td><td class="right_col">Ссылки</td></tr><tr><td colspan="3" class="footer">© Все права защищены</td></tr></table></body> </html>внизу появляется полоса прокрутки, а нужно от него избавиться. Проблема в том, что, если в предложении существуют пробелы, то все ок, но если их нет - появляется этот жуткий скролбар. Кто имел опыт решения данной проблемы, подскажите)))
Link to comment
Share on other sites
2 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.