Показано с 1 по 14 из 14

Тема: padding в ссылке

  1. #1

    Регистрация
    02.01.2007
    Сообщений
    16
    Создаю ссылку, задаю padding слева на 20пкс, и если ссылка длинная, то появляется вторая строка и уже без отступа.
    Есть ли решение проблемы?

  2. #2

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Originally posted by Defnur@Jan 2 2007, 06:21
    Создаю ссылку, задаю padding слева на 20пкс, и если ссылка длинная, то появляется вторая строка и уже без отступа.
    Есть ли решение проблемы?
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Такая ситуация может возникнуть, если у вас какой-нибудь маркер присутствует. Решение в этом случае довольно простое – задайте отрицательный text-indent для Вашей ссылки и выровняйте первую строку так, как Вам надо.

  3. #3

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    Originally posted by Defnur@Jan 2 2007, 04:21
    Создаю ссылку, задаю padding слева на 20пкс, и если ссылка длинная, то появляется вторая строка и уже без отступа.
    Есть ли решение проблемы?
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]

    это в принципе не должно проявляться, ситуация больше похожа на использование :first-line или text-indent. а display: block; не пробовали ссылке выставлять?

  4. #4

    Регистрация
    02.01.2007
    Сообщений
    16

    Сообщение

    Zigzag, благодарю, помог display: block;
    Но ситуация была без использования :first-line или text-indent. Просто у ссылки задан фон в виде иконки слева, и чтобы ссылка не вылазила на эту иконку, необходим был padding слева.

    [attachment=5110:attachment]

  5. #5

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    ааа. я не совсем правильно понял, но рад, что совет помог

  6. #6

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698

    Сообщение

    Самое интересное, как в такой конструкции вообще что-то могло куда-либо "вылазить", если display: block; не стоял изначально?...

  7. #7

    Регистрация
    02.01.2007
    Сообщений
    16
    Originally posted by Aykroyd
    [b]Самое интересное, как в такой конструкции вообще что-то могло куда-либо "вылазить", если display: block; не стоял изначально?...
    А что непонятно? Без блока вторая строка не имеет отступ и немного налазит на фон (иконку).

  8. #8

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Originally posted by Defnur@Jan 2 2007, 22:01
    А что непонятно? Без блока вторая строка не имеет отступ и немного налазит на фон (иконку).
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    У Вас ссылки списком заданы?

  9. #9

    Регистрация
    02.01.2007
    Сообщений
    16
    Originally posted by Aykroyd@Jan 3 2007, 00:14
    У Вас ссылки списком заданы?
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    нет, просто ссылки <a href="">

  10. #10

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Originally posted by Defnur@Jan 2 2007, 22:18
    нет, просто ссылки <a href="">
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Тогда всё понятно. Просто в большинстве случаев display: block; в таких решениях как-то сам собой подразумевается. Проблема обычно заключается в другом – если маркер идет не фоном, а отдельно вставляемым изображением, которое тоже включено в ссылку вместе с текстом. В этом случае из-за этого <img> и требуется отрицательный text-indent, обычно равный ширине этого <img>.

    А в общем и целом такое решение позволяет активировать ссылку при клике не только на ее тексте непосредственно, но также и на <img>, и вообще на ее "блочном" фоне, который в свою очередь может меняться по :hover.

  11. #11

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    в подобных конструкциях действительно используйте списки, это избавит от лишней головной боли и будет семантически верным

  12. #12

    Регистрация
    02.01.2007
    Сообщений
    16
    хм... я не вижу никакой головной боли

    А в общем и целом такое решение позволяет активировать ссылку при клике не только на ее тексте непосредственно, но также и на <img>, и вообще на ее "блочном" фоне, который в свою очередь может меняться по :hover.
    приведенный мной пример позволяет не меньше, + иконка меняется при наведении курсора на ссылку (блочный фон или саму иконку). Ссылки легко разделены линией-картинкой (см. скрин выше). По-моему всё просто и кода меньше, чем со списками.

    Но если я ошибаюсь, то докажите обратное - буду только рад улучшению своих навыков.

  13. #13

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Originally posted by Defnur@Jan 2 2007, 23:38
    Но если я ошибаюсь, то докажите обратное - буду только рад улучшению своих навыков.
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Zigzag просто предложил Вам семантически верное решение построения меню. Не более того.
    Возможно, Вам будет интересно прочитать [Только зарегистрированные пользователи могут видеть ссылки. ]

  14. #14

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    Originally posted by Defnur@Jan 2 2007, 21:38
    хм... я не вижу никакой головной боли
    приведенный мной пример позволяет не меньше, + иконка меняется при наведении курсора на ссылку (блочный фон или саму иконку). Ссылки легко разделены линией-картинкой (см. скрин выше). По-моему всё просто и кода меньше, чем со списками.

    Но если я ошибаюсь, то докажите обратное - буду только рад улучшению своих навыков.
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]

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

    для начала ссылку вам дали хорошую чуть выше.

Похожие темы

  1. Плавный релод / переход по ссылке без JS
    от escabar в разделе Вёрстка сайта
    Ответов: 6
    Последнее сообщение: 06.03.2008, 19:05
  2. Титл к ссылке на css
    от derf в разделе Вёрстка сайта
    Ответов: 3
    Последнее сообщение: 18.11.2007, 15:18
  3. Padding к блокам
    от Рёга в разделе Вёрстка сайта
    Ответов: 10
    Последнее сообщение: 26.06.2007, 13:43
  4. input padding
    от dmitry.eu в разделе Вёрстка сайта
    Ответов: 5
    Последнее сообщение: 17.12.2006, 23:35
  5. размер рисунка при ссылке на него
    от Morch в разделе Веб-программирование
    Ответов: 10
    Последнее сообщение: 05.07.2004, 00:29

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •