выравнивание текста в ссылке

Тема в разделе "Верстка", создана пользователем Ardis, 1 сен 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. Ardis

    Ardis

    Регистр.:
    26 мар 2008
    Сообщения:
    202
    Симпатии:
    40
    Сталкнулся с проблемой валидности использования тега div внутри тега а.
    как оказалось нельзя
    Как щас:
    HTML:
    
    <div class="left_block_bg_1">
    <div style="width:1px;height:1px;"></div>
    <div style="margin:16px 0 0 4px;width:217px;height:33px;">
    <a href="/" class="menu_button_1">
     
    <div style="margin: 6px 0 0 50px;">Новости</div>
     
    </a>
    </div>
    </div>
    
    Как правильно не парясь с кросбраузерностью выронить текст?
    Буду рад готовому решению :ah:
     
  2. Дмитрий Кесаев

    Дмитрий Кесаев aka Zlobniy Babko

    Заблокирован
    Регистр.:
    10 май 2007
    Сообщения:
    1.332
    Симпатии:
    1.266
    Подробнее напиши

    Так или не так?
    PHP:
    <div class="left_block_bg_1">
    <
    div style="width:1px;height:1px;"></div>
    <
    div style="margin:16px 0 0 4px;width:217px;height:33px;">
    <
    div style="margin: 6px 0 0 50px;">
    <
    a href="/" class="menu_button_1">Новости</a>
    </
    div>
    </
    div>
    </
    div>

    или так
    PHP:
    <div class="left_block_bg_1">
    <
    div style="width:1px;height:1px;"></div>
    <
    div style="margin:16px 0 0 4px;width:217px;height:33px;">
    <
    div style="margin: 0px 0 0 0px;">
    <
    a href="/" class="menu_button_1">Новости</a>
    </
    div>
    </
    div>
    </
    div>
     
  3. linkoman

    linkoman Создатель

    Регистр.:
    18 дек 2009
    Сообщения:
    35
    Симпатии:
    3
    А зачем тебе див внутри ссылки? Ставь ссылке display:block и выравнивай как блок

    <div style="width:1px;height:1px;"></div> - а это зачем?
     
  4. Ardis

    Ardis

    Регистр.:
    26 мар 2008
    Сообщения:
    202
    Симпатии:
    40
    Код:
    <div class="left_block_bg_1">
    <div style="width:1px;height:1px;"></div>
    <div style="margin:16px 0 0 4px;width:217px;height:33px;">
    <div style="margin: 6px 0 0 50px;">
    <a href="/" class="menu_button_1">Новости</a>
    </div>
    </div>
    </div>
    помогло (правда по верикали нет выравнивания), но съезжает картинка
    Код:
    #left_block .left_block_bg_1 {
        width: 221px;
        height: 50px;
        background: url(../images/left_block_1.png) top center no-repeat;
    я так понимаю отступ.
     
  5. peterlee

    peterlee Создатель

    Регистр.:
    31 июл 2012
    Сообщения:
    13
    Симпатии:
    4
    А что тебе мешает управлять классом menu_button_1 и одновременно классом left_block_bg_1? Используя их одновременно можно padding-ами спокойно выровнять картинку относительно текста и т.д.

    HTML:
    <div class="left_block_bg_1">
    <a href="/" class="menu_button_1">Новости</a>
    </div>
    HTML:
    .menu_button_1 {
    background: url(left_block_1.png) no-repeat bottom left;
    padding-left: 25px;
    }
    .left_block_bg_1 {
    padding: 20px;
    }
     

    Вложения:

  6. Ardis

    Ardis

    Регистр.:
    26 мар 2008
    Сообщения:
    202
    Симпатии:
    40
    Код:
    #left_block .left_block_bg_1 {
        width: 221px;
        height: 50px;
        background: url(../images/left_block_1.png) top center no-repeat;
    1 картинка
    а сверху еще одна:
    Код:
    .menu_button_1 {
        text-decoration: none;
        position:absolute;
        width: 217px;
        height: 33px;
        background: url(../images/menu_button_1.png) top right repeat-y;
        font-size: 16px;
        font-family:Tahoma;
        color:#000;
    }
    в menu_button_1 как видно можно редктить свойства текста типа размер, шрифт и тд, а вот как его выронить вообще без понятия...

    Убрал див из ссылки, текст съехал, пробую щас через хром эксперементировать...
     
  7. Nonsleep

    Nonsleep Создатель

    Регистр.:
    7 авг 2012
    Сообщения:
    24
    Симпатии:
    4
    Бога ради извините, что влажу в беседу, но такой конструкцией не проще делать меню?

    HTML:
    
    <style>
    ul {margin:0px; padding:0px;}
    li {width:100px; height:20px; background:red; list-style-type: none;}
    li:hover {background:green;}
    span {padding-left:10px;}
    </style>
    <div class="content_body_center rounded-right">
    <div>
    <ul>
    <a href=""><li><span>123</span></li></a>
    <a href=""><li><span>123</span></li></a>
    </ul>
    </div>
    
    или того проще

    HTML:
    
    <div>
    <a href=""><p>123</p></a>
    <a href=""><p>123</p></a>
    </div>
    
    Это я к тому, что в таких конструкциях нет проблем с выравниванием текста.
     
  8. Ardis

    Ardis

    Регистр.:
    26 мар 2008
    Сообщения:
    202
    Симпатии:
    40
    Не поверите =)
    Все оказалось проще на столько что просто жесть
    Всего то заменить тег DIV на SPAN и о чудо, валидация пройдена!
    Но правда ошибки еще есть, но уже другого уклона, всем спасибо и до новых встречь :beer:
    РЕШЕНО!
     
    sarhov нравится это.
  9. matiass

    matiass Создатель

    Регистр.:
    30 май 2007
    Сообщения:
    44
    Симпатии:
    7
    Валидность же нужна не только для валидатора, а и для браузера (что бы ему проще было рендерить страницу, хотя сайчас браузеры настолько быстро работают что на это можно забить, чего я вам делать не советую). У вас все равно получается блок в строчном элементе.
    Напишите лучше так, заодно и кода меньше будет

    <a href="http://rf-office.ru/lk.php" class="menu_button" onclick="return false;">Личный кабинет</a>

    .menu_button{
    background: url("http://rf-pvp.ru/templates/rf-pvp/images/menu_button_1.png") 5px 0 no- repeat;
    padding: 6px 0 8px 50px;
    position:relative;
    display:block;
    width:167px;
    height:19px;
    color: #000;
    line-height:19px;
    font-family: "Tahoma";
    text-decoration:none;
    }

    2Nonsleep ↓
    Nonsleep - посмотрите внимательно на то что вы написали. Автору как я понял нужна валидность а у вас в ul лежит a, и в ссылке p
     
Статус темы:
Закрыта.