Jump to content

suvolod

Newbie
  • Posts

    3
  • Joined

  • Last visited

Everything posted by suvolod

  1. Фиксированное по ширине меню не подходит, т.к. у меня часть пунктов состоят из двух слов. В этом случае ширина li-элементов, которые включают в себя одно слова, будет слишком большая. Некрасиво...
  2. Сделал вертикальное меню.... хочу "подсвечивать" элемент по событию 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>
  3. Вчера весь рабочий день просидел в гугле, но так и не смог найти ответа на вопрос: "Как в 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, без скриптов ( которые по дефолту выключены, наверное, в половине браузеров)
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy