Comments 16
1 и 3 — остальные не нужны.
мой стандарт:
.menu ul li{
position:relative;
display:inline-block;
vertical-align:top; /*FIX IE*/
//float:left; /*FIX IE*/
}
и в IE можно не проверять)
.menu ul li{
position:relative;
display:inline-block;
vertical-align:top; /*FIX IE*/
//float:left; /*FIX IE*/
}
и в IE можно не проверять)
Беглый тест в IE6-7 показал:
1. position:relative; не влияет на раскладку
2. не ведет себя как inline-block, а ведет себя как float
3. vertical-align:top; делает ul высотой равной высоте строки внутри .menu (что поначалу сбило с толку)
Вывод:
Решение не рабочее, избыточное, запутывающее(коммент про vertical-align и хак с 2 слешами вместо звездочки).
Решение давно известно:
З. Ы. Если нужна поддержка IE — надо проверять, особенно в вашем случае.
1. position:relative; не влияет на раскладку
2. не ведет себя как inline-block, а ведет себя как float
3. vertical-align:top; делает ul высотой равной высоте строки внутри .menu (что поначалу сбило с толку)
Вывод:
Решение не рабочее, избыточное, запутывающее(коммент про vertical-align и хак с 2 слешами вместо звездочки).
Решение давно известно:
display: inline-block;
*display: inline;
zoom: 1;
З. Ы. Если нужна поддержка IE — надо проверять, особенно в вашем случае.
Для html5 есть flexbox umaar.github.io/css-flexbox-demo/, но жаль что пока не все браузеры это умеют.
css3*
Вот еще статейка на эту тему www.html5rocks.com/ru/tutorials/flexbox/quick/
Вот еще статейка на эту тему www.html5rocks.com/ru/tutorials/flexbox/quick/
Не совсем понятно зачем в примере на :hover дополнительно прописаны transition-duration
li a:hover {
padding-bottom: 3px;
-webkit-transition-duration: .3s;
-moz-transition-duration: .3s;
transition-duration: .3s;
border-bottom: 1px solid #dd9999;
}
Да и border повторяется
li a:hover {
padding-bottom: 3px;
}
Для того, чтобы вернуть исходное состояние с заданным эффектом, без него это был бы просто скачок.
Ничего подобного, не будет никакого скачка. Все данные анимации задаются один раз, как правило главному классу. А дальше всем манипуляциям типа :hover или просто через добавление класса, добавляются только свойства которые нужно поменять — jsfiddle.net/kjCL7/20/
Мне одному показалось, что это крутой материал?
UFO just landed and posted this here
Пустую строку после justify-style меню как-то можно сделать нулевой высоты?
Sign up to leave a comment.
Справочник фронт-энд девелопера: виды горизонтальных панелей навигации