Форум PHP программистов > сверстать элемент

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: сверстать элемент

kollega

16.08.2011 - 20:14

В общем надо сверстать вот это:
в обычном состоянии:
user posted image

при наведении курсора:
user posted image

Я вроде как сверстал, но HTML Validator ругается. Мол контейнер <div> не должен быть внутри тега <a>

Вот как я делаю:


<div class="cont_message">
    <a href="#" class="message-link">
        <div class="message-text1">3</div>
        <div class="massage-text2">3 новых сообщения</div>
    </a>
</div>


.cont_message a.message-link{
    background: url(img/mail.png) no-repeat; 
    color:#FFFFFF; 
    text-decoration: none; 
    display: block; 
    height: 27px; 
    float:right
}
.cont_message a.message-link:hover{
    color:#df861d;
    background:url(img/mail_active.png) no-repeat;
}
.message-text1{
    margin: 0px; 
    text-align: center; 
    width: 18px; 
    float: left; 
    padding: 1px 0 0 12px; 
    color: #FFFFFF;
}
.message-text2{
    margin: 7px 0 0 10px; 
    float: left; 
    font-weight:bold;
}

Как сделать так, чтобы HTML Validator не ругался и без использования JavaScript?

Спустя 11 минут, 9 секунд (16.08.2011 - 19:25) Renden написал(а):

kollega
Ну так не используй див внутри А, в чем проблема? ;)

<div class="cont_message">
    <a href="#" class="message-link">
        <b class="message-text1">3</b>
        <b class="massage-text2">3 новых сообщения</b>
    </a>
</div>

Также можно любые теги заюзать типа h или p..

Спустя 7 минут, 36 секунд (16.08.2011 - 19:33) kollega написал(а):

Renden, спасибо. Тег <p> пробовал. Он выдает такую же ошибку(нельзя использовать <p> в <a>). А <b> не пробовал, а как оказывается зря.

Спустя 50 минут, 24 секунды (16.08.2011 - 20:23) blazze написал(а):

сам по себе тэг <b> уже не совсем валидный.

В необходимой тебе стуктуре наверное правильнее всего бы было использовать что-то типа такого:

<a class="myButton" href="#"><span class="posit">3</span>3 новых сообщения</a>

.myButton {
    background:url(image.png) no-repeat 0 50% #333;
    width: px;
    height: px;
    font-size: px;
    font-weight:700;
    color:#fff;
}

.myButton:hover {
    color:orange;
    background:url(imageHovered.png) no-repeat 0 50% #333;
}

спан элемент отпозиционировать абсолютно. все валидно и семантично.

Спустя 1 час, 12 минут, 40 секунд (16.08.2011 - 21:36) kollega написал(а):

blazze, +++++++

Быстрый ответ:

Здесь расположена полная версия этой страницы.