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



 

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

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

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> почему не фиксируются ширина ячейки таблицы (ширна указана в пикс.) при её растяжении
Karapuz_hb
Karapuz_hb
Topic Starter сообщение 19.1.2008, 1:32; Ответить: Karapuz_hb
Сообщение #1


нарисовал дизайн сайта в фотошопе, порезал на слайсы , сохранил в Html
ширины ячеек всех указываются, пустые ячейки - прозрачными гифами заполнены.
если общая (главная таблица) фиксированной ширины в пикселах (а её так поставил фотошоп) - сайт отобржается нормально, если вручную поставить ширину таблицы главной - 100% - то ячейки внутри её тоже разъезжаются по ширине, хотя там явно указаны их ширна в пикселах (естественно я внутрь ячеек содержания никакого не вставлял).
хочу спросить, почему они раздвигаются , если явно указана их ширина в пикселах ? и как сделать чтобы они не раздвигались? а то у меня рисунок разъезжается.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Karapuz_hb
Karapuz_hb
Topic Starter сообщение 19.1.2008, 4:37; Ответить: Karapuz_hb
Сообщение #2


То есть например если у меня стоит фиксированая ширина основной таблицы в пикселях, то ячейки не разъёзжаются - Вот

А если указать ширину основной таблицы как 100%, то ячейки начинают разъезжаться, хотя ведь я им задал ширину. Места разъезда я обвёл. Вот хотелось бы, чтобы в месте где я обвёл сделать как нибудь ,чтоб не разъезжалось (( - Вот
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 19.1.2008, 18:56; Ответить: Exterior
Сообщение #3


Karapuz, постарайтесь более точно разметить и объеденить Slices чтобы spacer.gif`ов не было, и не придется ничего подправлять.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Karapuz_hb
Karapuz_hb
Topic Starter сообщение 20.1.2008, 4:04; Ответить: Karapuz_hb
Сообщение #4


хм, а не подскажете почему так происходит ? как эти спейсерв влияют на процесс растягивания родительской таблицы. и можно ли с помощью цсс зафикмировать эти ячейки ? или даже цсс не поможет ?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
chatlanin
chatlanin
сообщение 5.2.2008, 3:46; Ответить: chatlanin
Сообщение #5


У меня кстати похожая проблема. В начале я разбивал изображение в Corel Photopaint и указывал ячейки с не фиксированной шириной/длинной. Из этого ничего не вышло.
Тогда я сделал свой макет таблицы но он корректно работал только в FireFox в IE 6.0 не соблюдались размеры некторых фиксированных ячеек. Много чего пробовал, но так и не сумел сделать как надо :xz:

вот ссылка на вариант который работает в FireFox. Очень прошу помочь сделать что бы он работал и в IE. Я просто не в силах понять в чём проблема. Уже и пробовал 1px gif вставлять, использовать параметр "fixed" (возможно неправильно).
http://l2chaos.times.lv/main.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<table style="position: absolute; top: 0px;" border="0" cellspacing="0" cellpadding="0" align="center" valign="top">
<tr>
<td align="left" valign="top" width="211">
<table border="0" cellspacing="0" cellpadding="0" align="center" width=100%>
<tr>
<td colspan="2" height="51" width="114" align="left" valign="top"><img border="0" width="114" height="51" src="images/layout_2R1C2_d.JPG" alt=""></td>
<td height="51" background="images/layout_2R1C4.JPG"></td>
<td width="31" height="51" align="left" valign="top"><img border="0" width="31" height="51" src="images/layout_2R1C5.JPG" alt=""></td>
</tr>
<tr>
<td align="left" valign="top" width="33" height="158"><img border="0" width="33" height="158" src="images/layout_2R2C2.JPG" alt=""></td>
<td align="left" valign="top" bgcolor="#F0f0f0" style="background-repeat:repeat-x" colspan="2" rowspan="2" background="images/layout_2R2C3.JPG"><p align="center">text text text text text text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text
<p align="center">
<p align="center">text text text text text text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text</td>
<td width="31" height="158" align="left" valign="top"><img border="0" width="31" height="158" src="images/layout_2R2C5.JPG" alt=""></td>
</tr>
<tr>
<td align="left" valign="top" background="images/layout_2R3C2.JPG" width="33"></td>
<td align="left" valign="top" background="images/layout_2R3C5.JPG" width="31"></td>
</tr>
<tr>
<td width="33" height="31"><img border="0" width="33" height="31" src="images/layout_2R4C2.JPG" alt=""></td>
<td colspan="2" background="images/layout_2R4C3.JPG" height="31"></td>
<td width="31" height="31"><img border="0" width="31" height="31" src="images/layout_2R4C5.JPG" alt=""></td>
</tr>
</table>
</td>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="center" width=100%>
<tr>
<td colspan="2" height="51" width="114" align="left" valign="top"><img border="0" width="114" height="51" src="images/layout_2R1C2_d.JPG" alt=""></td>
<td height="51" background="images/layout_2R1C4.JPG"></td>
<td width="31" height="51" align="left" valign="top"><img border="0" width="31" height="51" src="images/layout_2R1C5.JPG" alt=""></td>
</tr>
<tr>
<td align="left" valign="top" width="33" height="158"><img border="0" width="33" height="158" src="images/layout_2R2C2.JPG" alt=""></td>
<td align="left" valign="top" bgcolor="#F0f0f0" style="background-repeat:repeat-x" colspan="2" rowspan="2" background="images/layout_2R2C3.JPG"><p align="center"> text text text text text text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text</p>
<p align="center">text text text text text text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text</p>
<p align="center">text text text text text text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text</p>
<p align="center">text text text text text text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text</p>
<p align="center">text text text text text text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text</p>
<p align="center">text text text text text text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text</p>
<p align="center">text text text text text text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text</p>
<p align="center">text text text text text text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text</p>
<p align="center">text text text text text text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text</p></td>
<td width="31" height="158" align="left" valign="top"><img border="0" width="31" height="158" src="images/layout_2R2C5.JPG" alt=""></td>
</tr>
<tr>
<td align="left" valign="top" background="images/layout_2R3C2.JPG" width="33"></td>
<td align="left" valign="top" background="images/layout_2R3C5.JPG" width="31"></td>
</tr>
<tr>
<td width="33" height="31"><img border="0" width="33" height="31" src="images/layout_2R4C2.JPG" alt=""></td>
<td colspan="2" background="images/layout_2R4C3.JPG" height="31"></td>
<td width="31" height="31"><img border="0" width="31" height="31" src="images/layout_2R4C5.JPG" alt=""></td>
</tr>
</table>
</td>
<td align="left" valign="top" width="210">
<table border="0" cellspacing="0" cellpadding="0" align="center" width=100%>
<tr>
<td colspan="2" height="51" width="114" align="left" valign="top"><img border="0" width="114" height="51" src="images/layout_2R1C2_d.JPG" alt=""></td>
<td height="51" background="images/layout_2R1C4.JPG"></td>
<td width="31" height="51" align="left" valign="top"><img border="0" width="31" height="51" src="images/layout_2R1C5.JPG" alt=""></td>
</tr>
<tr>
<td align="left" valign="top" width="33" height="158"><img border="0" width="33" height="158" src="images/layout_2R2C2.JPG" alt=""></td>
<td align="left" valign="top" bgcolor="#F0f0f0" style="background-repeat:repeat-x" colspan="2" rowspan="2" background="images/layout_2R2C3.JPG"><p align="center">text text text text text text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text
<p align="center">text text text text text text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text </td>
<td width="31" height="158" align="left" valign="top"><img border="0" width="31" height="158" src="images/layout_2R2C5.JPG" alt=""></td>
</tr>
<tr>
<td align="left" valign="top" background="images/layout_2R3C2.JPG" width="33"></td>
<td align="left" valign="top" background="images/layout_2R3C5.JPG" width="31"></td>
</tr>
<tr>
<td width="33" height="31"><img border="0" width="33" height="31" src="images/layout_2R4C2.JPG" alt=""></td>
<td colspan="2" background="images/layout_2R4C3.JPG" height="31"></td>
<td width="31" height="31"><img border="0" width="31" height="31" src="images/layout_2R4C5.JPG" alt=""></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="54" background="images/layout_2R5C1.JPG" colspan="3"></td>
</tr>
</table>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
chatlanin
chatlanin
сообщение 5.2.2008, 4:24; Ответить: chatlanin
Сообщение #6


а вот желаемая схема одной из таблиц где размещается текст
[IMG]http://l2chaos.times.lv/scheme.gif[/IMG]

стрелками обозначено какие ячейки должны расширятся при расширении смой таблицы.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 5.2.2008, 12:08; Ответить: Webmaster_hb
Сообщение #7


chatlanin, ваша картинка ооочень медленно грузится
да и не понятно на ней где какие размеры

нанесите на макет размеры где фиксированные а гдедолжны растягиваться
т.е. укажите как на чертеже размеры в пикселях (px) так и в процентах где растягивается (%)
укажите на макете где должны быть фиксированные изображение а где должны быть на фоне
+ приложите сразу к сообщению и макет и файл исходников с картинками
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
chatlanin
chatlanin
сообщение 5.2.2008, 15:21; Ответить: chatlanin
Сообщение #8


На этой схеме я указал размеры. Те размеры, которые помечены % должны изменятся в зависимости размера самой таблицы. Там нельзя указать какие то определенные соотношения, так как эти ячейки должны занимать всё оставшиеся пространство таблицы. Картинки на схеме соответствуют размерам ячейки, где они распологаются.
[attachment=35026:scheme2.gif]


Вот пример работающий в FireFox, картинки подгружаются с другого хоста. В тех ячейках, где должна менятся высота или ширина, я просто не указывал эти параметры.
<html>
<body>
<table style="position: absolute; top: 0px;" border="0" cellspacing="0" cellpadding="0" align="center" valign="top">
<tr>
<td align="left" valign="top" width="211">
<table border="0" cellspacing="0" cellpadding="0" align="center" width=100%>
<tr>
<td colspan="2" height="51" width="114" align="left" valign="top"><img border="0" width="114" height="51" src="http://chaos.my1.ru/temp/images/layout_2R1C2_d.jpg" alt=""></td>
<td height="51" background="http://chaos.my1.ru/temp/images/layout_2R1C4.JPG"></td>
<td width="31" height="51" align="left" valign="top"><img border="0" width="31" height="51" src="http://chaos.my1.ru/temp/images/layout_2R1C5.JPG" alt=""></td>
</tr>
<tr>
<td align="left" valign="top" width="33" height="158"><img border="0" width="33" height="158" src="http://chaos.my1.ru/temp/images/layout_2R2C2.JPG" alt=""></td>
<td align="left" valign="top" bgcolor="#F0f0f0" style="background-repeat:repeat-x" colspan="2" rowspan="2" background="http://chaos.my1.ru/temp/images/layout_2R2C3.JPG"><p align="center">text text text text text text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text
<p align="center">
<p align="center">text text text text text text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text</td>
<td width="31" height="158" align="left" valign="top"><img border="0" width="31" height="158" src="http://chaos.my1.ru/temp/images/layout_2R2C5.JPG" alt=""></td>
</tr>
<tr>
<td align="left" valign="top" background="http://chaos.my1.ru/temp/images/layout_2R3C2.JPG" width="33"></td>
<td align="left" valign="top" background="http://chaos.my1.ru/temp/images/layout_2R3C5.JPG" width="31"></td>
</tr>
<tr>
<td width="33" height="31"><img border="0" width="33" height="31" src="http://chaos.my1.ru/temp/images/layout_2R4C2.JPG" alt=""></td>
<td colspan="2" background="http://chaos.my1.ru/temp/images/layout_2R4C3.JPG" height="31"></td>
<td width="31" height="31"><img border="0" width="31" height="31" src="http://chaos.my1.ru/temp/images/layout_2R4C5.JPG" alt=""></td>
</tr>
</table>
</td>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="center" width=100%>
<tr>
<td colspan="2" height="51" width="114" align="left" valign="top"><img border="0" width="114" height="51" src="http://chaos.my1.ru/temp/images/layout_2R1C2_d.jpg" alt=""></td>
<td height="51" background="http://chaos.my1.ru/temp/images/layout_2R1C4.JPG"></td>
<td width="31" height="51" align="left" valign="top"><img border="0" width="31" height="51" src="http://chaos.my1.ru/temp/images/layout_2R1C5.JPG" alt=""></td>
</tr>
<tr>
<td align="left" valign="top" width="33" height="158"><img border="0" width="33" height="158" src="http://chaos.my1.ru/temp/images/layout_2R2C2.JPG" alt=""></td>
<td align="left" valign="top" bgcolor="#F0f0f0" style="background-repeat:repeat-x" colspan="2" rowspan="2" background="http://chaos.my1.ru/temp/images/layout_2R2C3.JPG"><p align="center"> text text text text text text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text</p>
<p align="center">text text text text text text text text text texttext text text text texttext ext text text text</p>
<p align="center">text text text text text text text text text texttext text text t texttext text text text text</p>
<p align="center">text text text text text text text text t texttext text text text text</p>
<p align="center">text text text text text text text text </p>
<p align="center"> text texttext text text text texttext text text text text</p>
<p align="center"> texttext text text text text</p>
<p align="center"> text</p>
<p align="center"> text</p>
<p align="center"> text</p>
<p align="center"> text</p>
<p align="center"> text</p>
<p align="center"> text</p>
<p align="center"> text</p>
<p align="center">text text text text text text text text texttext text text text text</p>
<p align="center">t texttext text text text text</p></td>
<td width="31" height="158" align="left" valign="top"><img border="0" width="31" height="158" src="http://chaos.my1.ru/temp/images/layout_2R2C5.JPG" alt=""></td>
</tr>
<tr>
<td align="left" valign="top" background="http://chaos.my1.ru/temp/images/layout_2R3C2.JPG" width="33"></td>
<td align="left" valign="top" background="http://chaos.my1.ru/temp/images/layout_2R3C5.JPG" width="31"></td>
</tr>
<tr>
<td width="33" height="31"><img border="0" width="33" height="31" src="http://chaos.my1.ru/temp/images/layout_2R4C2.JPG" alt=""></td>
<td colspan="2" background="http://chaos.my1.ru/temp/images/layout_2R4C3.JPG" height="31"></td>
<td width="31" height="31"><img border="0" width="31" height="31" src="http://chaos.my1.ru/temp/images/layout_2R4C5.JPG" alt=""></td>
</tr>
</table>
</td>
<td align="left" valign="top" width="210">
<table border="0" cellspacing="0" cellpadding="0" align="center" width=100%>
<tr>
<td colspan="2" height="51" width="114" align="left" valign="top"><img border="0" width="114" height="51" src="http://chaos.my1.ru/temp/images/layout_2R1C2_d.jpg" alt=""></td>
<td height="51" background="http://chaos.my1.ru/temp/images/layout_2R1C4.JPG"></td>
<td width="31" height="51" align="left" valign="top"><img border="0" width="31" height="51" src="http://chaos.my1.ru/temp/images/layout_2R1C5.JPG" alt=""></td>
</tr>
<tr>
<td align="left" valign="top" width="33" height="158"><img border="0" width="33" height="158" src="http://chaos.my1.ru/temp/images/layout_2R2C2.JPG" alt=""></td>
<td align="left" valign="top" bgcolor="#F0f0f0" style="background-repeat:repeat-x" colspan="2" rowspan="2" background="http://chaos.my1.ru/temp/images/layout_2R2C3.JPG"><p align="center">text text text text text text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text
<p align="center">text text text text text text text text texttext text text text text </td>
<td width="31" height="158" align="left" valign="top"><img border="0" width="31" height="158" src="http://chaos.my1.ru/temp/images/layout_2R2C5.JPG" alt=""></td>
</tr>
<tr>
<td align="left" valign="top" background="http://chaos.my1.ru/temp/images/layout_2R3C2.JPG" width="33"></td>
<td align="left" valign="top" background="http://chaos.my1.ru/temp/images/layout_2R3C5.JPG" width="31"></td>
</tr>
<tr>
<td width="33" height="31"><img border="0" width="33" height="31" src="http://chaos.my1.ru/temp/images/layout_2R4C2.JPG" alt=""></td>
<td colspan="2" background="http://chaos.my1.ru/temp/images/layout_2R4C3.JPG" height="31"></td>
<td width="31" height="31"><img border="0" width="31" height="31" src="http://chaos.my1.ru/temp/images/layout_2R4C5.JPG" alt=""></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="54" background="http://chaos.my1.ru/temp/images/layout_2R5C1.JPG" colspan="3"></td>
</tr>
</table>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 5.2.2008, 16:38; Ответить: Webmaster_hb
Сообщение #9


chatlanin,
вот такой примерчик
в нем задана граница таблиц только для восприятия, при использовании ее нужно задать равной нулю
<html>
<body style="margin:0; padding:0">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="1" bordercolor="#FF0000">
<tr>
<td colspan="3" height="51">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="1" bordercolor="#FF0000">
<tr>
<td width="114" nowrap>1</td>
<td width="100%">2</td>
<td width="31" nowrap>3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="158" width="33" nowrap>5</td>
<td width="100%" rowspan="2">6 7 10 11</td>
<td width="31" nowrap>8</td>
</tr>
<tr>
<td>9</td>
<td>12</td>
</tr>
<tr>
<td height="31">13</td>
<td>14 15</td>
<td>16</td>
</tr>
</table>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
chatlanin
chatlanin
сообщение 5.2.2008, 18:32; Ответить: chatlanin
Сообщение #10


интересное решение. большое спасибо, применю его на практике.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

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


 



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