Search the Community
Showing results for tags 'max-height'.
Found 1 result
-
Решил поупражняться в верстке, сделал фиксированный верхний и левый бар, принялся за контент, но слой в который вложена аватарка имеет нулевую высоту, применение 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>