Требуется помощь по HTML

[salo2007]

Всем привт вопрос вот такой... Вчера вечером сел писать шаблон для форума DLE... проблема нарисовалася прямо сразу.... сразу говорю.... я в HTML и CSS делетант... тока учу)

Собственно вот код таблицы.... все ее ячейки с рисунками... между рисунками по вертикали пробелов нет а между рисунками в первой и второй строке есть пробел.... скока я ни мучался.. ниче не помогает.... половину мануалов инета перерыл.. все бесполезно.... мож кто знает как это подправить? Извращался как тока мог.. не помогает....

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100px" height="30px" class="topic_verx_left"/></td>
    <td widtn="99%" div class="topic_verx_seredina" /></td>
    <td width="100px" height="30px" class="topic_verx_right" /></td>
  </tr>
  <tr>
        <td colspan="3" width="100px" height="30px" class="topic_verx"/>
  </tr>
     </table>

Вот собственно CSS

.topic_verx_left{
background-image: url('{THEME}/forum/images/left_bl.gif');
background-repeat: no-repeat;
position: relative;
top: 10px;
width: 100px;
height: 30px;
}

.topic_verx_seredina{
background-image: url('{THEME}/forum/images/fon_verx.gif');
background-repeat: repeat-x;
}

.topic_verx_right{
background-image: url('{THEME}/forum/images/right_bl.gif');
background-repeat: no-repeat;
position: relative;
top: 10px;
width: 100px;
height: 30px;
}

.topic_verx{
background-image: url('{THEME}/forum/images/fon_pod_verx.gif');
background-repeat: repeat-x;
}

И вообще... кто нить напишите по подробнее обо всем этом.. имею ввиду как совместить рисунки без пробелов...

 

[Dark Wizard]

Ну, во-первых последний <td> не закрыт,

во вторых лучше писать не widtn="99%" а width="*", потому что у тебя таблица на весь экран растянута, а боковые колонки фиксированного размера

Попробуй так

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100px" height="30px" class="topic_verx_left"></td>
<td widtn="*" class="topic_verx_seredina"></td>
<td width="100px" height="30px" class="topic_verx_right"></td>
</tr>
<tr>
<td colspan="3" height="30px" class="topic_verx"></td>
</tr>
</table>

 

[salo2007]

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

 

[mail4var]

Неправильный html

Уважаемый, будь внимательным при написании html.

Он у тя неправильно написан

смотри красные пометки,

1. зачем ты закрываешь тег td
<td width="100px" height="30px" class="topic_verx_right" /></td>

2. откуда в теге td взялся div
<td widtn="99%" div class="topic_verx_seredina" /></td>

3. подправь это все и выложи с картинками которые в ксс или дай урл в инете чтоб мона было сразу посмотреть

А вообще юзай мозилу с плагином firebug - для того чтобы инспектить эелементы, поищи в инете какие нить видео уроки по нему
и web developer - чтоб мона было просто и быстро провалидировать твой html, css на наличие ошибок

 

[salo2007]

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

 

[rex1963]

<Td valign=top> - выравнивание по верхнему краю, или в стилях margin:0px padding: 0px

 

[mail4var]

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

Сделай скриншот чтоб мы точно могли увидеть в чем проблема... В каком броузере ты смотришь, пробывал ли другие?
Тогда будет проще те ответит.. А так пальцем в небо ....

 

[mentanos]

Пробуй так (td{border: 1px solid red;} добавил специально, чтобы было видно ячейки таблицы)

.topic_verx_left{
background-image: url('{THEME}/forum/images/left_bl.gif');
background-repeat: no-repeat;
width: 100px;
height: 30px;
}

.topic_verx_seredina{
background-image: url('{THEME}/forum/images/fon_verx.gif');
background-repeat: repeat-x;
}

.topic_verx_right{
background-image: url('{THEME}/forum/images/right_bl.gif');
background-repeat: no-repeat;
width: 100px;
height: 30px;
}

.topic_verx{
background-image: url('{THEME}/forum/images/fon_pod_verx.gif');
background-repeat: repeat-x;
}
td{
border: 1px solid red;
}

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100" height="30" class="topic_verx_left">&nbsp;</td>
    <td class="topic_verx_seredina">&nbsp;</td>
    <td width="100" height="30" class="topic_verx_right">&nbsp;</td>
  </tr>
  <tr>
        <td colspan="3" width="100" height="30" class="topic_verx">&nbsp;</td>
  </tr>
     </table>

И вообще... кто нить напишите по подробнее обо всем этом.. имею ввиду как совместить рисунки без пробелов...

Склейка порезанной картинки таблицей без просветов выполняется просто:
1. у таблицы должны быть cellpadding=0 и cellspacing=0
2. если ложишь картинку внутрь <td></td>, у ячейки должно быть css padding=0 (по умолчанию 0) и внутри ячейки не должно быть ничего кроме картинки, т.е. <td...><img...></td>
3. обязательно указывай width и height для td и img там, где это возможно (т.е. для нерезиновых ячеек).

 

[ksido]

во вторых лучше писать не widtn="99%" а width="*", потому что у тебя таблица на весь экран растянута, а боковые колонки фиксированного размера

значение width="*" используется во фреймах, а не в таблицах. Некоторые браузеры, увидев такую запись в таблице просто ее проигнарируют, но некоторые (особо датошные) могут и всякую бяку вывести!

mentanos все верно в таблице исправил:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100" height="30" class="topic_verx_left">&nbsp;</td>
<td class="topic_verx_seredina">&nbsp;</td>
<td width="100" height="30" class="topic_verx_right">&nbsp;</td>
</tr>
<tr>
<td colspan="3" width="100" height="30" class="topic_verx">&nbsp;</td>
</tr>
</table>​

Еще одна ошибка автора темы, которую еще не подметили, была в том, что он писал width="100px", хотя по синтаксису HTML должно быть width="100" а в CSS width: 100px; Видимо просто перепутал!

И, на сколько я могу судить, после исправлений mentanos все должно правильно работать!!!