Проблем с hover

D

DobriMcConnor

Registered
Здравейте,

Тръгнах да оправям едно меню, но ми се появи проблем с hovera. Проблема е, че текста излиза извън картинката. Ето кода - http://jsfiddle.net/aH6jd/
 
Три варианта се сещам:

1. Картинката да ти е по-голяма. (Колкото за най-дългия текст).

2. Да разрежеш картинката на 3 - Лява част, дясна част и среда. В средата ще ти е текста, а картинката ще се повтаря по-хоризонтала.
-- Най-вероятно ще се загуби градиента на каринката.

3. Да използваш CSS3 gradient и да махнеш картинката.
-- Може да не се поддържа в по-старите браузъри.
++Има си fix-ове за тях.
 
4. Модификация на варианта с трите картинки - две картинки: лява и дясна. Като дясната е широка примерно 200px (широчина, която мислиш, че бутоните ти няма да превишат).
и
5. Малко да си пипнеш CSS-a, да сложиш padding-a на линковете, а не на li-тата. Съответно тях да ги направиш iniline-block елементи, а линковете да са ти блокови елементи.

http://jsfiddle.net/aH6jd/1/

Така се постига що-годе читав ефект, но можеш да пробваш все пак някои от трите начина на Fakeheal

Edit: Гледам, че последния бутон не му се показва целия фон. Затова е хубаво и на линковете да дадеш min-width: 90px; Но като цяло този вариант, по който ти си тръгнал те ограничава до това, че бутоните ти ще изглеждат добре единствено ако текста в тях е по-къс от 90px

Edit 2:
[css]margin: 0 auto; margin-top: -1px;[/css]
съвсем спокойно може да стане:
[css]margin: -1px auto 0;[/css]
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе