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

HTML

<table width="100%" border="0"> <tr> <td width="4%" height="48">&nbsp;</td> <th width="900" background="plashki/plashka3.JPG" ><div align="center"></div></th> <td width="4%">&nbsp;</td> </tr> </table>

Цитата

Кстати, помогите уж начинающему еще - вставил картинку в бэкграунд таблицы, размеры таблицы в процентах, как сделать так, чтобы картинка растягивалась в размер таблицы при растяжении окна.

Используй CSS: repeat и attachment

Aliance в том то вся и проблема, она не будет растягиватся, а только копироватся. Кстати это уже вопросы по вёрстке, лучше в соответствующем разделе и спросить.

Спросим и там
кстати ошибку исправил по "тупому" -
использовал встроенную функцию дримвьюера
хотя хотел ручками:(

Цитата(Sardar @ 8.2.2005, 16:19)

Aliance в том то вся и проблема, она не будет растягиватся, а только копироватся. Кстати это уже вопросы по вёрстке, лучше в соответствующем разделе и спросить.

Я тут уже битый день бьюсь, чтобы растянуть свою фонову картинку этим репитом, а фон только размножается. Вот я и подумала, а репиат вообще доя этих целей подходит?????? В картинке нет повторяющихся элементов!
Думаю, что нет. Есть ли способы растянуть фон, не меняя размеры фона?

Фоновая картинка не растягивается... вот примерное так будет правильно. Текст просто пускать вторым слоем, сверху НОРМАЛЬНОЙ (не фоновой) картинки.

Код

<table style="width: 100%; table-layout: fixed;">     <tr>         <td style="height: 100px">             <img src="659715.jpg" style="width: 100%; height: 100%" /><br />             <div style="position: relative; left: 0px; top: -100px; z-index: 2; color: red;">1123123123123</div>         </td>     </tr> </table>

Часто приходится давать ссылку на этот пост, исправляю код, добавляю сюда table-layout: fixed. Комментарии см. ниже. (25.05.2005)



Это сообщение отредактировал(а) dm9 - 25.5.2005, 02:16

Звиняюсь, не понял вопроса. Канечно, эти св-ва служат не для растягивания, а для проецирования. А растянуться картинку в бекграунде, как уже сказал dm9 - нельзя.

В моём коде ИЕ глючит через раз. При рефреше он воспринимает 100% картинки не как растягивание по ячейке, а как 100% от размера картинки

F5 - ожидаемое поведение, F5 - глючное, F5 - опять ожидаемое...
Даже если очень постараться, написать так будет непросто ))))))))

Это только для больших картинок, они раздвигают ячейку.

Исследовав проблему, нашёл решение.
Вместо

Код

<table style="width: 100%;">

надо написать

Код

<table style="width: 100%; table-layout: fixed;">

Кто знает, что это такое, и расскажет тут - с меня пирожок, я рассказывать не хочу

Это сообщение отредактировал(а) dm9 - 12.5.2005, 00:16

Мануал
Это свойство управляет алгоритмами , используемым для размещения строк, ячеек и столбцов.
fixed
Используется алгоритм фиксированного положения таблицы
auto
Используется любой алгоритм автоматического размещения таблицы

Рассказывать алгоритм вычисленияширины столбцов?

Это сообщение отредактировал(а) Aliance - 12.5.2005, 00:21

Блин, лениво описывать

Цитата(Aliance @ 12.5.2005, 01:19)

Рассказывать алгоритм вычисленияширины столбцов?

Ни за что
Пирожка не получилось

В общем, тут не мануал нужен, тут суть понимать надо. Суть в том, что размер таблицы (если fixed) высчитывается не на основе текущих размеров вложенных элементов, а вычисляется самостоятельно, и вложенные элементы уже подгоняются под эту ячейку.

Примеры применения.

1. (Наш пример) Есть глюк (в ИЕ), высчитывание размера таблицы на основе внутренней картинки. Так пропишем ему этот fixed, и таблица насильственно будет подгоняться под размеры окна, а потом уже браузер будет разбираться с картинкой.

2. Рамка раскрывания кода на Винграде (если длинный код).

Код

Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код ДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрокаДлиннаяСтрока Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код Длинный код

Тут применение такое. Если в коде есть длинная строка, то после раскрытия кода ширина внутренних элементов для дива с рамкой становится большой, и некоторые браузеры обратно код уже не сворачивают, так как рассчитывают размер этого дива по принципу "100%", где 100% - это ширина РАСТЯНУТОГО окна! А нам нужна ширина свёрнутого. Чтобы всё каждый раз пересчитывалось, вписываем table-layout: fixed. Можете посмотреть на код этой странички, там такой стиль и правда есть
Добавлено @ 00:36
ПС. Раскрытие кода - это нажание на кнопочку в верхнем левом углу кода. Если что. А то не поймёт кто


Это сообщение отредактировал(а) dm9 - 12.5.2005, 00:34

Еще не теряя надежды сделать станицу динамической (в процентах), я задала размер ячейки 100%, вставила в нее картинку (размер 800 на 600) и задала картинке размер 100%, чтобы она вместе с ячейкой тянулась. А картинка взяла и вообще пропала
Вот код (так видна картинка):

Код

<table border="0" width="100%" cellspacing="0" cellpadding="0">   <tr>     <td width="1%" background="../Templates/Doma_gory/pozadina.gif"><img border="0" src="../Templates/Doma_gory/pozadina.gif" width="10" height="10"></td>     <td>       <table border="0" cellspacing="0" cellpadding="0">         <tr>           <td width="100%" style="width: 100%; table-layout: fixed; valign="top"bgcolor="#7C93B3">           <img src="../Graphic/Top_1_drugie_raboty.jpg" width="800" height="71"></td>         </tr>       </table>          <table...

А так нет:

Код

<table border="0" width="100%" cellspacing="0" cellpadding="0">   <tr>     <td width="1%" background="../Templates/Doma_gory/pozadina.gif"><img border="0" src="../Templates/Doma_gory/pozadina.gif" width="10" height="10"></td>     <td>       <table border="0" cellspacing="0" cellpadding="0">         <tr>           <td width="100%" style="width: 100%; table-layout: fixed; valign="top"bgcolor="#7C93B3">           <img src="../Graphic/Top_1_drugie_raboty.jpg" width="100%" height="71"></td>         </tr>       </table>          <table...

Картинка не может что ли тянуться за размерами ячейки?
ЗЫ Я вообще размеры страницы свела к 800 на 700

Номер раз.

Цитата(Urod @ 12.5.2005, 22:23)

valign="top"bgcolor="#7C93B3">

Тут очепятка.

Если не катит, давай сюда всю страничку. Иначе не умею.

Вот ссылка: http://www.webfile.ru/300184
У меня там еще ошибки есть (правая колонка длиннее нужного раза в два + в

Код

<div style="position: relative; top: -920px; z-index: 2;">

-920px; приводит к тому, что при большем разрешении экрана содержимое дива "плывет", т.е. отсчитывается от верха, который меняет свои параметры + меню куда-то влева сползает ).
Спасибо за помощь!
ЗЫ Такой метод работы с картинками, описанный тобой, в принципе покатит при изменении разрешения экрана? По-моему, да У меня прям снова надежда появилась ссделать сайт грамотно...

Это сообщение отредактировал(а) Urod - 12.5.2005, 22:46

Не, картинка не исчезает, а сдвигается вправо и сужается вся

Screen в студию

table-layout: fixed надо ставить не ячейке, а таблице.

Вот так работает:

Код

<table border="0" cellspacing="0" cellpadding="0" style="width: 100%; table-layout: fixed;">         <tr>           <td bgcolor="#7C93B3">           <img src="../Graphic/Top_1_drugie_raboty.jpg" width="100%" height="71"></td>         </tr>       </table>

Ну и непропорциональное растягивание как-то не очень. Особенно для человека на картинке.

Только там всё равно плохая вёрстка пока. Картинок понаставлено много, и они раздвигают таблицу. Минимальная ширина сейчас 825 пикселей где-то... неплохо бы было до 780 подогнать. Например, пустое место слева от "покраски фасадов" убрать.

Ну и вообще, нижняя часть сайта у тебя не резиновая, статика

Aliance
Добавлено @ 22:48
dm9 Ой, а я ссылку только что поменяла и комментарии к вопросам своим
Не бейте меня, посмотрите код, пож-та

Есть у меня там справа столбец с картинками. Так вот он при таком коде пропадает

Код

<table style="width: 95%;  table-layout: fixed;" border="0" cellpadding="0" cellspacing="0">               <tr>                 <td><div align="left"><img class="padded" src="../Graphic/drygie_raboty/pic_1.jpg" ></div></td>               </tr>               <tr>                 <td><div align="right"><img class="padded" src="../Graphic/drygie_raboty/pic_2.jpg" ></div></td>               </tr>               <tr>                 <td><div align="center"><img class="padded" src="../Graphic/drygie_raboty/pic_3.jpg" ></div></td>               </tr>             </table>

Что я опять сделал не так?

Цитата(dm9)

Ну и непропорциональное растягивание как-то не очень. Особенно для человека на картинке.

Поправила.

Цитата(dm9)

Только там всё равно плохая вёрстка пока. Картинок понаставлено много, и они раздвигают таблицу. Минимальная ширина сейчас 825 пикселей где-то... неплохо бы было до 780 подогнать. Например, пустое место слева от "покраски фасадов" убрать.

Дык как это сделаешь-то? Разве что ширину столбца уменьшить, но тогдауменьшиться и ширина всей страницы
А! Надо картинку (которая типа, как фон) уменьшить по ширине. Да?

Цитата(dm9)

Ну и вообще, нижняя часть сайта у тебя не резиновая, статика

Что-то я нигде пикселей не отставила (только %), а низ все равно не поджимается
Вот последняя редакция: http://www.webfile.ru/300251

Прошу прощения за суету в своих действиях и как следствие кучу ссылок

Цитата(Urod @ 13.5.2005, 00:26)

А! Надо картинку (которая типа, как фон) уменьшить по ширине. Да?

Ага.

Слушай, а тебе выложить сайт некуда так, чтобы он доступен был не в архиве? ну, зарегься на каком-нить бесплатном хостнге, типа www.nm.ru, www.hotbox.ru, www.russian.ru.

Уже не актуально, это просьба для следующего раза.

У тебя сейчас вообще что-то страшное

Я бы начал сначала и сделал для этого самого начала основу. Пусть пока мы осваиваем табличную вёрстку. Значит, сделай макет, основную таблицу с шириной 100%, ей пропиши нужные tr и td, определись, что в них будет. Пропиши что где будет прямо внутри таблицы. Затем - вложенные таблицы. И добавляй элементы по одному. И стиль держи, отступы в html-коде для внутренних элементов больше делай (я про исходник, табы ставь в начале строки, и чем глубже вложен элемент, тем больше отступ от начала строки), а то в твоём коде сейчас фиг разберёшься, пока не прогонишь через выравниватель.

По крайней мере, поймёшь, как это делается, прочувствуешь html. Это, конечно, если проект не "горит", если время позволяет этот сайт сделать с пользой для себя

Если этот вариант пойдёт, сделай этот макет, выложи его тут (в новой теме), я покажу ошибки, помогу подправить.

Добавлено @ 01:28
Вообще, чтобы ориентировалась, вёрстка твоего сайта - это нормальный рабочий день, со всеми доводками. Примерно так.

Это сообщение отредактировал(а) dm9 - 13.5.2005, 01:30

dm9 Не, сайт не горит, слава Богу Он для себя, вдруг получится
Да, кто-то должен остановить от постоянно наваливающегося желания делать дальше и дальшне и быстро. Надо все начать сначала. Угу.
Значит разметка страницы и т.д. методично.
Можно я после каждого этапа верстки буду тебе скидывать сраничку на проверку?
А что это за выравниватель такой? Он облегчает верстку?

Вёрстку облегчает не выравниватель, а грамотное оформление исходного кода

Выравниватель - это когда надо разобраться в чужом коде, причём быстро, причём не расставляя отсупы руками

Мне не надо скидывать, выкладывай страничку на всеобщее обозрение, причём не в архиве, а именно как страничку (выше написал примеры бесплатных хостингов).

Это сообщение отредактировал(а) dm9 - 13.5.2005, 15:52

Цитата(dm9 @ 13.5.2005, 11:34)

Мне не надо скидывать, выкладывай страничку на всеобщее обозрение, причём не в архиве, а именно как страничку (выше написал примеры бесплатных хостингов).

Пардон, именно это я и имела в виду, просто не точно написала.

dm9 Эээ, на nm.ru я уже давно существую, но вот, как дать доступ вам к содержимому ссылки (вы же не знаете моего пароля), я не пойму что-то...

Ну а пока вот разметка моей страницы (только тут вместо букв в коде фигня какая-то, но читабельная):

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <table width="100%"  border="0" cellspacing="0" cellpadding="0">   <tr>     <td colspan="2">Здесь титульная картинка-логотип (элемент 1) </td>   </tr>   <tr>     <td width="70%" bgcolor="#7C93B3">Здесь меню (элемент 2) </td>     <td width="30%" rowspan="3" bgcolor="#7C93B3"><table width="90%"  border="0" cellspacing="0" cellpadding="0">       <tr>         <td>Таблица для картинок (элемент 8) </td>       </tr>       <tr>         <td>&nbsp;</td>       </tr>       <tr>         <td>&nbsp;</td>       </tr>     </table>       Поле для таблицы для картинок (элемент 7) </td>   </tr>   <tr>     <td width="70%"><table width="100%"  border="0" cellspacing="0" cellpadding="0">       <tr>         <td>Контент (элемент 3) </td>       </tr>     </table>             <table width="90%"  border="0" cellspacing="0" cellpadding="0" align="center">         <tr>           <td width="60%">Вся таблица (элемент 4) </td>           <td width="20%">&nbsp;</td>           <td width="20%">&nbsp;</td>         </tr>         <tr>           <td>&nbsp;</td>           <td>&nbsp;</td>           <td>&nbsp;</td>         </tr>         <tr>           <td>&nbsp;</td>           <td>&nbsp;</td>           <td>&nbsp;</td>         </tr>         <tr>           <td>&nbsp;</td>           <td>&nbsp;</td>           <td>&nbsp;</td>         </tr>         <tr>           <td>&nbsp;</td>           <td>&nbsp;</td>           <td>&nbsp;</td>         </tr>         <tr>           <td>&nbsp;</td>           <td>&nbsp;</td>           <td>&nbsp;</td>         </tr>       </table>             <p>Здесь небольшой текстик-приписка (элемент 5) </p>       <p>&nbsp;</p></td>   </tr>   <tr>     <td>Здесь: Дизайн от... (элемент 6) </td>   </tr> </table> </body> </html>

Вопрос: элемент 3 имеет смысл выносить в отдельную ячейку или следует его просто вставить перед таблице (элемент 4)?
Какие будут замечания?

Это сообщение отредактировал(а) Urod - 13.5.2005, 19:59

Там есть загрузка файлов. Заливаешь страничку... с картинками. Она будет доступна так.
http://your_name.nm.ru/folder/subfolder/1.html
Ну или если в корень заливаешь:
http://your_name.nm.ru/qwe.html

Только nm недоступен бывает часто из-за перегрузки серверов. Кажется, russian.ru получше будет.
Ну, вот, например, страничка. http://mitya.email.su/index.html (это бесплатный хостинг, email.su - то же самое, что такое russian.ru).

Добавлено @ 20:02
Создай новую тему, там про разметку говорить будем. ОК?

Добавлено @ 20:03
А вопросы про хостинг можно задать в форуме "Хостинг" (соседний с этим).

Цитата(dm9 @ 13.5.2005, 20:01)

Создай новую тему, там про разметку говорить будем. ОК?

Да не вопрос! Я их тут уже кучи понаплодила

Ну как же тут создать: http://email.su/?m=badlogin домен третьего уровня?

[offtop]

Цитата(Urod @ 13.5.2005, 00:26)

Поправила.

Цитата(Urod @ 13.5.2005, 00:14)

сделал

одно из трех: либо я слепой, либо ты часто меняешь пол, либо у тебя раздвоение личности

[/offtop]

Ну зарегистрируйся на email.su. Там же есть регистрация. И давай перемещаться с этим вопросом в форум по хостингу.

Aliance Либо у меня опечаток полно!

Цитата(dm9 @ 11.5.2005, 23:50)

Фоновая картинка не растягивается... вот примерное так будет правильно. Текст просто пускать вторым слоем, сверху НОРМАЛЬНОЙ (не фоновой) картинки. Разметка HTML <table style="width: 100%; table-layout: fixed;">     <tr>         <td style="height: 100px">             <img src="659715.jpg" style="width: 100%; height: 100%" /><br />             <div style="position: relative; left: 0px; top: -100px; z-index: 2; color: red;">1123123123123</div>         </td>     </tr> </table> Часто приходится давать ссылку на этот пост, исправляю код, добавляю сюда table-layout: fixed. Комментарии см. ниже. (25.05.2005)

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

Код

<body background="1.jpg"  bgproperties="fixed">