Задаю разметку страницы сайта с помощью таблицы. Размеры ячеек прописыват процентами. Смотрю на страницу с помощью браузаров Мозилла и ИЕ при разрешении монитора 1280 на 1024. Меняю разрешение на 800 на 600 - и понимаю, что для просмотра страницы нужно крутить прокрутку. Т.е. в чем смысл-то процентов? Разве они не должны оптимизировать размер страницы под разрешение монитора?

Цитата(Urod @ 28.4.2005, 19:56)

Задаю разметку страницы сайта с помощью таблицы. Размеры ячеек прописыват процентами. Смотрю на страницу с помощью браузаров Мозилла и ИЕ при разрешении монитора 1280 на 1024. Меняю разрешение на 800 на 600 - и понимаю, что для просмотра страницы нужно крутить прокрутку. Т.е. в чем смысл-то процентов? Разве они не должны оптимизировать размер страницы под разрешение монитора?

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

PARROT
Да уж! Особенно когда я до этого все в пикселях указывала...
Т.е. надо, чтобы в коде не бело ни одного размера в пикселях (даже размеры картинок), а только в процентах. Да?

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

Я тоже до этого указывала все в пикселях, а теперь передумала так делать, непрофессионально говорят!
И стоит слушаться.
Картинки конечно в пикселях, подбирай, очень большими не делай и маленькими тоже.
И проверяй, проверяй как я проверяю, долго, нудно, а что делать?
Кто говорил, что будет легко?

Говорят, чем меньше сейчас картинок, тем лучше, типа мода такая.

Не знаю, мне кажется, ничего такого очень сложного нет

В общем, проценты в таблице - это рекоменуемые соотношения между шириной столбцов оной. Разумеется, если в процентах задаётся width. Высота - это своя история Сделано это для того, чтобы размеры содержимого автоматически подгонять по ширине под размеры браузера - таким образом, чтобы оставалась только прокрутка по вертикали. Тут важно понимать, что браузер, если ему ничего специально не указывать, имеет полное право раздвигать ячейки, если что-то в них не влазит. Даже если это идёт в разрез с указанными процентами. Например, можно попробовать уменьшать ширину этой страницы (страницы форума). В какой-то момент появится горизонтальная полоса прокрутки - значит, что-то перестало помещаться в отведённое место. Существует способ "закрепить" соотношения между шириной столбцов - это стиль таблицы "table-layout: fixed;". Использовать его я рекомендую только в особых случаях. В обычной вёрстке (99% случаев) этот стиль использовать не стоит.

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

dm9
Так, ну так все-таки как результат проверки правильности указания процентных размеров ячеек можно примеять разные разрешения экрана? При этом горизонтальная прокрутка не должна появляться? У меня стандартные настройки браузеров.

Цитата(Urod @ 29.4.2005, 08:23)

dm9 Так, ну так все-таки как результат проверки правильности указания процентных размеров ячеек можно примеять разные разрешения экрана? При этом горизонтальная прокрутка не должна появляться? У меня стандартные настройки браузеров.

1) Для начала нужно решить минимум для какого разрешения ты будешь делать свой сайт.
Мой минимум это 800Х600, у некоторых 1024 минимум и проверяй, проверяй, проверяй...
2) Прокрутка появляться не должна, при правильно указанных процентах в таблицах, при стандартных настройках браузера.

Вообще все до боли просто:
Основная таблица, в которой содержатся внутренние таблицы для контента сайта (все в процентах).
И не забудь по бокам сделать пустые ячейки(<td width=20>&nbsp;</td>), не то текст или картинка будут располагаться, слишком близко к прокрутке.

Цитата(PARROT @ 29.4.2005, 10:20)

И не забудь по бокам сделать пустые ячейки(<td width=20>&nbsp;</td>), не то текст или картинка будут располагаться, слишком близко к прокрутке.

Ну... это делается так:

Код

body { padding: 0px 20px 0px 20px; }

Что означает отсуп контента от краёв страницы на
0px - сверху,
20px - справа,
0px - снизу,
20px - слева.




Это сообщение отредактировал(а) dm9 - 29.4.2005, 10:19

Ну тут возможно не только от краев потребуется, может слева или справа быть меню или новости, или и то и другое, тут придется делать ячейки!

dm9

Код

body { padding: 0px 20px 0px 20px; }

О! я-я, мы это уже знать!

Это сообщение отредактировал(а) Urod - 29.4.2005, 18:13

Urod

Ещё бы научились пользоваться кодом CSS, а не HTML, когда чистый CSS используется, и вообще было бы замечательно

Код

/* Вот так делать не надо :) */ body {     padding: 0px 20px 0px 20px; }

Код

/* А так - хорошо :) */ body {     padding: 0px 20px 0px 20px;     }

Это сообщение отредактировал(а) dm9 - 29.4.2005, 19:51

Вот не могу понять, как же поставить высоту ячеек таблицы именно 30%, 40% и 30% (как это отображено в коде). Вроде, в сумме эти ячейки по высоте дадут 100%, как и указано в высоте таблицы. Т.е. вроде, все должно быть соответственно указанным в коде размерам. Но ведь ни фига
Вот этот код:

Код

<td width="28%" height="100%" valign="top" bgcolor="#7C93B3">           <div align="right">             <table border="0" cellspacing="0" cellpadding="0">               <tr>                 <td height="30%"><div align="left"><img src="../Graphic/krovlya/pic_2.jpg" /></div></td>               </tr>               <tr>                 <td height="40%"><div align="right"><img src="../Graphic/krovlya/pic_3.jpg" /></div></td>               </tr>               <tr>                 <td height="30%"><div align="center"><img src="../Graphic/krovlya/pic_1.jpg" /></div></td>               </tr>             </table>                           </div>         </td>

Где же ошибка
И все-таки, по всему коду ни одного пиксельного измерения (только проценты), при просмотре страницы при разных разрешениях монитора все же вылезает полоса прокрутки

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

Ты указываешь 30%, 40% и 30% от чего? Правильно, от высоты таблицы. А высота таблицы задана где? Правильно, нигде.

Задай таблице высоту, либо в пикселях, либо в %.

Код

<table border="0" cellspacing="0" cellpadding="0" width="100%"> или <table border="0" cellspacing="0" cellpadding="0" width="200px">

Просто так, не задав высоту таблицы, ты ничего не получишь.

Но учти. Задавая высоту 100%, надо понимать, от чего эти 100% будут браться.
Например, от высоты дива, так?
А 100% высоты дива откуда? От body? Или от чего? От body тоже можно, кстати. То есть div будет занимать 100% от высоты окна.

Но тут тоже не без подколок. Если написать так: <div height="100%">, работать это под Оперу 7.54, например, не будет ) А если так: <div style="height: 100%">, то будет
В общем, тестировать надо.

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

dm9
Эээ, так высота - это же height, вроде. Я не права?
Да я и так писала:

Код

<td width="28%" valign="top" bgcolor="#7C93B3">           <div align="right">             <table [b]height="100%"[/b] border="0" cellspacing="0" cellpadding="0">               <tr>                 <td height="30%"><div align="left"><img src="../Graphic/krovlya/pic_2.jpg" /></div></td>               </tr>               <tr>                 <td height="40%"><div align="right"><img src="../Graphic/krovlya/pic_3.jpg" /></div></td>               </tr>               <tr>                 <td height="30%"><div align="center"><img src="../Graphic/krovlya/pic_1.jpg" /></div></td>               </tr>             </table>                           </div>         </td>

Тоже не помогает
Добавлено @ 20:38
Здесь, в общих чертах, правая колонка общей таблицы, в которую вставлена внутренняя таблица, в которую, в свою очередь, вставлены картинки. Т.о. высота как правой ячейки общей таблицы, так и вставленной в нее внутренней таблицы должна быть 100%.
Да и вот так - не получается

Код

<td width="28%" valign="top" bgcolor="#7C93B3">           <div style="height: 100%" align="right">             <table height="100%" border="0" cellspacing="0" cellpadding="0">               <tr>                 <td height="30%"><div align="left"><img src="../Graphic/krovlya/pic_2.jpg" /></div></td>               </tr>               <tr>                 <td height="40%"><div align="right"><img src="../Graphic/krovlya/pic_3.jpg" /></div></td>               </tr>               <tr>                 <td height="30%"><div align="center"><img src="../Graphic/krovlya/pic_1.jpg" /></div></td>               </tr>             </table>                           </div>         </td>

Все дело в том, что высота в процентах. У табицы - проценты от дива. У дива - проценты от ячейки. А ячейка не имеет заданолй высоты. Я про ячейку, которая в сточке 1 начинается. Если задать этой ячейке высоту, то может что-то получиться. Только помни: высота в процентах - это высота относительно родительского элемента. Так что и таблице придется задавать высоту. И дальше вверх по дереву, если все в процентах.

Да и так не помогает

Код

<td height="100%" width="28%" valign="top" bgcolor="#7C93B3">           <div style="height:100%" align="right">             <table height="99%" border="0" cellspacing="0" cellpadding="0">               <tr>                 <td height="30%"><div align="left"><img src="../Graphic/krovlya/pic_2.jpg" /></div></td>               </tr>               <tr>                 <td height="40%"><div align="right"><img src="../Graphic/krovlya/pic_3.jpg" /></div></td>               </tr>               <tr>                 <td height="30%"><div align="center"><img src="../Graphic/krovlya/pic_1.jpg" /></div></td>               </tr>             </table>                           </div>         </td>

Вот весь мой боди, если кому-то очевидна ошибка, подскажите, пож-та.  

Код

<body topmargin="0" leftmargin="0"> <center/> <table border="0" width="85%" 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 width="100%">       <table border="0" width="100%" cellspacing="0" cellpadding="0">         <tr>           <td width="100%" bgcolor="#7C93B3"><img src="../Graphic/Top_1_krovlya.jpg"></td>         </tr>       </table>          <table background="../Templates/Doma_gory/Fon_fasad.jpg" border="0" width="100%" cellspacing="0" cellpadding="0">         <tr>           <td width="72%" height="100%" valign="top">             <table width="100%" height="40" cellpadding="0" cellspacing="0">               <tr>                 <td> <a href="page_home.htm"><img src="../Templates/Doma_gory/home.jpg" alt="Главная" border=0 onMouseOver="this.src='../Templates/Doma_gory/homehover.jpg'" onMouseOut="this.src='../Templates/Doma_gory/home.jpg'"></a><a href="pages/test_saite.htm"><img src="../Templates/Doma_gory/about.jpg" alt="О нас" border=0 onMouseOver="this.src='../Templates/Doma_gory/abouthover.jpg'" onMouseOut="this.src='../Templates/Doma_gory/about.jpg'"></a><a href="../Templates/Doma_gory/contact.jpg"><img src= "../Templates/Doma_gory/contact.jpg" alt="Контакты" border=0 onmouseover="this.src='../Templates/Doma_gory/contacthover.jpg'" onmouseout="this.src='../Templates/Doma_gory/contact.jpg'" /></a><img src="../Templates/Doma_gory/title_continue.jpg"  /></td>              </tr>             </table>             <table width="100%"  border="0">               <tr class="qwe">               <td><p class="qwe"> Внешний вид здания - это важный фактор для клиента или самого хозяина здания. Немаловажную роль играет облик фасада. Но, к сожалению, со временем фасад приобретает непризентабкльный вид: под воздействие внешних погодных факторов краска выгорает, местами трескается. Сам же материал, из которого выполнен фасад, может претерпеть негативные изменения, что потребует выполнения ремонтных работ.</p>                 <p class="qwe">В подобных случаях промышленные альпинисты помогут Вам решить эту проблему, аккуратно работая с материалом фасада здания, а Вам не придется приостанавливать работу Вашего предприятия из-за угрожающего вида строительных лесов или прочих вспомогательных конструкций.</p>               </tr>               </tbody>             </table>             <div align="center">               <table width="90%" bordercolor="#7C93B3" border="2">                 <tr class="asd">                   <td width="35%"><p class="asd">Услуга</p></td>                   <td width="25%"><p class="asd">Единица<br />измерения</p></td>                   <td width="30%"><p class="asd">Цена/ ед. измерения<br>(руб.)</p></td>                 </tr>                 <tr>                   <td><p class="zxc">Мойка стекол</p></td>                   <td><p class="rty">1 кв. м</p></td>                   <td><p class="rty">30</p></td>                 </tr>                 <tr>                   <td><p class="zxc">&nbsp;</p></td>                   <td><p class="rty"></p></td>                   <td><p class="rty"></p></td>                 </tr>                 <tr>                   <td><p class="zxc">&nbsp;</p></td>                   <td><p class="rty"></p></td>                   <td><p class="rty"></p></td>                 </tr>                 <tr>                   <td><p class="zxc">&nbsp;</p></td>                   <td><p class="rty"></p></td>                   <td><p class="rty"></p></td>                 </tr>                 <tr>                   <td><p class="zxc">&nbsp;</p></td>                   <td><p class="rty"></p></td>                   <td><p class="rty"></p></td>                 </tr>                 <tr>                   <td><p class="zxc">&nbsp;</p></td>                   <td><p class="rty"></p></td>                   <td><p class="rty"></p></td>                 </tr>                 <tr>                   <td><p class="zxc">&nbsp;</p></td>                   <td><p class="rty"></p></td>                   <td><p class="rty"></p></td>                 </tr>                 <tr>                   <td><p class="zxc">&nbsp;</p></td>                   <td><p class="rty"></p></td>                   <td><p class="rty"></p></td>                 </tr>                 <tr>                   <td><p class="zxc">&nbsp;</p></td>                   <td><p class="rty"></p></td>                   <td><p class="rty"></p></td>                 </tr>               </table>             </div>           <td height="100%" width="28%" valign="top" bgcolor="#7C93B3">           <div style="height:100%" align="right">             <table height="99%" border="0" cellspacing="0" cellpadding="0">               <tr>                 <td height="30%"><div align="left"><img src="../Graphic/krovlya/pic_2.jpg" /></div></td>               </tr>               <tr>                 <td height="40%"><div align="right"><img src="../Graphic/krovlya/pic_3.jpg" /></div></td>               </tr>               <tr>                 <td height="30%"><div align="center"><img src="../Graphic/krovlya/pic_1.jpg" /></div></td>               </tr>             </table>                           </div>         </td>         </tr>       </table>       <table border="0" width="100%" bgcolor="#B5C2D5" cellspacing="0" cellpadding="0" height="50">         <tr>           <td width="80%">             <p align="left" style="margin-left: 20"><font color="#4A6282">Copyrights 2004 Your company name All rights reserved.             Design by <strong>Urod</strong> </font>           </td>       </table>     <td width="1%" background="../Templates/Doma_gory/pozadina1.gif"><img border="0" src="../Templates/Doma_gory/pozadina1.gif" width="10" height="10"></td>   </tr> </table> </div> </body>

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

