X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Зазор между картинками при табличной верстке
lesli007
lesli007
Topic Starter сообщение 30.9.2010, 16:30; Ответить: lesli007
Сообщение #1


Проблема в следующем: верстаю талицами. Поставил 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
[img]http://ipicture.ru/uploads/100930/4rgVdx48iq.jpg[/img]

Картинка с vertical-align:top в css
[img]http://ipicture.ru/uploads/100930/32k4cUvRpm.jpg[/img]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Symphony
Symphony
сообщение 30.9.2010, 17:58; Ответить: Symphony
Сообщение #2


а дивной версткой не хочеш?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lesli007
lesli007
Topic Starter сообщение 30.9.2010, 18:28; Ответить: lesli007
Сообщение #3


не. любитель таблиц. да и ошибка то где то под носом. но вот не ловится никак!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bestolloch
bestolloch
сообщение 30.9.2010, 19:23; Ответить: bestolloch
Сообщение #4


<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(#); свой путь - и все нормльно будет. Изменять гораздо удобней. А то у вас она еще не растягивалась нормально.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Robot-sgibatel
Robot-sgibatel
сообщение 30.9.2010, 19:28; Ответить: Robot-sgibatel
Сообщение #5


Попробуйте во все table и td добавить точный height и valign="top"
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lesli007
lesli007
Topic Starter сообщение 30.9.2010, 21:46; Ответить: lesli007
Сообщение #6


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

Во вторых, скажите пожалуйста, почему вставка изображений давала зазоры межд таблицами? а бэкграунд не дает такого эффекта?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bestolloch
bestolloch
сообщение 30.9.2010, 22:08; Ответить: bestolloch
Сообщение #7


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

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

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


И вы еще не дооцениваете непосредственно каскадные таблицы стилий - тк они удобней для редактирования и не столько места занимают.)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 1.10.2010, 22:22; Ответить: ZiTosS
Сообщение #8


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

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

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

Попробуйте посмотреть размер средней таблицы либо через дебаггер (в Mozilla - FireBug), либо можетре выставить у табличек бордюры и посмотреть в чем у вас пробелы, либо кустарным методом - printscreen и в Photoshop посмотреть размеры средней таблицы по высоте.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Гость_0_* Гость_0_*
сообщение 2.10.2010, 14:42; Ответить: Гость_0_*
Сообщение #9


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

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> Так тоже нельзя. Только некоторые обозреватели понимают такой аттрибут. Наверное, это тоже можно как-то через стиль определить, хотя я не знаю, как.

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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на первый заказ.
Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на п
6 stu999 1551 21.3.2024, 20:45
автор: stu999
Открытая тема (нет новых ответов) Как вы сравниваете ТОП сайтов между собой?
5 noviktamw 5772 10.1.2024, 13:23
автор: wanessa
Открытая тема (нет новых ответов) Получил странную ссылку при линкбилдинге
Как поведет себя поиск при обнаружении странной ссылке?
10 r0mZet 2178 24.10.2022, 19:23
автор: Wachowski
Горячая тема (нет новых ответов) 300 площадок под вечные ссылки на выбор: ТИЦ 20-9400, PR 0-6, ЯК, DMOZ. Скидки при пакетном заказе!
65 inkon 30255 19.7.2022, 13:41
автор: Funoman
Горячая тема (нет новых ответов) тИЦ отменили! Новый показатель Яндекса ИКС! Лучшие площадки под размещение. Бесплатное написание статей при любом заказе.
Эксклюзивное предложение. Успей получить написание статей БЕСПЛАТНО
71 VIMstat 78307 21.6.2022, 9:38
автор: VIMstat


 



RSS Текстовая версия Сейчас: 28.3.2024, 12:44
Дизайн