Jump to content
  • 0

Не могу сделать меню


Choo
 Share

Question

tf.gif

Вот такое меню мне нужно сделать. Слева выбор пункта, справа контент. Причём контент в рамке и выбранный пункт должен быть в рамке, а остальное нет. Так вот. Я сделал так - 2 слоя с позишн=абсолют, в одном ul-список пунктов, в другом поле для контента. У контента со всех сторон бордер, у выделенного элемента справа-сверху-снизу, с права белый, который как бы перекрывает правый бордер. Всё так и получается, но это решение не подошло из-за проблемы:

tf3.gif

Как видите, перекрыло на 2 пикселя больше, чем надо, а это мне не подходит. Ваши предложения?

HTML:

<div class="cats">
<ul>
<li class="selected cat_events">события</li>
<li class="cat_design">дизайн</li>
<li class="cat_music">музыка</li>
<li class="cat_extreme">экстрим</li>
<li class="cat_gadjets">гаджеты</li>
</ul>
</div>

<div class="content">
тут контент
</div>

CSS:

div#popular_news div.cats {
z-index: 2;
position: absolute;
width: 112px;
}

div#popular_news div.cats li {
padding-left: 15px;
padding-top: 3px;
height: 22px;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
border-bottom: 1px solid #FFF;
font: 14px Arial;
display: block;
}

div#popular_news div.cats li.selected {
border-top: 1px solid #D9D8CA;
border-left: 1px solid #D9D8CA;
border-bottom: 1px solid #D9D8CA;
border-right: 1px solid #FFF;
}

div#popular_news div.content {
z-index: 1;
position: absolute;
min-height: 133px;
width: 375px;
left: 251px;
border: 1px solid #D9D8CA;
}

Edited by Choo
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Картинки обновил. Объясняю. Мне надо чтобы пункт меню перекрыл бордер меню контента и получилось то, что я изобразил на рисунке 1. Но перекрывает не только внутренняя часть, но и внешняя, вобщем проще на рисунок посмотреть. То что через бордеры не получится я уже не понял. Как по-другому реализовать такое меню?

Link to comment
Share on other sites

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • 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