Перейти к содержимому

Сервис обмена электронных валют

Выбрать шаблон и создать сайт

Зазор между картинками при табличной верстке

#1 lesli007

lesli007
  • Пользователь
  • 108 сообщений
  • Репутация: -4
0

Отправлено 30 Сентябрь 2010 - 15:30

Проблема в следующем: верстаю талицами. Поставил 3 однострочных таблички с вытяжкой на 100%. Но между этими табличками - зазоры, при этом cellpadding и cellspacing поставлены на 0. Выкладываю код, css и картинку результата. Результат - во всех браузерах.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>


<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="headerl"><img src="img/headerl.jpg" alt="МУ СОШ №30 с углублённым изучением английского языка" width="638" height="84" ></td>
<td class="headerc"> </td>
<td class="headerr"><img src="img/headerr.jpg" alt="глобус" width="112" height="84"></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="table2">
<tr>
<td class="startfoto1"><img src="img/lstartfoto.jpg" alt="фото школы 30" width="638" height="15"></td>
<td class="startfoto2"> </td>
<td class="startfoto3"><img src="img/rstartfoto.jpg" alt="фото школы 30" width="112" height="15"></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="table3">
<tr>
<td class="foto"><img src="img/foto.jpg" alt="фото школы 30" width="576" height="141"></td>
<td class="foto_line"> </td>
</tr>
</table>
<p> </p>
</body>
</html>


/* CSS Document */
html, body {
	margin:0px;
	padding:0px;	
}