Ты знаешь, под ИЕ и Мозиллу у тебя всё работет. Как сделать таким образом под Оперу - я не знаю

Не морочь голову и замени вот это:

Цитата(Urod @ 3.5.2005, 20:44)

<div style="height:100%" align="right">             <table height="99%" border="0" cellspacing="0" cellpadding="0">               <tr>                 <td height="30%"><div align="left"><img src="../Graphic/krovlya/pic_2.jpg" /></div></td>               </tr>               <tr>                 <td height="40%"><div align="right"><img src="../Graphic/krovlya/pic_3.jpg" /></div></td>               </tr>               <tr>                 <td height="30%"><div align="center"><img src="../Graphic/krovlya/pic_1.jpg" /></div></td>               </tr>             </table>                          </div>

На вот это.

Код

<div style="height:30%" align="right">Тут твоя картинка, ну и align, может, исправить придётся</div> <div style="height:40%" align="right">Тут твоя картинка, ну и align, может, исправить придётся</div> <div style="height:30%" align="right">Тут твоя картинка, ну и align, может, исправить придётся</div>

Куда я только эти дивы не вставляла! Ну так тоже не работает

Код

<div style="height:100%" align="right">              <table border="0" cellspacing="0" cellpadding="0">                <tr>                  <td><div style="height:50%" align="right"><img src="../Graphic/krovlya/pic_2.jpg" /></div></td>                </tr>                <tr>                  <td><div style="height:60%" align="left"><img src="../Graphic/krovlya/pic_3.jpg" /></div></td>                </tr>                <tr>                  <td><div style="height:30%" align="center"><img src="../Graphic/krovlya/pic_1.jpg" /></div></td>                </tr>              </table>                           </div>

Так, я в ячейку вставила таблицу, состоящую из трех строк и одного столбца. Хочу задать высоту этим строкам... Так, может, в Tr вставлять дивы?
Добавлено @ 21:55
Да и если так писать, тоже ни фига

Код

<tr "height:50%">

Блин, нарисовала картинку того, что я хочу, да тут ее не прикрепить никуда
Я хочу, чтобы между моими рисунками (вставленными в каждую строку одного столбца) были промежутки. Сейчас эти рисунки буквально друг на дружке "сидят". Так я хочу размером высоты строк (а рисунки у меня строго ограничены по размерам и, соответственно, меньше по высоте, чем сами строки, куда они вставлены - я картинки в фотошопе подгоняла) задать эти промежутки. КАААААААААААААК это сделать?

Код

img.padded {     padding: 10px; }

Код

<img class="padded" src="img1.jpg" width="300px" height="100px" alt="" /> <img class="padded" src="img2.jpg" width="300px" height="100px" alt="" /> <img class="padded" src="img3.jpg" width="300px" height="100px" alt="" />

ChebaВот так?:

В CSS:

Код

img.padded {     padding: 10px; }

Код

<tr>                 <td ><div align="left"><img class="padded" src="../Graphic/krovlya/pic_2.jpg" /></div></td>               </tr>

>
Не пролучилось НЕт отступов от картинки
Добавлено @ 23:19
УРАААААААААААААААААААА!!!!!!!!!!!!!!!!!
Вот, как надо было CSS описать:

Код

} img.padded {      margin: 20px 10px 10px 10px; }

Спасибо Cheba за идею, спасибо dm9 - за полученные от тебя навыки

Это сообщение отредактировал(а) Urod - 3.5.2005, 23:16

Цитата(Cheba @ 3.5.2005, 23:52)

img.padded {     padding: 10px; }

Не padding: 10px, а margin: 10px (!!!)

Цитата(Urod @ 3.5.2005, 22:51)

Куда я только эти дивы не вставляла!

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


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

Вот только при разрешении 800 на 600 все равно прокрутка горизонтальная возникает. Почему, на что необходимо в первую очередь обратить внимание?

Цитата(Urod @ 4.5.2005, 00:23)

Вот только при разрешении 800 на 600 все равно прокрутка горизонтальная возникает. Почему, на что необходимо в первую очередь обратить внимание?

На картинки, которые растягивают таблицу.

Чтоб не возникало, даже если картинки больше экрана, задай свойства clip и overflow к тегу body

Цитата(dm9 @ 3.5.2005, 23:22)

Не padding: 10px, а margin: 10px (!!!)

Да, простите. Тяжелый трудовой день и все такое... Но идею люди поняли.

Цитата(Aliance @ 3.5.2005, 23:25)

Чтоб не возникало, даже если картинки больше экрана, задай свойства clip и overflow к тегу body

Aliance А как это делается? Да и вообще это поможет, учитывая, что размер картинок статичен?

dm9 Нее, картинки специально обрезаны в фотошопе до нужного размера => они не растягивают таблицу. Т.о. вопрос остается

Это сообщение отредактировал(а) Urod - 4.5.2005, 08:40

Цитата(Urod @ 4.5.2005, 09:38)

Т.о. вопрос остается

Ну тогда давай сюда страничку в архиве. Мы тут не телепаты

dm9 Понимаю
Блин, я на работе (тут нельзя свои файлы качать, мой код у меня дома). Я как приду домой - сразу скину! СПАСИБО!!!!!!!!

Цитата(Urod @ 4.5.2005, 09:38)

Aliance А как это делается? Да и вообще это поможет, учитывая, что размер картинок статичен?

Да какая разница... Эти св-ва задают видимость блока, в нашем случае боди. Ставим ноу скролл и клип во весь экран - и дальше он не будет прокручиваться, будет обрезаться...

