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


Пользователь месяца
Ixman Ixman 1-й за Октябрь
Очков активности: 693 0 тем, 33 сообщения, 14 баллов репутации
Сайт: o5cat.ru
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 96 Вне конкурса за определение пользователя месяца

  • Фотография yuran
    #2

    yuran (yurbol.ru)
    Очков активности: 82.5 0 тем, 55 сообщений, 1 балл репутации

  • Фотография Ixman
    #3

    Ixman (o5cat.ru)
    Очков активности: 72 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #4

    BLIK
    Очков активности: 51 Вне конкурса за определение пользователя месяца

  • Фотография Mandarin
    #5

    Mandarin
    Очков активности: 42 0 тем, 28 сообщений, 1 балл репутации

  • Фотография WGN
    #6

    WGN (worldgamenews.com)
    Очков активности: 39 Вне конкурса за определение пользователя месяца

  • Фотография pozitron123
    #7

    pozitron123
    Очков активности: 31.5 2 темы, 15 сообщений, 1 балл репутации

  • Фотография алексс
    #8

    алексс
    Очков активности: 27 2 темы, 12 сообщений, 1 балл репутации

  • Фотография Scool
    #9

    Scool (stostory.ru)
    Очков активности: 19.5 3 темы, 4 сообщения, 1 балл репутации

  • Фотография RosenRot
    #10

    RosenRot (abuzov.com)
    Очков активности: 16.5 1 тема, 8 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 31.10.2018
  • Яндекс выдача: 15.11.2018
Топ 5 участников по репутации


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

#1 lesli007

lesli007
  • Неактивные
  • 108 сообщений
  • Репутация: -4
0

Отправлено 30 September 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

#2 Symphony

Symphony
  • Неактивные
  • 636 сообщений
  • Репутация: 54

Отправлено 30 September 2010 - 16:58

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


#3 lesli007

lesli007
    Topic Starter
  • Неактивные
  • 108 сообщений
  • Репутация: -4

Отправлено 30 September 2010 - 17:28

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

#4 bestolloch

bestolloch
  • Неактивные
  • 224 сообщений
  • Репутация: 1

Отправлено 30 September 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 September 2010 - 18:28

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

#6 lesli007

lesli007
    Topic Starter
  • Неактивные
  • 108 сообщений
  • Репутация: -4

Отправлено 30 September 2010 - 20:46

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

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

#7 bestolloch

bestolloch
  • Неактивные
  • 224 сообщений
  • Репутация: 1

Отправлено 30 September 2010 - 21:08

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

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

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


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


  • 0

#8 ZiTosS

ZiTosS
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

Отправлено 01 October 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 October 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
  • 2652 сообщений
  • Репутация: 85

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