.table1 {  text-align:center; height:84px; }
.headerl { width:638px;text-align:left; }
.headerc { width:100%;background-color:#042474; }
.headerr { width:112px;text-align: right;  }

.table2 {  text-align:center; height:15px;  }
.startfoto1 { width:638px; text-align: left;  }
.startfoto2 { width:100%; background-image:url(img/midstartfoto.jpg); background-repeat:repeat-x;}
.startfoto3 { width:112px;text-align: left; vertical-align:top;}

.table3 {  text-align:center; height:141px;  }
.foto {width:576px; text-align:left;  }
.foto_line { width:100%; background-color:#ffffff;  }

Картинка без vertical-align:top в css
Изображение

Картинка с vertical-align:top в css
Изображение

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Табличная и блочная вёрстка.
  2. Что такое блочная и табличная верстка?
  3. Табличная vs Блочная вёрстки
  4. Убрать отступы между строками таблицы
  5. Как сделать промежутки между банерами и сбоку и с верху и снизу

#2 Symphony

Symphony
  • Пользователь
  • 636 сообщений
  • Репутация: 54

Отправлено 30 Сентябрь 2010 - 16:58

а дивной версткой не хочеш?
  • 0


#3 lesli007

lesli007
    Topic Starter
  • Пользователь
  • 108 сообщений
  • Репутация: -4

Отправлено 30 Сентябрь 2010 - 17:28

не. любитель таблиц. да и ошибка то где то под носом. но вот не ловится никак!
  • 0

#4 bestolloch

bestolloch
  • Пользователь
  • 224 сообщений
  • Репутация: 1

Отправлено 30 Сентябрь 2010 - 18:23

<style type="text/css">
.table-up {
background:#333;
height:84px;
width:100%;
}

.table-up-left {
background:url(#);
width:638px;
}

.table-up-center {
width:auto;
}

.table-up-right {
background:url(#);
width:112px;
}

.table-center {
background:#743;
height:15px;
width:100%;
}

.table-center-left {
background:url(#);
width:638px;
}

.table-center-center {
width:auto;
}

.table-center-right {
background:url(#);
width:112px;
}

.table-futer {
background:#303;
height:141px;
width:100%;
}

.table-futer-left {
background:url(#);
width:576px;
}

.table-futer-right {
width:auto;
}
</style>
</head>

<body>
<table class="table-up" cellspacing="0">
<tr>
<td class="table-up-left">
</td>
<td class="table-up-center">
</td>
<td class="table-up-right">
</td>
</tr>
</table>

<table class="table-center" cellspacing="0">
<tr>
<td class="table-center-left">
</td>
<td class="table-center-center">
</td>
<td class="table-center-right">
</td>
</tr>
</table>

<table class="table-futer" cellspacing="0">
<tr>
<td class="table-futer-left">
</td>
<td class="table-futer-right">
</td>
</tr>
</table>

поменяйте просто где указан background:url(#); свой путь - и все нормльно будет. Изменять гораздо удобней. А то у вас она еще не растягивалась нормально.
  • 0

#5 Bender

Bender
  • Пользователь
  • 712 сообщений
  • Репутация: 0

Отправлено 30 Сентябрь 2010 - 18:28

Попробуйте во все table и td добавить точный height и valign="top"
  • 0

#6 lesli007

lesli007
    Topic Starter
  • Пользователь
  • 108 сообщений
  • Репутация: -4

Отправлено 30 Сентябрь 2010 - 20:46

Итак пишу отчет на будущее у кого будет похожая проблема.
Во первых спасибо, bestolloch! Чисто ваш код я не взял (я работаю отдельно с html и css а у вас все вместе), однако увидел разницу между вашим и моим кодом, а именно:
1. Картинки должны быть в background, а не вставкой img
2. При использовании растяжки на расширение экрана: при наличии 3 и более разносортных ячеек по ширине (в px и %) у заливочных ячеек надо использовать параметр width:auto а не width: 100%

Во вторых, скажите пожалуйста, почему вставка изображений давала зазоры межд таблицами? а бэкграунд не дает такого эффекта?
  • 0

#7 bestolloch

bestolloch
  • Пользователь
  • 224 сообщений
  • Репутация: 1

Отправлено 30 Сентябрь 2010 - 21:08

td, th {
padding: 0;
} - это пропишите, сам только что нашел http://www.drupal.ru/taxonomy/term/942, тк я блочной версткой занимаюсь, решил заодно разобраться сам.

и потом почему бы вам 2 первые таблици не сооеденить в одну, я вообще наверно все бы объяденил.

пс. естественно у меня тоже в разных файлах код и стили, но для такого короткого кода стало лень создавать отдельно


И вы еще не дооцениваете непосредственно каскадные таблицы стилий - тк они удобней для редактирования и не столько места занимают.)


  • 0

#8 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 01 Октябрь 2010 - 21:22

lesli007,

1. Картинки должны быть в background, а не вставкой img

Это не обязательно. Сколько не пытался получить пропуски, не получил. У вас, скорее всего, высота второй таблицы боле чем 15px. Почему, сказать точно не могу, но как-то встречался с подобной проблемой давным давно.

2. При использовании растяжки на расширение экрана: при наличии 3 и более разносортных ячеек по ширине (в px и %) у заливочных ячеек надо использовать параметр width:auto а не width: 100%

Если что, можно двум указать точные значения в px, а последняя ячейка будет сама растягиваться на возможный размер. Так что тут ни auto, ни 100% не нужно.

Во вторых, скажите пожалуйста, почему вставка изображений давала зазоры межд таблицами? а бэкграунд не дает такого эффекта?

Попробуйте посмотреть размер средней таблицы либо через дебаггер (в Mozilla - FireBug), либо можетре выставить у табличек бордюры и посмотреть в чем у вас пробелы, либо кустарным методом - printscreen и в Photoshop посмотреть размеры средней таблицы по высоте.
  • 0

#9 Гость_randomizr_*

Гость_randomizr_*
  • Гости

Отправлено 02 Октябрь 2010 - 13:42

ну, давай по очереди:

1 <table ... height=100 ...

В спецификации HTML нет такого свойства height. Оно, конечно, понимается такими нестандартными обозревателями, как Internet Explorer, но другие обозреватели скорее всего его не поймут. Ели очень хочеться задать высоту, то лучше это делать через стиль: <table ... style=height: 100 ...

2 ... background=IMG/2162_background.gif ...

Тоже что-то странное. Во-первых, фоновый рисунок, насколько я помню, задаётся у ячейки, а не у таблицы. А даже если у таблицы, то всё равно это не стандартный способ задать фоновый рисунок. Стандартный такой: style=background-image: urlIMG/2162_background.gif или такой: style=background-image: IMG/2162_background.gif. Какой из них конкретно -- не помню уже... Это можно объединить со стилем для высоты таблицы.

3 ... id=1>

Идентификатор должен быть идентификатором: начинаться с буквы, состоять из букв и цифр и т.п...

4 ... bordercolor=#666666> Так тоже нельзя. Только некоторые обозреватели понимают такой аттрибут. Наверное, это тоже можно как-то через стиль определить, хотя я не знаю, как.

Ну и напоследок: попробуй поместить картинку в тот же каталог, что и таблица и ссылку тоже исправить.
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru