Report
-
Similar Content
-
By four17
Можно ли с помощью css выровнять блоки одинакового по уровню ?
вот картинка.
Высота блока должна быть не фиксированной .Контент может быть в любом количестве . Блоки с контентом должны быть на одном уровне . Т.е независимо сколько символом в контенте , описание строго на одном уровнем с другим описание , цена на одном уровне с ценой.
Каким способом можно реализовать данное решение ? спасибо за внимание.
-
By Grasss
Имеется div блок (height:50px; width:400px;)
При наполнении контентом, высота div'а должна автоматически увеличиваться.
Нужен скрипт, который будет выполнять эту задачу.
-
By Саша Черных
Здравствуйте. Упрощённый вариант слайд-шоу: http://codepen.io/Kristinita/pen/dMygQj . Хочу сделать так, чтобы изображения показывались на различных экранах только полностью, а не обрезками, как на скрине ниже . Т. е. если картинка не достигнет на экране определённой высоты, то пусть отображается только при вертикальном скроллинге. Эксперименты с min-height ни к чему не привели. Не могли бы подсказать, что не так? Спасибо.
-
By Sergo Skiller
Решил поупражняться в верстке, сделал фиксированный верхний и левый бар, принялся за контент, но слой в который вложена аватарка имеет нулевую высоту, применение height, max-height, min-height с указанием значения в % не приводит ни к какому результату, только фиксированное значение "N px" регулирует значение высоты слоя. И самое интересное: если я вставляю текст, то слой появляется и его высота равна занимаемой текстом высоте.
Вот как это выглядит без текста: http://storage8.static.itmages.ru/i/15/0106/h_1420526624_5424836_8e46b4d33d.png
Вот как это по идеи должно выглядеть: http://storage8.static.itmages.ru/i/15/0106/h_1420528235_8284072_2c67e7a154.png
Вот как это выглядит с текстом: http://storage6.static.itmages.ru/i/15/0106/h_1420528483_6607401_0d601a9bc7.png
Ссылка на архив с файлами (если кто возьмет, мне не жалко): https://yadi.sk/d/_dwboiXmdoebL
Подскажите, пожалуйста, почему слой <div id="content"> имеет нулевую высоту хотя контент в нем есть, и почему применение свойств высоты в процентах и auto не приводят ни к какому результату.
Вот код:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <style> /* Fonts */ @font-face{ font-family: KremlinCTT; src: url(fonts/KREM.otf), url(fonts/KREM.ttf), url(fonts/KREM.woff); } /* End fonts */ body, html{ margin:0px; padding:0px; background: url(img/bg_top.gif) #d6d6d6 repeat 0 0 fixed; width: 100%; height: 100%; } a{ text-decoration: none; } /* Header */ #header{ height:50px; width:100%; background-image: url(img/head_bg.png); position: fixed; left: 0px; top: 0px; right: 0px; z-index: 100; } #top_menu{ width:80%; max-width: 1024px; min-width: 900px; margin-left: auto; margin-right: auto; } #logo{ background-image: url(img/logo.png); max-width:162px; height:50px; margin-top: 0px;" } #top_menu_element{ height: 50px; /*float: left;*/ float: right; color: #fff; font-size: 22px; font-family: sans-serif; padding-top: 10px; padding-left: 7px; padding-right: 7px; font-family: KremlinCTT; } .top_menu_element{ height: 50px; /*float: left;*/ float: right; color: #fff; font-size: 22px; font-family: sans-serif; padding-top: 10px; padding-left: 7px; padding-right: 7px; font-family: KremlinCTT; } #top_menu_element_hover{ height: 40px; /*float: left;*/ float: right; color: #fff; font-size: 22px; font-family: sans-serif; padding-top: 10px; padding-left: 7px; padding-right: 7px; font-family: KremlinCTT; background: #000; opacity: 0.35; filter: alpha(Opacity=35); border: 0px; border-radius: 10px; } /* End Header */ /* Content */ #container{ width:80%; max-width: 1024px /*900px*/; min-width: 900px; border: 0px solid #000; margin-left: auto; margin-right: auto; margin-top: 50px; } #content{ margin-left: 162px; min-width: 738px; background: #eaeaea; } #left_menu{ width: 152px; height: 100%; min-height: 100%; float: left; border-left: 10px groove rgba(0, 0, 0, 0.55); background:; position: fixed; top: 50px; bottom: 0px; background: rgba(0, 0, 0, 0.40); } #left_menu_elements{ height: 30px; padding-left: 10px; font-family: verdana; font-size: 14px; padding-top: 10px; color: white; } #left_menu_elements:hover{ height: 30px; padding-left: 10px; font-family: verdana; font-size: 14px; padding-top: 10px; color: white; background: rgba(0, 0, 0, 0.75); } #photo_and_info{ width: 225px; height: 360px; float: left; margin-top: 10px; margin-left: 10px; margin-right: 5px; background: rgba(0, 0, 0, 0.55); } #photo{ width: 225px; height: 225px; padding-left: 2px; padding-right: 2px; } #name{ padding-left: 10px; color:; font-size: 18px; z-index: 2; } #online{ width:15px; height: 15px; background: #0af110; border: 0px solid #0af110; border-radius: 50%; position: relative; bottom: ; top: 210px; left: 195px; } #avatar{ width: 205px; height: 205px; border: 6px solid #fff; border-radius: 5%; margin-left: 2px; margin-right: 2px; margin-top: 2px; } #info{ width: 225px; } #bg_profile{ height: 360px; background: url(img/1.jpg); } /* End content */ </style> </head> <body> <div id="header"> <div id="top_menu"> <div style="float: left;"><a href="#"><img onmouseover="this.src='img/logo_hover.png'" onmouseout="this.src='img/logo.png'" src="img/logo.png"></a></div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'">Выход</div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'">Видео</div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'">Сообества</div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'">Люди</div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'">Общий чат</div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'">Игры</div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'"style="float: left; margin-left: 15px;"><img src="img/messages.png"> <small>1</small></div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'"style="float: left;"><img src="img/friends.png"> <small>1</small></div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'"style="float: left;"><img src="img/groups.png"> <small>2</small></div> <div class="top_menu_element" style="float: left;"><center>Рублей: 100</center></div> <div class="top_menu_element" style="float: left;"><center>ФБМ:100</center></div> </div></div> </div> <div id="container"> <div id="left_menu" > <a href="#"><div id="left_menu_elements">Моя Страница</div></a> <a href="#"><div id="left_menu_elements">Мои Фотографии</div></a> <a href="#"><div id="left_menu_elements">Мои Аудиозаписи</div></a> <a href="#"><div id="left_menu_elements">Мои Видеозаписи</div></a> <a href="#"><div id="left_menu_elements">Мои Блог</div></a> <a href="#"><div id="left_menu_elements">Мои Новости</div></a> <a href="#"><div id="left_menu_elements">Мои Закладки</div></a> <a href="#"><div id="left_menu_elements">Мои Гости</div></a> <a href="#"><div id="left_menu_elements">Мои Документы</div></a> <a href="#"><div id="left_menu_elements">Мои Настройки</div></a> <a href="#"><div id="left_menu_elements">Реклама</div></a> <a href="#"><div id="left_menu_elements">Приложения</div></a> </div> <div id="content"> <div id="photo_and_info"> <div id="photo"><!--div id="online"></div--><img src="img/no_avatar.png" id="avatar"></div> <div id="info"> <div id="name">Имя Фамилия</div> </div> </div> </div> </div> </body></html>
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-