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

Статус
В этой теме нельзя размещать новые ответы.

Ardis

Профессор
Регистрация
26 Мар 2008
Сообщения
209
Реакции
42
Сталкнулся с проблемой валидности использования тега 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
Подробнее напиши

Так или не так?
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>
 
А зачем тебе див внутри ссылки? Ставь ссылке display:block и выравнивай как блок

<div style="width:1px;height:1px;"></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>
помогло (правда по верикали нет выравнивания), но съезжает картинка
Код:
#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> - а это зачем?

я так понимаю отступ.
 
А что тебе мешает управлять классом 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;
}
 

Вложения

  • 2012-09-01_184034.jpg
    2012-09-01_184034.jpg
    7,7 KB · Просмотры: 11
Код:
#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 как видно можно редктить свойства текста типа размер, шрифт и тд, а вот как его выронить вообще без понятия...

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

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>

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

<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
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху