Обтекание + центрирование

[monkeymafia]

Доброго времени суток.

Проблема вот какая : создал меню с выпадающим списком, все работало пока не проверили на IE6. пришлось переделывать. После переделки получилось, что в самом меню элементы расположены примерно так :

<li>Главная</li>

<li>Не главная<img src='someimage'></li>

<li>Тем более не главная</li>

someimage в данном случае это стрелочка индикатор выпадающего списка: курсор над кнопкой, стрелка указывает что список выпал(так скать для красоты).

Вот в чем проблема элементы меню находятся на разных уровнях, если считать от верхнего края...то "главная" примерно на 5 пикселей, "Не главная" на 7 пикселях и "Тем более не главная" на 5 пикселях. Понятно с чем связанно - с тем что в пункте "Не главная" есть картинка и за счет этого текст идет по уровню нижнего края картинки.

Итак вопрос : Как сделать и текст и картинку на одном уровне, да еще и таким образом, чтоб все между тэгами <li>...</li> осталось посередине.

Желательно вариант для IE 6, потому что остальные браузеры не привередливые.

*Вставляю картинку из предыдущего моего поста, чтоб показать как должны располагаться элементы в кнопке.

[Zippovich]

возможно line-height Вам поможет?

[slicemasta]

Как вариант можно заменить картинку на класс с фоновым изображением:

<li>Главная</li>

<li class="someimage">Не главная</li>

<li>Тем более не главная</li>

на класс someimage повесте фоном изображение и все.

Плюс от такой замены:

- проще позицинировать фонове изображение

- легко добавляеться ховер эффект, роловер.

Edited March 15, 2010 by slicemasta

[monkeymafia]

Zippovich,

возможно line-height Вам поможет?

Пробовал - не помогает! к сожалению

slicemasta,

Пробовал заменять, но из-за того что у меня итак там куча классов , id и везде бэкграунды...получается странная картинка. Для меня Background не вариант...хотя идея хорошая. была бы менюшка попроще так бы и поступил!

[SelenIT]

С vertical-align можно поиграться... top или middle попробовать (возможно, вдобавок к line-height).

Но вообще идея про фоновую картинку - самая правильная. В этих <li> точно ссылок нет, случаем? Можно было бы сделать фоном для #menu li a...

[slicemasta]

Zippovich,

Пробовал - не помогает! к сожалению

slicemasta,

Пробовал заменять, но из-за того что у меня итак там куча классов , id и везде бэкграунды...получается странная картинка. Для меня Background не вариант...хотя идея хорошая. была бы менюшка попроще так бы и поступил!

ну я думаю бить вас не будут если вы текст окутаете дополнительным спаном с фоновым изображением

типо так:

<li>Главная</li>

<li> <span class="someimage">Не главная</span></li>

<li>Тем более не главная</li>

если не получиться дайте ссылку на страничку, что нибудь придумаем.

Edited March 16, 2010 by slicemasta

[monkeymafia]

Вопрос решен. В нужных местах поигрался с vertical-align, а в целом картинки грузил в background. Осталось, только поиграться с расположением текста и убрать отступы в подменю в IE. Ну это уже совсем другая история

Всем огромное спасибо за помощь и отзывы. Приезжайте в Молдову - выпьем пива

Edited March 16, 2010 by monkeymafia

[monkeymafia]

К сожалению проблема осталась Я оказывается в последний раз на IE7 проверял...на IE6 мои буллетс не отображаются...

www.farmaceutica.md! в IE6 без буллетов...в остальных браузерах нормально отображается

[slicemasta]

это потому что в ие6 есть проблема с пнг картинками, ищите fixpng или сделайте буллеты гифками.

[monkeymafia]

slicemasta,

Ну дизайнеры мне так нарисовали сайт - что у меня весь проект это одна сплошная PNG картинка) образно... Потому все что сейчас есть на сайте все в формате PNG! Так что как видишь я фикс уже поставил!

DD_belatedPNG такой вот. Хз..я еще поиграюсь...но вроде выставил путь к PNG буллетов.

Кстати идея с gif'ками очень понравилось...но проверил и оказалось тоже самое. Я думаю тут проблема не в формате, а проблема в том ,что картинка находится в background'e! Насколько я знаю IE коряво работает с hover классом...опять же поставил фикс...а еще где то читал, что PNG фикс закрывает возможность изменять картинку например при наведении.

Интересно какими Фиксами вы пользуетесь - особенно когда надо менять background

[Azadi]

Я пока что не встречал pngfix'ов, которые бы умели применять фильтры на фоновые картинки, меняющиеся на :hover. Решение предлагаю такое:

1. Вместо IMG вставляете пустой тэг, например I.

2. Внутрь вставляете еще один I :-)

3. Первый I позиционируете так, как вам нужно (задаете размеры и обязательно overflow:hidden;).

4. Создаете спрайт из 2-х стрелочек и задаете этот спрайт фоном к внешнему I (размеры спрайта нужно указывать равными размерам картинки).

5. Накладываете на внутренний I AlphaImageLoader или применяете к нему ваш pngfix.

6. При наведении на ссылку вы при помощи отрицательного margin'а двигаете ваш внутренний I на нужное количество пикселей (половина спрайта).

Собственно вот... На http://cloudconf.ru/ у меня подобным образом сделаны скругленные уголки у пунктов меню.

[slicemasta]

slicemasta,

Ну дизайнеры мне так нарисовали сайт - что у меня весь проект это одна сплошная PNG картинка) образно... Потому все что сейчас есть на сайте все в формате PNG! Так что как видишь я фикс уже поставил!

DD_belatedPNG такой вот. Хз..я еще поиграюсь...но вроде выставил путь к PNG буллетов.

Кстати идея с gif'ками очень понравилось...но проверил и оказалось тоже самое. Я думаю тут проблема не в формате, а проблема в том ,что картинка находится в background'e! Насколько я знаю IE коряво работает с hover классом...опять же поставил фикс...а еще где то читал, что PNG фикс закрывает возможность изменять картинку например при наведении.

Интересно какими Фиксами вы пользуетесь - особенно когда надо менять background

ие6 понимает ховер только для ссылок.

дайте линк, могу поспорить что сделаю вам с помощью гифок

[monkeymafia]

Azadi,

Я пока что не встречал pngfix'ов, которые бы умели применять фильтры на фоновые картинки, меняющиеся на :hover. Решение предлагаю такое:

1. Вместо IMG вставляете пустой тэг, например I.

2. Внутрь вставляете еще один I :-)

3. Первый I позиционируете так, как вам нужно (задаете размеры и обязательно overflow:hidden;).

4. Создаете спрайт из 2-х стрелочек и задаете этот спрайт фоном к внешнему I (размеры спрайта нужно указывать равными размерам картинки).

5. Накладываете на внутренний I AlphaImageLoader или применяете к нему ваш pngfix.

6. При наведении на ссылку вы при помощи отрицательного margin'а двигаете ваш внутренний I на нужное количество пикселей (половина спрайта).

Собственно вот... На http://cloudconf.ru/ у меня подобным образом сделаны скругленные уголки у пунктов меню.

У меня в стране сейчас почти пол третьего ночи - с трудом понимаю мысль , но чувствую, что такого не пробовал. завтра преступлю к экспериментам - спасибо за идею!

slicemasta,

ие6 понимает ховер только для ссылок.

дайте линк, могу поспорить что сделаю вам с помощью гифок

Ну про hover эт я в курсе, я ж говорю поэтому и установил фикс whatever:hover.

Ну вот собственно выложил кусочек сайта на DepositFiles. Там как бы менюшка, в папочке IMG все нужные Png'шечки! Как бы так)Взгляните - может действительно что то не так делаю. Мне просто кажется ,что если вы сможете на гифках провернуть такое...то и Png Там можно будет за милую душу пропихнуть!

[monkeymafia]

Azadi,

У меня в стране сейчас почти пол третьего ночи - с трудом понимаю мысль , но чувствую, что такого не пробовал. завтра преступлю к экспериментам - спасибо за идею!

slicemasta,

Ну про hover эт я в курсе, я ж говорю поэтому и установил фикс whatever:hover.

Ну вот собственно выложил кусочек сайта на DepositFiles. Там как бы менюшка, в папочке IMG все нужные Png'шечки! Как бы так)Взгляните - может действительно что то не так делаю. Мне просто кажется ,что если вы сможете на гифках провернуть такое...то и Png Там можно будет за милую душу пропихнуть!

Вот и я до сих пор не придумал как их в IE6 использовать. Уже успел тип меню сменить, но проблема всеравно осталась. Чувствую я что это из-за какой то несовместимости Hover и Background в IE6.