suvolod
-
Posts
3 -
Joined
-
Last visited
suvolod's Achievements
Explorer (1/14)
0
Reputation
-
Фиксированное по ширине меню не подходит, т.к. у меня часть пунктов состоят из двух слов. В этом случае ширина li-элементов, которые включают в себя одно слова, будет слишком большая. Некрасиво...
-
Сделал вертикальное меню.... хочу "подсвечивать" элемент по событию hover. Точнее, выделять его шрифтом большего размера ... но у меня при этом начинает прыгать меню, потому-что li меняет свою высоту. Как можно обойти этот косяк....? пробовал magrin-ы и паддинги во всех мыслимых и немыслимых комбинациях, и для li, и для роительского ul, но ничего не получилось.... Пример кода здесь: http://jsfiddle.net/Lbrc1n94/ *{ margin:0; padding:0; } html, body{ height:100%; width:100%;} div.main{ border:1px solid black; width:400px; height:80%; margin:auto auto; position:absolute; top:0px; bottom:0px; left:0px; right:0px; text-align:center; } ul.menu{ list-style-type: none; text-align:center; display:inline-block; background:yellow; } ul.menu li{ padding: 10px 0px; border-bottom:2px solid #c02222; } ul.menu li:last-child{ border:none;} ul.menu li a{ color:#C02222; text-decoration:none; font-family: Verdana, Geneva, sans-serif; font-weight:bold; font-size:14px; } ul.menu li a:hover{ font-size:16px; }<div class="main"> <ul class="menu"> <li><a href="#"> ГЛАВНАЯ</a></li> <li><a href="#">МЕБЕЛЬ</a></li> <li><a href="#">БЫТОВАЯ<br/>ТЕХНИКА</a></li> <li><a href="#">КАТАЛОГ</a></li> <li><a href="#">КОНТАКТЫ</a></li> <li><a href="#">ОБРАТНАЯ<br/>СВЯЗЬ</a></li> </ul> </div>
-
Вчера весь рабочий день просидел в гугле, но так и не смог найти ответа на вопрос: "Как в css растянуть блок по вертикали?". Точнее, ответы есть, но они на элементарные случай, когда блок растягивается на 100% высоты своего родителя. Но этот и подобные способы не работают, если перед моим блоком стоит другой блок, и мне нужно, соответственно, заполнить растягиваемым блоком все пространство от его текущего положения до конца экрана. Причем мне нужно именно растянуть блок точно до правого нижнего угла, а не "обрезать" родительским блоком все, вылезло за его размеры. Постараюсь объяснить зачем мне это нужно на простом примере: http://jsfiddle.net/ongpj2vz/ <body><div class="header"> <pre> высота этого блока может меняться фаэфыа </pre></div><div class="work_area"> <div class="separator_one"></div> <div class="separator_two"></div> </div></body>@charset "utf-8";/* CSS Document */*{ margin:0px;}html, body{ height:100%;}body{ overflow:hidden;}div.header{ background:lightcoral;}div.work_area{ position:relative; min-height:100%; background:lightgreen;}div.separator_one{ position:absolute; left:20%; width:2px; top:50px; /* отступ сверху - 50 px*/ bottom:130px; /* отступ снизу - 50px (+ 80px заголовок)*/ background:black; z-index:2; }div.separator_two{ position:absolute; right:20%; width:2px; top:50px; /* отступ сверху - 50 px*/ bottom:130px; /* отступ снизу - 50px (+ 80px заголовок)*/ background:black; z-index:2; }В этом примере div.header имеет изменяемую высоту, а декоративные разделители (div.separator_xxx) должны всегда начинаться строго в 50пикселях от нижней границы div.header и в заканиваться в 50 пикселях от нижней границы экрана. В примере я искусственно выровнял их снизу, зная точный размер заголовка... но стоит мне расширить/сузить высоту заголовка, и мое позиционирование "полетит", т.к. я не знаю правильных координат нижней границы div.work_area. Прошу помочь с решением... т.к. мозг уже кипит. Важно! - интересует решение на чистом CSS, без скриптов ( которые по дефолту выключены, наверное, в половине браузеров)