Jump to content
  • 0

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


monkeymafia
 Share

Question

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

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

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

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

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

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

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

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

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

e0cad005c4bd.jpg

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

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0

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

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

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

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

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

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

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

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

Edited by slicemasta
Link to comment
Share on other sites

  • 0

Zippovich,

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

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

slicemasta,

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0
Zippovich,

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

slicemasta,

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

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

типо так:

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

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

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

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

Edited by slicemasta
Link to comment
Share on other sites

  • 0

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

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

Edited by monkeymafia
Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

slicemasta,

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0
slicemasta,

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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 Там можно будет за милую душу пропихнуть!

Link to comment
Share on other sites

  • 0
Azadi,

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

slicemasta,

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy