Как связать ячейку таблицы?

-3

Мне нужно установить ссылку на файл главной страницы. Поэтому я установил фоновое изображение для столбца таблицы (<td>) и дал некоторый шрифт как «домашний» отдельно. Теперь я настраиваю событие «onclick» и перенаправляю его на страницу с <td>. Но это дает некоторые пробелы снизу изображения в браузере. Таким образом, ссылка (символ руки) начинается с белых пробелов ниже на изображение кнопки. Я проверил все настройки полей, отступы и т. Д. Но это не сработает. Итак, теперь я решил установить href для фонового изображения. Возможно ли, или любой другой способ исправить эту проблему? Я нашел некоторые помогает в Интернете. Но я не знаю, как использовать этот код. Я добавил код справки с этим сообщением.Как связать ячейку таблицы?

Мой код:

<tr style="height:44px;"> 
      <td id="Homebutton" runat="server" style="height: 44px; width: 101px; cursor: pointer;" 
       class="menubuttonhome" align="center" onclick="navigate(id)" onmouseover="this.className='menubuttonhomefocus'" 
       onmouseout="this.className= 'menubuttonhome'"> 
       Home 
      </td> 
</tr>

CSS Файл

.menubuttonhomefocus 
     { 
      background-image: url('Images/homebuttonfocus.png'); 
      background-repeat: no-repeat; 
      vertical-align: top; 
      color: White; 
      padding-top: 11px; 
      font-family: Arial; 
      font-size: 10pt; 
      font-weight: 500; 
     }

Помощь код из интернет

a.particular-link {display: block; /* or inline-block; I think IE would respect it since a link is an inline-element */ 
        background: #fff url(path/to/image.gif) top left no-repeat; 
        text-align: center; 
        line-height: 50px; }

источник

2012-05-02 Arun Kumar

Описание очень запутанное и, кажется, постулирует что-то невозможное (вы не можете сделать ссылку на фоновое изображение, хотя вы можете присвоить фоновое изображение ссылке). Пожалуйста, переформулируйте и объясните, почему вы не можете использовать простую ссылку '...'. –

Если я сделаю это как просто ссылку href .. он оставляет некоторые пробелы под изображением. Это означает, что когда мы нажимаем пустое пространство, оно перенаправляется на другую страницу. Вот почему я хочу, чтобы это было только фоновым изображением. –

HTML

<tr> 
    <td id="Homebutton" runat="server" class="menubutton"> 
    <a href="home.html">Home</a> 
    </td> 
</tr>

CSS

td { 
    padding: 0; 
} 

.menubutton > a { 
    display: block; 
    width: 101px; 
    height: 44px; 
    background-repeat: no-repeat; 
    vertical-align: top; 
    padding-top: 11px; 
    color: white; 
    text-align: center; 
    font-family: Arial; 
    font-size: 10pt; 
    font-weight: 500; 
    cursor: pointer; 
} 

#Homebutton { 
    background-image: url(Images/homebutton.png); 
} 

#Homebutton:hover { 
    background-image: url(Images/homebuttonfocus.png); 
}

Примечания для эффектов перекатывания нужно просто использовать :hover псевдо-класс.

КПП. пространство в нижней части изображения зарезервировано для текста. То есть если вы написали текст, он появится под изображением.

источник

2012-05-02 10:28:04

Большое спасибо. Тогда еще одна проблема. моя общая высота стола составляет 86 пикселей.Я разделяю его на две строки, первая строка - 42 пикселя. то вторая строка равна 44 px. Изображение моей домашней кнопки находится во втором ряду. Размер изображения также составляет 44 px. Но он оставляет некоторое пространство во второй строке (ниже изображения кнопки дома), с которой я столкнулся. Но теперь я уменьшил высоту с 44 до 35. Теперь он работает хорошо. Как это происходит, чувак? Это пространство для текста или любая другая проблема? –

Есть ли способ избежать пробела, внизу на изображении? –

Это место для текста. Например. если вы установите «font-size» на «line-height» на 0, оно также исчезнет. –

Как Юкка уже м указано, что невозможно установить ссылку на фоновое изображение, применяемое через CSS.

Вместо этого вы должны использовать тег <a>. Трюк заключается в том, чтобы заставить высоту ссылки на высоту изображения.

Пример:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Image link</title> 
    <style type="text/css"> 
     td { 
     padding: 0; 
     } 
     a { 
     display: block; 
     height: 89px; 
     } 
    </style> 
    </head> 
    <body> 
    <table> 
     <tr> 
     <td style="background-color: blue;"><a href="#asdf"><img src="http://getfirebug.com/img/firebug-logo.png" style="background-color: yellow;"/></a></td> 
     </tr> 
    </table> 
    </body> 
</html>

Хотя я также хочу отметить, что вы должны никогда использовать таблицы для Оформление печатных изданий. Есть several good reasons, чтобы не использовать раскладки таблиц. Вместо этого вы можете использовать, например. <div> s, <header> s и <section> s.

источник

2012-05-02 09:51:19

Я понимаю чувак. Но как я могу ввести текст «домой» на этом изображении? У вас есть идея? plz help me –

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

Спасибо, что потратили мне свое драгоценное время. –

Как связать ячейку таблицы?

ответ

Смежные вопросы