Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Вставить кнопочки в столбец таблицы
 
 автор: Владимир55   (24.03.2007 в 00:24)   письмо автору
 
 

Есть таблица из двух столбцов, первый из которых имеет фиксированную ширину в 170 точек. И в этот столбец надо вставить одну под другой множество кнопок. Кнопки должны стоять вплотную друг к другу, так как при этом они образуют вертикальный рисунок. Сейчас у меня это сделано посредством традиционного кода типа

<p style="margin-top: 0; margin-bottom: 0"><a href="Missia.htm"><img border="0" src=Knopky/button1.gif" width="170" height="25"></a></p>


Но это очень емкий код, поэтому я решил выполнить ту же задачу иначе, и получилось вот что:


<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новая страница 1</title>
<style type="text/css">
#knopki
{
      margin: 0 0 0 0;
      text-indent: 0 px; 
      line-height: 1.0;
    text-align: center; 
    color: #ff0000;
    font-family: Franklin Gothic Medium Cond;
    font-size: 10pt
}
</style>
</head>
<body>
<table border="0" width="100%" id="table1" style="border-collapse: collapse">
    <tr>
        <td width="170">
<div id="knopki">
        <a href="Missia1.htm"><img border="0" src="Knopky/button1.gif" width="170" height="25"></a>
        <a href="Missia2.htm"><img border="0" src="Knopky/button1.gif" width="170" height="25"></a>
        <a href="Missia3.htm"><img border="0" src="Knopky/button1.gif" width="170" height="25"></a>
</div>            
        </td>
        <td>&nbsp;</td>
    </tr>
</table>
</body></html>


Не уверен в правильности начертания кода, но кнопки ввелись, однако между ними образовались зазоры, разрывающие рисунок.

Вероятно, корректнее было бы писать так:

<div id="knopki">
        <a href="Missia1.htm"><img border="0" src="Knopky/button1.gif" width="170" height="25"></a>
</div>

Но и в этом случае зазоры остаются такими же.

Можно ли как-то разместить эти кнопки вплотную друг к другу, как это получалось средствами html?

   
 
 автор: Lelik   (24.03.2007 в 01:42)   письмо автору
 
   для: Владимир55   (24.03.2007 в 00:24)
 


img {margin:0px;}

   
 
 автор: CNT   (24.03.2007 в 07:49)   письмо автору
 
   для: Владимир55   (24.03.2007 в 00:24)
 

Можно:
<td width="170"><div id="knopki"
><a href="Missia1.htm"><img border="0" src="Knopky/button1.gif" width="170" height="25"></a
><a href="Missia2.htm"><img border="0" src="Knopky/button1.gif" width="170" height="25"></a
><a href="Missia3.htm"><img border="0" src="Knopky/button1.gif" width="170" height="25"></a
></div></td>


PS. Подряд стоящие пробельные символы в коде (пробел, TAB и перевод строки) парсер преобразует в один неразрывный пробел &nbsp;

PS2. Запись в стилях: text-indent: 0 px; неграмотна. Любые единицы размерности необходимо писать слитно со значением, т.е. text-indent: 0px;

   
 
 автор: Владимир55   (24.03.2007 в 09:59)   письмо автору
 
   для: CNT   (24.03.2007 в 07:49)
 

Вот теперь получилось то, что надо! Большое Вам спасибо! За корректировку кода, а прежде всего - за разъяснение! Ведь очень важно понимать, что и как получается.

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

<td width="170">
<div id="knopki"
><a href="Missia1.htm"><img border="0" src="Knopky/button1.gif" width="170" height="25"></a
><a href="Missia2.htm"><img border="0" src="Knopky/button1.gif" width="170" height="25"></a
><a href="Missia3.htm"><img border="0" src="Knopky/button1.gif" width="170" height="25"></a
></div>

<div id="knopki">
Новый раздел
</div>

<div id="knopki"
><a href="Missia4.htm"><img border="0" src="Knopky/button1.gif" width="170" height="25"></a
><a href="Missia5.htm"><img border="0" src="Knopky/button1.gif" width="170" height="25"></a
></div>
</td>


Или можно вставить текст непосредственно в череду кнопок? Например, так:


<td width="170">
<div id="knopki"
><a href="Missia1.htm"><img border="0" src="Knopky/button1.gif" width="170" height="25"></a
><a href="Missia2.htm"><img border="0" src="Knopky/button1.gif" width="170" height="25"></a
><a href="Missia3.htm"><img border="0" src="Knopky/button1.gif" width="170" height="25"></a
>Новый раздел
><a href="Missia4.htm"><img border="0" src="Knopky/button1.gif" width="170" height="25"></a
><a href="Missia5.htm"><img border="0" src="Knopky/button1.gif" width="170" height="25"></a
></div>
</td>


В этом случае слово "Новый" изображается справа от отретьей кнопки, растягивая столбец, а слово "раздел" переносится на следующую строку, и справа от него появляется знак >. Почему бы это?

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования