CSS - Помогите мне оформить это меню без полей? - PullRequest
Новая
       18

CSS - Помогите мне оформить это меню без полей?

1 голос
/ 09 февраля 2010

Я создаю сайт, где я столкнулся с огромным лагом IE, когда зависал над меню. Я использую Cufon в комбинации, и кажется, что это вызывает огромное отставание, когда я применяю высоту, ширину, поля или отступы к элементу li: hover.

Итак, мне нужно найти умный способ сделать это иначе. Сайт здесь, http://w3box.com/mat

Я думаю, вы можете ясно видеть меню. Итак, я хочу сдвинуть все меню вниз, чтобы оно было на 3 или 4 пикселя выше нижней части линии высоты. Таким образом, он соответствует примерно той же вертикальной позиции, что и шрифт логотипа слева.

Тогда я хочу, чтобы эффект наведения был больше по высоте. Трудно объяснить, но при наведении указателя мыши на элемент меню представьте поле, в котором текст расположен в самом низу. Как это;

http://img710.imageshack.us/img710/2791/menuheader.jpg

Теперь, вы можете заметить, что стрела выглядит как вещь, торчащая внизу. Мне это не нужно, но если у вас есть идеи, как это сделать, я буду признателен за помощь! ;)

Ответы [ 4 ]

1 голос
/ 09 февраля 2010

Я не пробовал, но я думаю, что это может быть вариант.

У вас есть все в одном div, почему вы не пытаетесь поместить div в div?

это ваш текущий код для заголовка. 

<div id="header">  
                <img class="LogoChef" src="img/LogoKokk2.png" alt="Logo"/> 

                <img class="LogoMatkalender" src="img/MatkalenderLogo.png" alt="Logo"/>                     


                    <ul class="menuwrapper"> 
                        <li><h4><a href="#">Logg ut</a></h4></li> 
                        <li><h4><a href="#">Kontakt</a></h4></li> 
                        <li><h4><a href="#">Kontrollpanel</a></h4></li> 
                    <li><h4><a href="#">Oppskrifter</a></h4></li> 
                    <li><h4><a href="#">Hjem</a></h4></li> 
                    </ul> 



            </div>

Вы можете попробовать что-то вроде этого, чтобы иметь больше контроля над различными объектами. 

<div id="header" style="float:left;vertical-align:bottom">  
<div id="imgChef">
    <img class="LogoChef" src="img/LogoKokk2.png" alt="Logo"/> 
</div>
<div id="imgMat" style="float:left;vertical-align:bottom">
    <img class="LogoMatkalender" src="img/MatkalenderLogo.png" alt="Logo"/>                     
 </div
 <div id="menu" style="float:right;vertical-align:bottom">
<ul class="menuwrapper"> 
<li><h4><a href="#">Logg ut</a></h4></li>                                                              <li><h4><a href="#">Kontakt</a></h4></li> 
<li><h4><a href="#">Kontrollpanel</a></h4></li> 
<li><h4><a href="#">Oppskrifter</a></h4></li> 
<li><h4><a href="#">Hjem</a></h4></li> 
</ul> 
 </div>


</div>

Я не уверен, что это может быть правильная комбинация, но я думаю, что с помощью трех div внутри div вы получите больший контроль над элементами внутри div заголовка.

0 голосов
/ 09 февраля 2010

Для меня слишком много правил, слишком много бесполезных правил. У меня нет времени, чтобы все исправить и протестировать на FF / IE, но это работает, например: .menuwrapper li { плавать: право; стиль списка: нет; отступы: 30px 23px 3px 23px; положение: относительное;
верх: 7 пикселей; }

0 голосов
/ 09 февраля 2010

Как насчет по вертикали ?

0 голосов
/ 09 февраля 2010

Опустите h4 в меню, так как я думаю, что это не нужно. Затем установите display:block на <a> и используйте line-height и padding-left , padding-right, чтобы якорь расширялся до нужного размера. Также обратите внимание, что li: hover не поддерживается в IE6 / 7 без некоторых настроек. Чтобы расположить меню на том же уровне, что и логотип, просто установите margin-top для элемента ul.

...