X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> При наведении на ссылку меню она сдвигает все что есть справа от нее., при наведении текс станоится полужирным.
S1xteen
S1xteen
Topic Starter сообщение 7.11.2011, 22:06; Ответить: S1xteen
Сообщение #1


Бывалый
****

Группа: User
Сообщений: 293
Регистрация: 20.9.2010
Поблагодарили: 64 раза
Репутация:   12  


Как можно разрулить проблему?
Смотрим на анимацию

и обращаем внимание на то, что при наведении все сдвигается вправо.

Код такой:
<ul>
            <li><a href="#">Платье</a></li>
            <li><a href="#">Юбки</a></li>
            <li><a href="#">Кофты</a></li>
</ul>

li a{
    color:#000;
    text-decoration:none;
}
li a:hover{
    color:#ff0000;
    text-decoration:underline;
    font-weight:700;
}

Отрицательным margin-ом не подходит.
Спасибо.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
GC_
GC_
сообщение 7.11.2011, 22:11; Ответить: GC_
Сообщение #2


Завсегдатай
*****

Группа: Active User
Сообщений: 902
Регистрация: 14.1.2008
Из: Red-Ярск
Поблагодарили: 364 раза
Репутация:   78  


Может просто убрать bold для ссылки при наведении?


--------------------
В чем сила, Брат?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
altairpk
altairpk
сообщение 7.11.2011, 22:14; Ответить: altairpk
Сообщение #3


Бывалый
****

Группа: Banned
Сообщений: 452
Регистрация: 14.3.2011
Поблагодарили: 76 раз
Репутация:   12  


Да, убрать жирное выделение, или поставить max-width: XXpx;
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
S1xteen
S1xteen
Topic Starter сообщение 7.11.2011, 22:21; Ответить: S1xteen
Сообщение #4


Бывалый
****

Группа: User
Сообщений: 293
Регистрация: 20.9.2010
Поблагодарили: 64 раза
Репутация:   12  


(GC_ @ 7.11.2011, 21:11) *
Может просто убрать bold для ссылки при наведении?

Это как раз и возникает из-за bold, и убирать его не нельзя.
max-width тоже не пойдет т.к слова разные по ширине.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
un1name1d
un1name1d
сообщение 7.11.2011, 22:45; Ответить: un1name1d
Сообщение #5


Синдром вахтёра на пенсии
******


Группа: Active User
Сообщений: 1686
Регистрация: 20.1.2011
Поблагодарили: 1906 раз
Репутация:   172  


li a{
    color:#000;
    text-decoration:none;
font-size: (X)px;
}
li a:hover{
    color:#ff0000;
    text-decoration:underline;
    font-weight:bold;
font-size: (X-1)px;
}

Где X - размер шрифта, а X-1 - размер шрифта минус один пиксель

Сообщение отредактировал un1name1d - 7.11.2011, 22:45


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
S1xteen
S1xteen
Topic Starter сообщение 7.11.2011, 23:02; Ответить: S1xteen
Сообщение #6


Бывалый
****

Группа: User
Сообщений: 293
Регистрация: 20.9.2010
Поблагодарили: 64 раза
Репутация:   12  


un1name1d, нет sad.gif УГ получается, текст кукожится и всё равно ездит.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
un1name1d
un1name1d
сообщение 7.11.2011, 23:29; Ответить: un1name1d
Сообщение #7


Синдром вахтёра на пенсии
******


Группа: Active User
Сообщений: 1686
Регистрация: 20.1.2011
Поблагодарили: 1906 раз
Репутация:   172  


li a{
    color:#000;
    text-decoration:none;
font-size:11px}
li a:hover{
    color:#ff0000;
    text-decoration:underline;
    font-weight:bold;
font-size:10px}

facepalm.gif как же я раньше не додумался. Проверил - текст не сдвигается сдвигается

Сообщение отредактировал un1name1d - 7.11.2011, 23:32
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
S1xteen
S1xteen
Topic Starter сообщение 9.11.2011, 17:48; Ответить: S1xteen
Сообщение #8


Бывалый
****

Группа: User
Сообщений: 293
Регистрация: 20.9.2010
Поблагодарили: 64 раза
Репутация:   12  


Может кто ещё что дельное подскажет? Кроме того, что уже советовали в теме.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
staya
staya
сообщение 10.11.2011, 18:18; Ответить: staya
Сообщение #9


Новичок
*

Группа: User
Сообщений: 20
Регистрация: 9.11.2011
Поблагодарили: 2 раза
Репутация:   1  


Может немного не по теме, но на сколько я понял, нужно чтобы при наведении был точно жирный шрифт.
Есть предложение всегда использовать жирный шрифт, просто менять цвет и добавлять подчеркивание при наведении. Сам лично пользуюсь именно таким способом. Накидал код.

li{float:left;padding: 10px;  background: #5555AA;}
li a{
    color:#000;
    text-decoration:none;
    font-size: 16px;
    font-weight:700;
    padding: 10px;
}
li a:hover{
    color:#ff0000;
    text-decoration:underline;
font-weight:700;
background: #CCCCCC;
}


Еще может понадобиться. Есть один немного карявый, но рабочий метод, чтобы не сдвигалось меню. Для этого нужно задать при наведении на кнопку меню - уменьшение размера шрифта.

li{float:left;padding: 10px;  }
li a{
    color:#000;
    text-decoration:none;
    font-size: 16px;
}
li a:hover{
    color:#ff0000;
    text-decoration:underline;
    font-weight:700;
    font-size: 14px;
}

Это немного варварский метод, но вроде работает. Это частный случай для первого слова "Платье". Соответственно, нужно будет для всех других пунктов меню сделать свой класс, и применять уникальное значение размера шрифта, которое будет зависеть от количества букв в слове. Как то так.

Вообще, советовал бы не замарачиваться, и взять мой первый вариант. Отлично смотрится, естественно, если верно цвета подобрать.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
oroom
oroom
сообщение 11.11.2011, 18:06; Ответить: oroom
Сообщение #10


Бывалый
****

Группа: User
Сообщений: 274
Регистрация: 1.4.2011
Из: Минск
Поблагодарили: 71 раз
Репутация:   19  


Я вижу только 2 не слишком извращенных варианта:
- сделать фиксированную ширину для каждого пункта меню или просто достаточно большую общую для всех, (если меню будет меняться вычислять ширину слов на сервере)
- использовать шрифт с одинаковой шириной regular и bold начертаний

Изврат:
    li a{
    color:#000;
    text-decoration:none;
    letter-spacing: 0.5px;
    
}
li a:hover{
    color:#ff0000;
    text-decoration:underline;
    font-weight:700;
    letter-spacing: -0.5px;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Пошив одежды - что не так с сайтом ?
22 bridge8 1428 Сегодня, 17:24
автор: bridge8
Горячая тема (нет новых ответов) Juddy.biz - конвертация мобильного трафика на все 100
107 juddy 42631 Сегодня, 16:19
автор: juddy
Горячая тема (нет новых ответов) Что лучше, фриланс, удаленка, или работа в офисе солидной компании?
96 Levizar 7866 Сегодня, 14:57
автор: Catherine_Molli
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыЕсть ли среди нас Линуксоиды
27 freeax 1853 Вчера, 23:42
автор: Cunningfox
Открытая тема (нет новых ответов) Что делать если боты и поисковики грузят сервер?
Превышение нагрузки на сервер.
8 nahalturu 2298 Вчера, 17:12
автор: vds4you


 



RSS Текстовая версия Сейчас: 14.12.2017, 19:30
Дизайн