действительный заголовок HTML - PullRequest
Новая
       13

действительный заголовок HTML

2 голосов
/ 08 мая 2009

Есть ли способ написать правильный заголовок / ссылку / изображение? Что-то вроде 

<a href="index.html"><h1 id="logo">Company name</h1></a>

(с заданным фоновым изображением и смещением текста влево, чтобы его не было видно через css)

Ответы [ 4 ]

7 голосов
/ 08 мая 2009

Что-то вроде: 

<h1 id="logo"><a href="index.html">Company Name</a></h1>

#logo a {
    display: block;
    width: 200px; /* width and height equal to image size */
    height: 100px;
    background: transparent url(images/logo.png) no-repeat;
    text-indent:-9999px;
}

Проблема с исходной разметкой в ​​том, что <a> является встроенным элементом, а <h1> является блочным элементом. Встроенный элемент не может содержать блочный элемент.

3 голосов
/ 08 мая 2009

Нет, якорные элементы не могут содержать элементы h1.

Кроме того, фоновые изображения должны быть зарезервированы для фонов - логотип не является фоном, это важная информация. 

<h1><a href="/"><img src="/images/logo.png" alt="Company Name"></a></h1>

Помните, что, хотя личность компании, вероятно, является наиболее важным заголовком на домашней странице, ее, вероятно, нет на других страницах, поэтому обычно ее следует понижать до других.

1 голос
/ 08 мая 2009

Это действительно, и я думаю, что достигает того, что вы ищете, то есть все изображение является ссылкой на домашнюю страницу. 

<a href="index.html"><img src="logo.png" id="logo" alt="Company Name" /></a>

Если все, что вы делаете, это оборачиваете тег H1 в вашем примере, тогда ссылка кликабельна только вокруг текста. Это исключит поле тега H1.

Для скрытия текста не требуется CSS, поскольку название компании содержится в атрибуте ALT, который читается Google и программами чтения с экрана.

Другой путь:

Если вам на самом деле нужно изображение в качестве фона и текст на переднем плане, есть еще один способ: 

<body>
   <div id="header"> 
      <h1>Some Text Here</h1>
   </div>

   <div id="main-content">
       ... lots of content here ...
   </div>
 </body>

CSS: 

#header { 
    height: 55px;   // The height of you image
    width: 780px;   // The width of the image
    background: url(picture.png);
    margin: 0 auto; // To keep this div centered 
}

#header h1 {
    font-family: 'Times New Roman';
    text-decoration: bold;
    margin-left: 55px;  // This makes the text come in 55px from 
                        // the left of the containing div. Adjust to suit.
    margin-top: 10px;   // Same as above.
}

Это полезный метод, если вы хотите часто менять текст. Цитата типа «день» или если ваш босс всегда просит вас настроить фоновое изображение.

1 голос
/ 08 мая 2009

Это недопустимый HTML-код, но вы можете использовать CSS с допустимым кодом для достижения желаемого:

HTML 

<h1 id="logo"><a href="index.html">Company name</a></h1>

CSS 

h1 a:link, h1 a:visited {
  display: block;
}

Вы можете дополнительно стилизовать элемент A для достижения того, чего вы хотите.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...