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

[Ardis]

Сталкнулся с проблемой валидности использования тега div внутри тега а.
как оказалось нельзя
Как щас:

<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>

Как правильно не парясь с кросбраузерностью выронить текст?
Буду рад готовому решению

 

[Дмитрий Кесаев]

Подробнее напиши

Так или не так?

<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>

или так

<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>

 

[linkoman]

А зачем тебе див внутри ссылки? Ставь ссылке display:block и выравнивай как блок

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

 

[Ardis]

<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;

А зачем тебе див внутри ссылки? Ставь ссылке display:block и выравнивай как блок

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

я так понимаю отступ.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[peterlee]

А что тебе мешает управлять классом menu_button_1 и одновременно классом left_block_bg_1? Используя их одновременно можно padding-ами спокойно выровнять картинку относительно текста и т.д.

<div class="left_block_bg_1">
<a href="/" class="menu_button_1">Новости</a>
</div>

.menu_button_1 {
background: url(left_block_1.png) no-repeat bottom left;
padding-left: 25px;
}
.left_block_bg_1 {
padding: 20px;
}

 

[Ardis]

#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 как видно можно редктить свойства текста типа размер, шрифт и тд, а вот как его выронить вообще без понятия...

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

 

[Nonsleep]

Бога ради извините, что влажу в беседу, но такой конструкцией не проще делать меню?

<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>

или того проще

<div>
<a href=""><p>123</p></a>
<a href=""><p>123</p></a>
</div>

Это я к тому, что в таких конструкциях нет проблем с выравниванием текста.

 

[Ardis]

Не поверите =)
Все оказалось проще на столько что просто жесть
Всего то заменить тег DIV на SPAN и о чудо, валидация пройдена!
Но правда ошибки еще есть, но уже другого уклона, всем спасибо и до новых встречь
РЕШЕНО!

 

[matiass]

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

<a href="Для просмотра ссылки Войди или Зарегистрируйся" class="menu_button" onclick="return false;">Личный кабинет</a>

.menu_button{
background: url("Для просмотра ссылки Войди или Зарегистрируйся") 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