dm9 Слушай, я тебе на ящик кинула свой сайт (сюда не лез ). Посмотришь?

Посмотрю, куда ж я денусь...

Сейчас нет времени подробно смотреть, но имхо это всё из-за шапки сайта. У тебя там картинок на 1200 пикселей воткнуто

dm9 А что ты называешь шапкой сайта в данном случае? Ты про шапку страникчи, наверное. Да?
Ээ, это окончательное заключение?

Это сообщение отредактировал(а) Urod - 5.5.2005, 14:56

Да, конечно.
У тебя стоит картинка Top_1_krovlya.jpg шириной 1100 пикселей, таблица раздвигается под неё. Решение - поиграться с overflow:hidden, наверное... Или рисунок переделать как-то.
Далее, title_continue.jpg справа от кнопок занимает 480 пикселей. Ну, тут совсем просто. Вырежи правый кусочек, а остальная структура повторяется, её фоном в ячейку с повром по оси Х. Как тут: http://dm9.ru/vingrad/examples/html/background/ В этом примере используется 2 картинки шириной 1 пиксель. В общем, попробуй сама, я сегодня рассказать это не смогу - не то состояние Может, если попросишь, денька через два расскажу что-нить.

PS Надо, блин, ФАК составлять по ответам. Уже повторяться начинаю от топика к топику.

---------------------------------------------

Кстати, замени заголовок. Доктайп пишется вверху, иначе его можно вообще не писать. И мета-таги не нужны тебе половина.

Код

<html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Language" content="hr"> <meta http-equiv="content-type" content="text/html; charset=windows-1251">  <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>Alpinist</title>

-->

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251">  <title>Alpinist</title>

Ну на счет заголовка, я знаю, только при перемене тегов на верху страницы вылазит пустое место - не красиво это. Я потом буду думать, как это поправить.
Добавлено @ 20:16
СПАСИБО тебе, буду пробывать разбераться...

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

Это сообщение отредактировал(а) Urod - 5.5.2005, 20:39

Цитата(Urod @ 5.5.2005, 21:25)

Идею поняла, про повороты по оси Х - не поняла...

Я ссылку не просто так давал
http://dm9.ru/vingrad/examples/html/background/

Посмотри, как это сделано там - всего-то строчек 20 будет.

HTML так и изучается поначалу - если не знаешь, как что-то сделать, смотришь, как это сделано на другом сайте )

dm9 Да! разобралась уже
Сначала написала, потом попробывала
Теперь буду в другой последовательности делать
Только что свое сообщение убирала

Это сообщение отредактировал(а) Urod - 10.5.2005, 02:27

Цитата(Urod @ 5.5.2005, 21:25)

Идею поняла, про повороты по оси Х - не поняла...

Например.
Задача:
сделать фон ячейки 20*20 черным.

Решения:
а) примитивное:
сделать черную картинку 20*20
б) продвинутое:
сднелать картинку 20*1 (ширина 1), далее прописать такое в стилях для твоей ячейки:

Код

.ячейка {    BACKGROUND: #000000 url('your_img.gif') repeat-x; }

в) Решение профессионала: сделать div размерами 20х20 и заливкой black

(Шутю )

Ну у меня и без

Код

BODY { background-image: url('../Templates/Doma_gory/title_continue2.jpg'); background-repeat: repeat-x; }

картинка по строке растягивается.
Я просто так в коде пишу

Код

<td style="background-image: url('../Templates/Doma_gory/title_continue2.jpg')">

И все работет.
В чем-то подвох?
Добавлено @ 20:55

Цитата(Aliance @ 4.5.2005, 13:06)

Да какая разница... Эти св-ва задают видимость блока, в нашем случае боди. Ставим ноу скролл и клип во весь экран - и дальше он не будет прокручиваться, будет обрезаться...

Нельзя ли маленький примерчик?

dm9
черный я как пример привел... можно было бы и не издеваться.

Aliance Да как с этими свойствами clip и overflow к тегу body обращаться?????????

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <STYLE type="text/css"> BODY {    overflow: hidden;    clip: rect(50px, 50px, 50px, 50px); } </STYLE> </HEAD> <BODY> <nobr> wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww </nobr> </BODY> </HTML>

Aliance, что-то я не понял, зачем тут клип...

Потом, это лучше применять не ко всей странице, а к диву, в который вложить широкую картинку.

Это был просто пример.

Пример примером, но ты объясни, зачем клип... имхо, и так пойдёт. Или я чего-то не понимаю?

dm9
Для body да, никакой нужны в нем нет
Просто дал, чтобы потом не возникло попутного вопроса.

ЗЫ: Urod где-то Се Ля Ви писал об этих 2уч св-вах, найди, почитай... в разделе JS по-моему было...

Блин, что тут писать.
<div style="width: 100%; overflow: hidden"><img src="..." alt="" /></div>

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

Цитата(Aliance @ 5.5.2005, 20:48)

б) продвинутое: сднелать картинку 20*1 (ширина 1), далее прописать такое в стилях для твоей ячейки

Не согласен. Вообще по-нормальному картинку для фона выбирают как можно больше. Например, этот же черный фон. Чтобы не было все так просто изменим его на полосатый - горизонтальные чередующиеся полосы. Тут лучше сделать картинку, на которую умещается две полосы по высоте. А ширину картинки сделать 256. GIF его сожмет в такой же размер как и шириной в 1 пиксель. Но нарисовать два раза 256 пикселей проще, чем полтыщи раз 1 пиксель. На зпгруженных старых компах это даже на глаз заметно.

Cheba, интересная мысль. Не задумывался. Спасибо

А что эти теги clip и overflow делают-то?
Подгоняют картинку под заданные размеры таблицы (процентные размеры)? Если так, то другие картинки странички тоже надо будет оформлять этими тегами?

dm9 А почему только картинка Top_1_krovlya.jpg шириной 1100 пикселей мешает страничке тянуться в соответствии с процентным размером? А другие картинки не мешают?

Cheba
Естественно, зависит от требуемого рисунка

Urod
Прочти топ, который я тебе посоветовал. Прочти рекомендации.

Цитата(Urod @ 5.5.2005, 23:26)

А что эти теги clip и overflow делают-то?

1) это не теги
2) второй соответственно === управляем видимостью полосы прокрутки блока
первый === область усечения блока. Работает только при заданном overflow. В CSS2 оф. поддерживается только форма rect, далее идут координаты усечения: top, right, bottom, left, соответственно

Цитата(Aliance @ 5.5.2005, 22:34)

Цитата(Urod @ 5.5.2005, ) А что эти теги clip и overflow делают-то? 1) это не теги

А что это?

Цитата(Aliance @ 5.5.2005, 22:34)

2) второй соответственно === управляем видимостью полосы прокрутки блока     первый === область усечения блока. Работает только при заданном overflow. В CSS2 оф. поддерживается только форма rect, далее идут координаты усечения: top, right, bottom, left, соответственно

Т.е. в итоге получатся обрезанные картинки?

Цитата(Urod @ 6.5.2005, 13:42)

Т.е. в итоге получатся обрезанные картинки?

обрезанный контент, а что там (картинки, текст...) - это другой вопрос.

Цитата(Urod @ 6.5.2005, 13:42)

А что это?

теги - это парные контейнеры!
А это - CSS св-ва элемента!

Цитата(Aliance @ 6.5.2005, 12:50)

обрезанный контент, а что там (картинки, текст...) - это другой вопрос.

Ну понятно. Мне это не пойдет: мне-то, вообще, нужно верхнюю (типа, логотип) картинку сделать динамичной, т.е. чтобы она подстраивалась (по размерам) под размеры разрешения экрана полдьзователя, и, как следствие, не появлялась горизонтальная прокрутка.
Т.е. размеры таблицы у меня процентные, а картинка не дает таблице менять свои размеры в соответствии с разрешением экрана, т.к. она большая 1100 px.

Это сообщение отредактировал(а) Urod - 6.5.2005, 12:58

А ее размеры процентными нельзя поставить?
Если нет - нужно с помощью JS...

Цитата(Urod @ 6.5.2005, 12:56)

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

Это ж как? Как ты себе этот процесс представляешь? Поподробней опиши.

Так, у меня все размеры в коде выставлены в процентах, НО! при изменении разрешения экрана у меня все равно появляется горизонтальная прокрутка, т.о. делаем вывод, что странички не подстаиваются под размер экрана (что странно) - значит где-то в коде ошибка.
По моей просьбе dm9 любезно согласился посмотреть мой код и дал заключение о том, что страницам сайта (размеры которых заданы в %) не подстраиваются под размеры экрана из-за большого размера картинки-логотипа (ее размер 1100 px), т.е. эта картинка мешает сужаться страничкам.
Мне кажется должно быть какое-то решение этого вопроса, т.к. сейчас у меня большая картинка, и даже если я ее переделаю на более мальнькую, то тогда при большем разрешении экрана будут пустые места на стиранице сайта. Т.е. я хочу сказать, что, наверняка, существет решение подстраивания размеров картинки под размеры странички. А размеры странички можно подстроить под размер разрешения экрана путем %.
Подскажите, пож-та. Я этого пока не знаю

Цитата(Urod @ 6.5.2005, 12:56)

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

Разрежь картинку на части. Те части которые можно растянуть, без рисунка, сделай их шириной в 1 px и высотой? в высоту логотипа.
Эту картинку в 1 px, что у тебя получится можно растягивать, если поставить ее в background.

PARROT Не, это не прокатит. У меня в этой картинке нет повторяющихся элементов, так что растягивать нечего.
А все дело только в "весе" картинки, разве не в ее размере (px на px)?

Покажи саму картинку.

Цитата(PARROT @ 6.5.2005, 18:46)

Покажи саму картинку.

Вот она. Такие же на других страницах (в смысле по размеру, а не содержанию)

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

Присоединённый файл ( Кол-во скачиваний: 2 )
 Top_1_home.rar

Эта картинка сложена из 4 разных картинок?

Довольно легко сделать на JS.
Задаем началье параметры.
Читаем параметры разрешения и подстраиваем.
Если они изменились - изменятся и параметры картинки...

PARROT Почти: там еще 3 слоя во второй справа.

Aliance Слушай, ну если бы я знала JS я бы давно все сделала - так я и прошу пример, чтобы по анологии сделать.

Urod
Как бы тут не место его просить. Мы только еще больше захламим топик. Войди в раздел соответствующий - там и задай...

AlianceДа знать бы еще, что спрашивать: понятия не имею, что можно сделать средствами JS и поможет ли это в моем случае (т.е. в разделе JS это в тему будет?)
Добавлено @ 19:43
Ладно, пошла в JS

Ну вот если поступить вот так, то прокуртки не надлюдается:

Код

<table  width=100%  height=100% cellpadding="0" cellspacing="0" background=log.jpg><tr><td>&nbsp;<td></tr></table>

Но при разных разрешениях изменяется картинка, но этого не заметно. По крайней мере для моего глаза.

Это сообщение отредактировал(а) PARROT - 6.5.2005, 19:46

PARROT
Это не есть гут:
- поисковики не индексят такую картинку
- она гразится в посл. очередь
- вроде бы не все поддерживают такое...

Цитата(Aliance @ 6.5.2005, 19:46)

PARROT Это не есть гут: - поисковики не индексят такую картинку - она гразится в посл. очередь - вроде бы не все поддерживают такое...

А иначе выхода я не вижу.
Тогда лучше заменить картинку и не мучаться. Я бы так поступила.

Не, ну я слышала такое, что картинку делают наибольшей длины 1600, ставят ее в бакграунд и... Я читала.
А вообще качество картинки не очень (видны слои, переходы, этого не должно быть видно!), есть смысл переделать картинку.

Цитата(Aliance @ 6.5.2005, 20:09)

Довольно легко сделать на JS.

Довольно легко сделать на чистом HTML.

Смотрим тут:
http://dm9.ru/vingrad/examples/html/siteheader/

Главное, грамотно разрезать картинку на несколько частей.

Цитата(dm9 @ 6.5.2005, 22:18)

Главное, грамотно разрезать картинку на несколько частей.

Цитата(Urod @ 6.5.2005, 19:42)

Не, это не прокатит. У меня в этой картинке нет повторяющихся элементов, так что растягивать нечего.