верстка блока с линками на div

nvic · October 4, 2012

Направте на путь истинный, пожалуйста.

Пробую учится css верстке.

Проба изложена ниже.

Проблема в том, что в блоках не работает декорирование текста.

Работают эффекты но шрифты имеют стандартный цвет линка и подчеркнуты.

text-decoration: none; не реализуется.

Не имеет значение какой шрифт подключается.

Помогите разобраться, пожалуйста.

Заранее спасибо.

скрин проблемы:

http://yadi.sk/d/iyjI6prs01eZQ

вот код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

</head>

<body>

<div id="news_txt"><a href="nwesblock.html">текстовый новосной блок

текстовый новосной блок

текстовый новосной блок0</a></div></div>

<div id="news_txt"><a href="nwesblock.html">текстовый новосной блок

текстовый новосной блок

текстовый новосной блок0</a></div></div>

<div id="news_txt"><a href="nwesblock.html">текстовый новосной блок

текстовый новосной блок

текстовый новосной блок0</a></div></div></div>

</body>

</html>

вот CSS:

@charset "utf-8";

/* CSS Document */

@font-face {

font-family:'Bookman Old Style';

src:url(fonts/BOOKOSBI.TTF format('opentype'));}

#preview {

margin: auto;

width:640px;

zoom:1;

}

#news_block{

-webkit-transition: All 0.5s ease;

-moz-transition: All 0.5s ease;

-o-transition: All 0.5s ease;

-ms-transition: All 0.5s ease;

transition: All 0.5s ease;

font-family:"Bookman Old Style";

font-size:14px;

font-style:italic;

display: inline-block;

font-weight: bold;

width: 180px;

height: auto;

border: 0px;

border-radius: 0px 20px 0px 20px;

background-color: rgba(227,228,229,1);

padding:13px;

text-decoration: none;

}

#news_block:hover{

font-family:"Bookman Old Style";

text-decoration: none;

font-size:14px;

font-style:italic;

display: inline-block;

font-weight: bold;

width: 180px;

height: auto;

border: 0px;

border-radius: 0px 20px 0px 20px;

background-color: rgba(227,228,229,1));

padding:13px;

box-shadow:#00F;

box-shadow:

0px 4px 4px 0px rgba(0,225,255,0.6),

0px 2px 2px 0px rgba(0,127,255,0.5);

}

#news_img{

-webkit-transition: All 0.5s ease;

-moz-transition: All 0.5s ease;

-o-transition: All 0.5s ease;

-ms-transition: All 0.5s ease;

transition: All 0.5s ease;

display:block;

width: 140px;

height: 140px;

border:0px;

margin: 7px auto 7px auto;

border-radius:0px 15px 0px 15px;

position:relative;

}

#news_img:hover{

display:block;

border:0px;

margin: 7px auto 7px auto;

border-radius:0px 15px 0px 15px;

position:relative;

box-shadow:0px 4px 4px 0px rgba(0,0,0,1);

}

#news_txt{

-webkit-transition: All 0.5s ease;

-moz-transition: All 0.5s ease;

-o-transition: All 0.5s ease;

-ms-transition: All 0.5s ease;

transition: All 0.5s ease;

font-family:Verdana, Geneva, sans-serif;

font-size:10px;

font-style:normal;

font-weight: normal;

text-align:justify;

color: #333;

display:block;

width:auto;

height:auto;

margin: 10px auto 5px auto;

text-decoration: none;

}

#news_txt:hover{

font-family:Verdana, Geneva, sans-serif;

font-size:10px;

font-style:normal;

font-weight: normal;

text-align:justify;

color: #333;

display:block;

width:auto;

height:auto;

margin: 10px auto 5px auto;

text-shadow: 0px 2px 2px rgba(0,0,0,1);

text-decoration: none;

}

Modestes · October 5, 2012

Потому что text-decoration:none; нужно применять к ссылкам, а не к блоку.

Допустим

#news_block a{ text-decoration:none; }

P.S.

1. В панеле инструментов когда пишете сообщение есть угловые скобки <>, обрамляйте свой код.

2. Замените доктайп

вместо

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

вставьте этот

<!DOCTYPE html>

3. Вместо id используйте класс.

Sign In

верстка блока с линками на div

Question

nvic

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Modestes

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information