Увеличение текста при наведении

Тема в разделе "Веб-дизайн", создана пользователем sidor, 26 апр 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. sidor

    sidor

    Регистр.:
    7 июн 2006
    Сообщения:
    220
    Симпатии:
    14
    Ребята, вообщем, есть у меня листинг страниц внизу "1 2 3 4 5 6 ..." определенного размера. Мне нужно что бы при наведении на цифру, она увеличивалась, но при этом ничего не смещалось вниз или вверх. Я пробовал через a:hover, но тогда футер при наведении пригает и сдвигается вниз, а мне нужно что бы цифра просто увеличилась вверх (padding-top вверх делать пробовал, но ничего не получается все-равно). Посоветуйте решение пожалуйста.
     
  2. dralex

    dralex Постоялец

    Регистр.:
    13 июн 2008
    Сообщения:
    77
    Симпатии:
    18
    мдя, задачка с виду простая а в деле голову пришлось ломать...
    чисто дивами не вышло, пришлось применить таблицу, думаю в этом нет ничо плохого ведь это поле навигации индексировать поисковиком не нужно )
    Код:
    <head>
    <style>
    #nav {background:#dadada; text-align:center; height:70px;}
    #nav td {padding:20px 20px 23px 20px;}
    #nav a {border:1px solid silver; background:white; color:#000000; font-size:10px; font-family:verdana; text-decoration:none; padding:10px; margin:5px;}
    #nav a:hover {margin-top:0px; width:10px; height:10px; font-size:18px; padding:2px 8px 8px 8px; margin:5px;}
    </style>
    </head>
    <body>
    <table id="nav"><br style="clear:both;"><tr><td valign="bottom">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    </td></tr></table>
    </body>
    код корявенький, может кто улучшит)
    в IE6 смотрится ужасно, буду думать дальше...
     
  3. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    просто где постраничная нафигация слою задается высота допустим в 25 пикселей и все
     
  4. hamann11

    hamann11 Создатель

    Регистр.:
    19 ноя 2008
    Сообщения:
    48
    Симпатии:
    13
    не пробовал, но в голову приходит вариант с лайн-хейт поиграть. Должно сработать, если только вертикальная сдвижка смущает.
     
  5. ApeQ

    ApeQ Постоялец

    Регистр.:
    25 мар 2009
    Сообщения:
    78
    Симпатии:
    5
    Вариант - этот листинг страниц ("1 2 3 4 5 6 ...") просто в отдельный div засунуть с фиксированной высотой. Можно еще overflow:hidden приписать.
     
  6. whitewolff

    whitewolff Лимонадный Джо :)

    Регистр.:
    29 май 2007
    Сообщения:
    168
    Симпатии:
    33
    как вариант:
    a{
    font-size: xpx;
    padding: ypx 0;
    }
    a:hover{
    font-size:(x+z)px;
    padding:(y-(z/2))px 0;
    }

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

    Dewars Создатель

    Регистр.:
    14 мар 2009
    Сообщения:
    25
    Симпатии:
    1
    .nav a { font-size: 12px; line-height: 20px; }
    .nav a:hover { font-size: 15px; }
     
    sidor нравится это.
  8. dralex

    dralex Постоялец

    Регистр.:
    13 июн 2008
    Сообщения:
    77
    Симпатии:
    18
    Dewars
    лайн хеигхт я пробовал изначально, ничего не получилось !
     
  9. Dewars

    Dewars Создатель

    Регистр.:
    14 мар 2009
    Сообщения:
    25
    Симпатии:
    1
    dralex, попробуй так
    если не заработает - подучи html и css..
     
  10. dralex

    dralex Постоялец

    Регистр.:
    13 июн 2008
    Сообщения:
    77
    Симпатии:
    18
    Dewars, не заработало, щас подучу хтмл и цсс, а мог бы ты на нашем примере показать свою идею ? ну внедрить свой вариант в выше указанный мною код..
     
Статус темы:
Закрыта.