Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Процентные разеры таблиц

Автор: Urod 28.4.2005, 19:56

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

Автор: PARROT 28.4.2005, 20:08

Цитата(Urod @ 28.4.2005, 19:56) Задаю разметку страницы сайта с помощью таблицы. Размеры ячеек прописыват процентами. Смотрю на страницу с помощью браузаров Мозилла и ИЕ при разрешении монитора 1280 на 1024. Меняю разрешение на 800 на 600 - и понимаю, что для просмотра страницы нужно крутить прокрутку. Т.е. в чем смысл-то процентов? Разве они не должны оптимизировать размер страницы под разрешение монитора? Если размер всех таблиц как и основной указывать в процентах, то сайт должен работать на всех разрешениях, то есть должен тянуться и стягиваться, в зависимости от разрешения экрана пользователя. Чем и я сейчас занимаюсь, сложно, но можно!

Автор: Urod 28.4.2005, 22:05

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

Автор: PARROT 28.4.2005, 22:40

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

Автор: dm9 29.4.2005, 00:39

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

Автор: Urod 29.4.2005, 08:23

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

Автор: PARROT 29.4.2005, 09:20

Цитата(Urod @ 29.4.2005, 08:23) dm9 Так, ну так все-таки как результат проверки правильности указания процентных размеров ячеек можно примеять разные разрешения экрана? При этом горизонтальная прокрутка не должна появляться? У меня стандартные настройки браузеров. 1) Для начала нужно решить минимум для какого разрешения ты будешь делать свой сайт. Мой минимум это 800Х600, у некоторых 1024 минимум и проверяй, проверяй, проверяй... 2) Прокрутка появляться не должна, при правильно указанных процентах в таблицах, при стандартных настройках браузера. Вообще все до боли просто: Основная таблица, в которой содержатся внутренние таблицы для контента сайта (все в процентах). И не забудь по бокам сделать пустые ячейки(<td width=20>&nbsp;</td>), не то текст или картинка будут располагаться, слишком близко к прокрутке.

Автор: dm9 29.4.2005, 10:18

Цитата(PARROT @ 29.4.2005, 10:20) И не забудь по бокам сделать пустые ячейки(<td width=20>&nbsp;</td>), не то текст или картинка будут располагаться, слишком близко к прокрутке. Ну... это делается так: Код body { padding: 0px 20px 0px 20px; } Что означает отсуп контента от краёв страницы на 0px - сверху, 20px - справа, 0px - снизу, 20px - слева.

Автор: PARROT 29.4.2005, 11:57

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

Автор: Urod 29.4.2005, 18:12

dm9 Код body { padding: 0px 20px 0px 20px; } О! я-я, мы это уже знать!

Автор: dm9 29.4.2005, 19:00

Urod Ещё бы научились пользоваться кодом CSS, а не HTML, когда чистый CSS используется, и вообще было бы замечательно Код /* Вот так делать не надо :) */ body {     padding: 0px 20px 0px 20px; } Код /* А так - хорошо :) */ body {     padding: 0px 20px 0px 20px;     }

Автор: Urod 2.5.2005, 19:13

Вот не могу понять, как же поставить высоту ячеек таблицы именно 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> Где же ошибка И все-таки, по всему коду ни одного пиксельного измерения (только проценты), при просмотре страницы при разных разрешениях монитора все же вылезает полоса прокрутки

Автор: dm9 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%">, то будет В общем, тестировать надо. Но ты учти самое главное, проценты берутся от чего-то, что должно быть строго указано

Автор: Urod 2.5.2005, 20:30

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>

Автор: Cheba 2.5.2005, 23:27

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

Автор: Urod 3.5.2005, 19:44

Да и так не помогает Код <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>

Автор: dm9 3.5.2005, 21:22

Ты знаешь, под ИЕ и Мозиллу у тебя всё работет. Как сделать таким образом под Оперу - я не знаю Не морочь голову и замени вот это: Цитата(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>

Автор: Urod 3.5.2005, 21:51

Куда я только эти дивы не вставляла! Ну так тоже не работает Код <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%">

Автор: Urod 3.5.2005, 22:15

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

Автор: Cheba 3.5.2005, 22:52

Код 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="" />

Автор: Urod 3.5.2005, 23:16

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 - за полученные от тебя навыки

Автор: dm9 3.5.2005, 23:22

Цитата(Cheba @ 3.5.2005, 23:52) img.padded {     padding: 10px; } Не padding: 10px, а margin: 10px (!!!) Цитата(Urod @ 3.5.2005, 22:51) Куда я только эти дивы не вставляла! Ты их не вставляй никуда, ты просто один за одним их положи вместо того куска кода, который я тебе написал там.

Автор: Urod 3.5.2005, 23:23

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

Автор: dm9 3.5.2005, 23:24

Цитата(Urod @ 4.5.2005, 00:23) Вот только при разрешении 800 на 600 все равно прокрутка горизонтальная возникает. Почему, на что необходимо в первую очередь обратить внимание? На картинки, которые растягивают таблицу.

Автор: Aliance 3.5.2005, 23:25

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

Автор: Cheba 4.5.2005, 02:42

Цитата(dm9 @ 3.5.2005, 23:22) Не padding: 10px, а margin: 10px (!!!) Да, простите. Тяжелый трудовой день и все такое... Но идею люди поняли.

Автор: Urod 4.5.2005, 08:38

Цитата(Aliance @ 3.5.2005, 23:25) Чтоб не возникало, даже если картинки больше экрана, задай свойства clip и overflow к тегу body Aliance А как это делается? Да и вообще это поможет, учитывая, что размер картинок статичен? dm9 Нее, картинки специально обрезаны в фотошопе до нужного размера => они не растягивают таблицу. Т.о. вопрос остается

Автор: dm9 4.5.2005, 08:43

Цитата(Urod @ 4.5.2005, 09:38) Т.о. вопрос остается Ну тогда давай сюда страничку в архиве. Мы тут не телепаты

Автор: Urod 4.5.2005, 08:56

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

Автор: Aliance 4.5.2005, 13:06

Цитата(Urod @ 4.5.2005, 09:38) Aliance А как это делается? Да и вообще это поможет, учитывая, что размер картинок статичен? Да какая разница... Эти св-ва задают видимость блока, в нашем случае боди. Ставим ноу скролл и клип во весь экран - и дальше он не будет прокручиваться, будет обрезаться...

Автор: Urod 5.5.2005, 13:04

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

Автор: dm9 5.5.2005, 13:12

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

Автор: Urod 5.5.2005, 14:55

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

Автор: dm9 5.5.2005, 20:03

Да, конечно. У тебя стоит картинка 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>

Автор: Urod 5.5.2005, 20:12

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

Автор: Urod 5.5.2005, 20:25

Автор: dm9 5.5.2005, 20:27

Цитата(Urod @ 5.5.2005, 21:25) Идею поняла, про повороты по оси Х - не поняла... Я ссылку не просто так давал http://dm9.ru/vingrad/examples/html/background/ Посмотри, как это сделано там - всего-то строчек 20 будет. HTML так и изучается поначалу - если не знаешь, как что-то сделать, смотришь, как это сделано на другом сайте )

Автор: Urod 5.5.2005, 20:41

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

Автор: Aliance 5.5.2005, 20:48

Цитата(Urod @ 5.5.2005, 21:25) Идею поняла, про повороты по оси Х - не поняла... Например. Задача: сделать фон ячейки 20*20 черным. Решения: а) примитивное: сделать черную картинку 20*20 б) продвинутое: сднелать картинку 20*1 (ширина 1), далее прописать такое в стилях для твоей ячейки: Код .ячейка {    BACKGROUND: #000000 url('your_img.gif') repeat-x; }

Автор: dm9 5.5.2005, 20:51

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

Автор: Urod 5.5.2005, 20:52

Ну у меня и без Код 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) Да какая разница... Эти св-ва задают видимость блока, в нашем случае боди. Ставим ноу скролл и клип во весь экран - и дальше он не будет прокручиваться, будет обрезаться... Нельзя ли маленький примерчик?

Автор: Aliance 5.5.2005, 20:59

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

Автор: Urod 5.5.2005, 21:03

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

Автор: Aliance 5.5.2005, 21:03

Код <!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>

Автор: dm9 5.5.2005, 21:06

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

Автор: Aliance 5.5.2005, 21:13

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

Автор: dm9 5.5.2005, 21:16

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

Автор: Aliance 5.5.2005, 21:30

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

Автор: dm9 5.5.2005, 21:35

Блин, что тут писать. <div style="width: 100%; overflow: hidden"><img src="..." alt="" /></div> Только это всё заплатки, и обрезанная картинка будет выглядеть некрасиво. Лучше сделать по-нормальному, то есть резиновую шапку. Как все везде делают.

Автор: Cheba 5.5.2005, 21:40

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

Автор: dm9 5.5.2005, 21:49

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

Автор: Urod 5.5.2005, 22:26

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

Автор: Aliance 5.5.2005, 22:34

Cheba Естественно, зависит от требуемого рисунка Urod Прочти топ, который я тебе посоветовал. Прочти рекомендации. Цитата(Urod @ 5.5.2005, 23:26) А что эти теги clip и overflow делают-то? 1) это не теги 2) второй соответственно === управляем видимостью полосы прокрутки блока первый === область усечения блока. Работает только при заданном overflow. В CSS2 оф. поддерживается только форма rect, далее идут координаты усечения: top, right, bottom, left, соответственно

Автор: Urod 6.5.2005, 12:42

Цитата(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, соответственно Т.е. в итоге получатся обрезанные картинки?

Автор: Aliance 6.5.2005, 12:50

Цитата(Urod @ 6.5.2005, 13:42) Т.е. в итоге получатся обрезанные картинки? обрезанный контент, а что там (картинки, текст...) - это другой вопрос. Цитата(Urod @ 6.5.2005, 13:42) А что это? теги - это парные контейнеры! А это - CSS св-ва элемента!

Автор: Urod 6.5.2005, 12:56

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

Автор: Aliance 6.5.2005, 13:12

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

Автор: Cheba 6.5.2005, 13:17

Цитата(Urod @ 6.5.2005, 12:56) нужно верхнюю (типа, логотип) картинку сделать динамичной, т.е. чтобы она подстраивалась (по размерам) под размеры разрешения экрана полдьзователя Это ж как? Как ты себе этот процесс представляешь? Поподробней опиши.

Автор: Urod 6.5.2005, 13:27

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

Автор: PARROT 6.5.2005, 17:27

Цитата(Urod @ 6.5.2005, 12:56) мне-то, вообще, нужно верхнюю (типа, логотип) картинку сделать динамичной, т.е. чтобы она подстраивалась (по размерам) под размеры разрешения экрана полдьзователя, и, как следствие, не появлялась горизонтальная прокрутка. Разрежь картинку на части. Те части которые можно растянуть, без рисунка, сделай их шириной в 1 px и высотой? в высоту логотипа. Эту картинку в 1 px, что у тебя получится можно растягивать, если поставить ее в background.

Автор: Urod 6.5.2005, 18:42

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

Автор: PARROT 6.5.2005, 18:46

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

Автор: Urod 6.5.2005, 19:02

Цитата(PARROT @ 6.5.2005, 18:46) Покажи саму картинку. Вот она. Такие же на других страницах (в смысле по размеру, а не содержанию)

Автор: PARROT 6.5.2005, 19:09

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

Автор: Aliance 6.5.2005, 19:09

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

Автор: Urod 6.5.2005, 19:26

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

Автор: Aliance 6.5.2005, 19:36

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

Автор: Urod 6.5.2005, 19:40

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

Автор: PARROT 6.5.2005, 19:44

Ну вот если поступить вот так, то прокуртки не надлюдается: Код <table  width=100%  height=100% cellpadding="0" cellspacing="0" background=log.jpg><tr><td>&nbsp;<td></tr></table> Но при разных разрешениях изменяется картинка, но этого не заметно. По крайней мере для моего глаза.

Автор: Aliance 6.5.2005, 19:46

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

Автор: PARROT 6.5.2005, 19:49

Цитата(Aliance @ 6.5.2005, 19:46) PARROT Это не есть гут: - поисковики не индексят такую картинку - она гразится в посл. очередь - вроде бы не все поддерживают такое... А иначе выхода я не вижу. Тогда лучше заменить картинку и не мучаться. Я бы так поступила.

Автор: PARROT 6.5.2005, 20:01

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

Автор: dm9 6.5.2005, 21:18

Цитата(Aliance @ 6.5.2005, 20:09) Довольно легко сделать на JS. Довольно легко сделать на чистом HTML. Смотрим тут: http://dm9.ru/vingrad/examples/html/siteheader/ Главное, грамотно разрезать картинку на несколько частей.

Автор: Aliance 6.5.2005, 21:29

Цитата(dm9 @ 6.5.2005, 22:18) Главное, грамотно разрезать картинку на несколько частей. Цитата(Urod @ 6.5.2005, 19:42) Не, это не прокатит. У меня в этой картинке нет повторяющихся элементов, так что растягивать нечего.

Автор: dm9 6.5.2005, 21:37

Aliance, а по ссылочке сходить? Я там что-то растягивал

Автор: PARROT 7.5.2005, 11:28

Цитата(dm9 @ 6.5.2005, 21:18) http://dm9.ru/vingrad/examples/html/siteheader/ Здорово! Я так не умею

Автор: PARROT 7.5.2005, 21:33

А можно убирать не последнюю картинку, а предпоследнюю? А последняя пускай будет на месте. Если можно, то как?

Автор: dm9 7.5.2005, 23:41

Цитата(PARROT @ 7.5.2005, 12:28) Здорово! Я так не умею Ну так посмотри! Там же пять строк всего, специально уменьшил демку как мог. Проще не бывает. Цитата(PARROT @ 7.5.2005, 22:33) А можно убирать не последнюю картинку, а предпоследнюю? А последняя пускай будет на месте. Если можно, то как? Ой... надо подумать. Попозже подумаю.

Автор: PARROT 8.5.2005, 00:05

Цитата Ой... надо подумать. Попозже подумаю. Ок. Бум ждать! Давно посмотрела и сохранила...

Автор: Aliance 8.5.2005, 00:08

Цитата(dm9 @ 8.5.2005, 00:41) Ну так посмотри! Там же пять строк всего, специально уменьшил демку как мог. Проще не бывает. да, все идеально просто :-D Цитата(dm9 @ 8.5.2005, 00:41) А можно убирать не последнюю картинку, а предпоследнюю? А последняя пускай будет на месте. Если можно, то как? не понял что требуется...объясни

Автор: PARROT 8.5.2005, 00:30

Например: есть разрезанная картинка фотопленки. Начало и конец картинки не меняется, а вот середина генерируется, в зависимости от разрешения экрана у пользователя. Тоесть при разном разрешении количество квадратиков ленты, то увеличивается, то уменьшается.

Автор: Aliance 8.5.2005, 09:18

Ну не сложно это, просто нужно мне представлять как будет построен скрипт генерации )) Но это уже в другую тему. 3 страницы этой - не есть гут))

Автор: Urod 8.5.2005, 18:23

Цитата(Aliance @ 8.5.2005, 09:18) Но это уже в другую тему. 3 страницы этой - не есть гут)) А ты всех будешь посылать в другую тему, где ты - модератор и блокировать там тему? Как нам доказал dm9, далеко не всегда нужен JS, так что сначала еще раз оцени суть задачи!

Автор: Aliance 8.5.2005, 18:26

Urod Правила форума: http://forum.vingrad.ru/index.php?s=&act=SR&f=27 Цитата 10) Запрещается создание сообщения с несколькими вопросами. На каждый вопрос должна создаваться отдельная тема. В случае возникновения таких тем, администрация форума оставляет за собой право изменить текст сообщения, удалить его или закрыть тему. 3) Администратор и модераторы имеют право редактировать, удалять и переносить любые сообщения, если сочтут это нужным. еще вопросы имеются? ЗЫ: забанить я могу в любом разделе...

Автор: PARROT 8.5.2005, 23:26

Urod вы не правы! У каждого из нас есть свое мнение, подход к решению той или иной задачи и Вы не вправе обвинять кого-то, кто Вам, на Ваш взгляд, ответил не так, как бы вам хотелось. Сколько людей, столько и мнений, раз! Вам никто тут ничем не обязан, два! Дело каждого, добровольно, отвечать Вам или нет. А вести себя лучше прилично, мы не на базаре: Этот арбуз лучше, тот хуже! Все они с одной грядки!

Автор: Aliance 9.5.2005, 17:24

Цитата(PARROT @ 8.5.2005, 01:30) Начало и конец картинки не меняется, а вот середина генерируется, в зависимости от разрешения экрана у пользователя. Тоесть при разном разрешении количество квадратиков ленты, то увеличивается, то уменьшается. Ну тут врятли без JS обойдемся. Хотя можно, но тогда все равно кол-во картинок всегд будет одинаковое, но не все будут видны... А какого размера картинки динамические, т.е. те, которые всередине?

Автор: PARROT 9.5.2005, 17:42

А мне все равно каким путем пойдем, хоть через Москву! Я не спешу. Размер картинки посередине 54Х60 Поговорим в новой теме?

Автор: dm9 9.5.2005, 17:44

PARROT, я попробовал сделать это на чистом HTML. Если прижимать всю конструкцию с правому краю, то такое сделать можно. Картинки пропадают из середины. А вот чтобы слева, и пропадали куски из вередины... тут нужен JS. Добавлено @ 17:45 Если кто найдёт решение без JS, с меня плюс и бесконечное уважение Если серьёзно, стало даже интересно

Автор: Aliance 9.5.2005, 17:47

Цитата(PARROT @ 9.5.2005, 18:42) Поговорим в новой теме? канечно...а лучше попросить модераторов разделить эту тему, чтобы посты по новому вопросу заного не постить... Цитата(dm9 @ 9.5.2005, 18:44) Если прижимать всю конструкцию с правому краю, то такое сделать можно. Картинки пропадают из середины. не покажешь как?

Автор: PARROT 9.5.2005, 20:04

Вот она злосчастная фотопленка http://36k.ru/about.cgi (к сожалению на компе я ее на нашла, видно удалила со зла!) Слейте себе картинки, чтобы удобно было думать. Я долго билась и не одна я была такая...втроем, но у нас ничего не вышло.

Автор: Urod 9.5.2005, 20:47

Цитата(PARROT @ 8.5.2005, 00:30) Начало и конец картинки не меняется, а вот середина генерируется, в зависимости от разрешения экрана у пользователя. Тоесть при разном разрешении количество квадратиков ленты, то увеличивается, то уменьшается. А нельзя ли пример конкретной задачи? Т.к. мне не понятно, кол-во кадров увеличится/уменьшится, а их содержимое? Оно продублируется/исключится? Наверное, не так

Автор: Aliance 9.5.2005, 21:25

PARROT Попробуй так (если поможет - значит очень просто...если нет - значит я не понял задачи): Делишь пленку на 3 части: лево / право / центр (ровно 1 кусок) Делаешь таблицу из 3 столбцов, без границ, 0 растояниемежду столбцами, в право/лево вставляешь нужные куски - по центру в bg ставишь ее с растяжением по горизонтали. Вуоля

Автор: dm9 9.5.2005, 22:03

Aliance, тогда кадры не целиком вырежутся, будет кадр, от которого останется только половинка. Я погорячился насчёт случая, когда конструкция прижимается к правому краю. Я когда писал, только на ИЕ тестировал. Ещё под Firefox сделал. Оперу глючит, и как бороться, я не знаю. Картинки пропадают не пошагово, а последняя, которая должна резко пропасть, просто обрезается почему-то. Вот пример: http://dm9.ru/vingrad/examples/html/siteheader2/

Автор: PARROT 9.5.2005, 23:17

Да, но эта пленка всего состоит из 6 частей. Может просто середину вставлять в background, ячейку указывать шириной на 100% и пускай себе середина повторяется, сколько она хочет? Пойду пробовать

Автор: Aliance 9.5.2005, 23:21

dm9 А сорс-то не посмотреть =( Красиво сделано. А под какую Оперу не берет?

Автор: dm9 10.5.2005, 00:09

Цитата(Aliance @ 10.5.2005, 00:21) А сорс-то не посмотреть =( Я этой фразы не понял. Error 404 был, что ли? А при чём тут тогда Цитата(Aliance @ 10.5.2005, 00:21) Красиво сделано. ??? Под Оперу 7.54 и 8-Релиз не работает. Вернее, работает, но криво. Картинки просто плавно закрываются, а не пропадают по одной штуке резко (Как и ИЕ и ФФ). Если был Error 404, сейчас всё будет ОК, только напиши, что именно было, мне это важно. Я на другой сервер перехал, но если у тебя до сих пор не обновились ДНС, это странно.

Автор: Aliance 10.5.2005, 00:29

Нет, просто просмотр ввиде HTML был недоступен. Только если сохранить страничку =/

Автор: dm9 10.5.2005, 00:33

Эээ... Кого-то из нас глючит. Но я, вроде, свои исходники не имею обыкновения скрывать Может, дело в том, что я не прописал <html>, <body> ? Сейчас всё нормально?

Автор: Aliance 10.5.2005, 00:46

У меня самого такое иногда случаеЦЦа - почему незнаю =( Нет, щас все равно неработает =( сам попробуй...

Автор: dm9 10.5.2005, 00:50

Цитата(Aliance @ 10.5.2005, 01:46) сам попробуй Opera 8 Release - OK Firefox 1.0.3 - OK IE 6 - OK

Автор: Aliance 10.5.2005, 01:17

IE 6. Невозможно просмотреть код HTML. Скрин:

Автор: Urod 10.5.2005, 01:24

Цитата(dm9 @ 6.5.2005, 21:18) Главное, грамотно разрезать картинку на несколько частей. dm9 Вроде грамотно порезала, т.е. аккуратно. Но у меня между картинками появились зазоры, из-за которых вся лента не влезаетс в строку. Параметры cellspacing="0" cellpadding="0" - не помогают. Как убрать эти зазоры?

Автор: Aliance 10.5.2005, 01:29

Цитата(Urod @ 10.5.2005, 02:24) Как убрать эти зазоры? Нужна разметка картинок. "зазоры" могут появлятся из-за переноса, т.е. нужно писать НЕ так: Код <img src=""...> <img src=""...> <img src=""...> А так: Код <img src=""...><img  src=""...><img src=""...>

Автор: Urod 10.5.2005, 01:45

Aliance Свою неправоту я умею признавать: ты дпл дельный совет. СПАСИБО тебе за это! Но я вот что-то не поняла: я изначально исходила из размера ширины строки 1100 px, а сейчас у меня этот размер составляет 100%, и Дрим по умолчанию пишет 1040 px, следовательно, картинка не влезает. Откуда он взял эти 1040 px?????????????

Автор: Aliance 10.5.2005, 01:51

Ниразу не пользовался им, и тебе не советую. Кроме блокнота и ооочень изредка 1st Page ничем не пользуюсь. Хотя недавно встала проблема отсутствия редактора - я свой написал 8))) Ну это я отклонился от темы... Итак, не советую ставить что-либо больше чем 800 (хотя поидеи 640),т.к. 800*600 тогда в пролете что не есть гут. Ставь 100%...

Автор: Urod 10.5.2005, 01:59

1 Я сделал так: Код <div style="height: 100px; overflow: hidden;"><img src="../Graphic/Top_1_krovlya1.jpg" alt="" /><img src="../Graphic/Top_1_krovlya2.jpg" alt="" /><img src="../Graphic/Top_1_krovlya3.jpg" alt="" /><img src="../Graphic/Top_1_krovlya4.jpg" alt="" /><img src="../Graphic/Top_1_krovlya5.jpg" alt="" />   </div> При более низком разрешении экрана, у меня с этой картинкой (которая остоит из 5 картинок) происходит следующее: первые три картинки остаются на месте, а две последние сплзают вниз (под первые три) при этом справа от первых трех просто отсается пустое место (предназначенное для двух последних картинок). Это что такое получилось-то? 2 И появилась новая проблема: у меня в главной ячейке (т.е. где собственно вся информация) в качесве фона вставлена картинка. Так вот при измене разрешения экрана вся страничка (т.к. она не умещается в ширину) соответственно вытягивается вниз. И моя фоновая картинка тоже!!!! Но у нее есть свой размер по высоте, и как следствие, она начинает дублироваться снизу. Можно ли задать ей какой-то параметр, который будет ее растягивать вниз при каких-либо манипуляциях с экраном (например, изменением разрешения монитора) ? Добавлено @ 02:01 Цитата(Aliance @ 10.5.2005, 01:51) Ставь 100%... Куда ставить-то? Код <table border="0" width="100%" cellspacing="0" cellpadding="0">         <tr  cellspacing="0" cellpadding="0" >           <td bgcolor="#7C93B3">           <div style="height: 100px; overflow: hidden;"><img src="../Graphic/Top_1_krovlya1.jpg" alt="" /><img src="../Graphic/Top_1_krovlya2.jpg" alt="" /><img src="../Graphic/Top_1_krovlya3.jpg" alt="" /><img src="../Graphic/Top_1_krovlya4.jpg" alt="" /><img src="../Graphic/Top_1_krovlya5.jpg" alt="" />           </div>           </td>         </tr>       </table> У меня вроде итак стоит

Автор: Urod 10.5.2005, 02:14

В общем, я так понимаю, что при изменении разрешения моя картинка (нарезанная на 5 маленьких картинок) просто не умещается полностью, и соответственно отображает только то, что влезает: первые три картинки (а отсальные ПОЛНОСТЬЮ уже не умещаются, и поэтому сползают вниз в виде маленькой полосочки). Что делать?

Автор: dm9 10.5.2005, 02:31

Чё-то меня сейчас думать ломает особо сильно, но навскидку вот тебе: поставь высоту дива не 100px, а высоту твоей картинки...

Автор: Urod 10.5.2005, 02:39

Не, не помогло А в чем идея описанного тобою примера? Я так понимаю, что картинка в принципе не влезит при уменшении разрешения экрана, т.к. она станет больше по ширене, чем ширина экрана. А подстраивать под ширину ячейки (куда она вставлена) картинка не собиирается (как я поняла). Добавлено @ 02:43 А по поводу второй проблемы... Есть решение?

Автор: dm9 10.5.2005, 03:15

Поставь не overflow: hidden, а overflow: auto, тогда поймёшь идею сразу Сохрани сначала мой первый пример и замени там это. Потом у себя замени, посмотри различия, подумай

Автор: Aliance 10.5.2005, 10:15

Цитата(Urod @ 10.5.2005, 02:59) Я сделал так: Сделал или сделала? Цитата(Urod @ 10.5.2005, 02:59) height: 100px; ИМХО, убери это вообще. Цитата(Urod @ 10.5.2005, 02:59) Можно ли задать ей какой-то параметр, который будет ее растягивать вниз при каких-либо манипуляциях с экраном (например, изменением разрешения монитора) ? Да, Код background-repeat: [ norepeat | repeat-x | repeat-y ]; Цитата(Urod @ 10.5.2005, 02:59) Куда ставить-то? Туда, где у тебя 1100

Автор: dm9 10.5.2005, 10:36

Цитата(Aliance @ 10.5.2005, 11:15) ИМХО, убери это вообще. А это смотря чем мы занимаемся. Если пытаемся скачками убирать картинки, то твоё имхо неверное...

Автор: PARROT 10.5.2005, 23:45

В продолжении своей темы: фотопленка, сообщаю, что все прошло почти успешно, пленка растягивается и стягивается без скрола, единственное с чем мне не справится сейчас (наверно просто уже торможу, ночь), так это, лента никак не хочет вставать посередине кассеты с пленкой, ее почему-то тянет к верху. Вот код: Код <html> <head> </head> <body topmargin="0" leftmargin="0" bottommargin="0"> <table width=100% cellpadding=0 cellspacing=0> <tr> <td width=64> <table cellpadding=0 cellspacing=0 width=64> <tr> <td><img src=pic/top_film.gif></td> </tr> <tr> <td><img src=pic/mid_film.gif></td> </tr> <tr> <td><img src=pic/36k_film.gif></td> </tr> <tr> <td><img src=pic/bot_film.gif></td> </tr> </table> </td> <td aling=absmiddle background=pic/film.gif style="background-repeat:repeat-x;">&nbsp;</td> <td  height=60px width=60px><img src=pic/end_film.gif></td> </tr> </table> </body> </html> Почти все просто.

Автор: dm9 10.5.2005, 23:51

Ой, слушай, так не хочется в коде разбираться детально. Давай с картинками, а? Цитата(PARROT @ 11.5.2005, 00:45) aling=absmiddle Такое точно есть? Знаю, есть align=center, есть valign=middle... Вот цитата из спецификации... Цитата align = left|center|right|justify Добавлено @ 23:51 Тем более aliGN, а не aliNG, как у тебя.

Автор: PARROT 11.5.2005, 00:09

Цитата(dm9 @ 10.5.2005, 23:51) Тем более aliGN, а не aliNG, как у тебя. С картинками, так с картинками. Это потому как мозг уже спит, а руки клаву ищут. Все равно, середина как приклеенная кверху висит. И никуда.

Автор: dm9 11.5.2005, 00:20

Так что, где картинки-то?

Автор: PARROT 11.5.2005, 07:44

Как все картинки только сюда влезут.... Приду на работу, выложу на сервер и дам ссылку.

Автор: Urod 11.5.2005, 08:46

Вот описание моего BODY стиля CSS. Сюда я вставила описание бэкграунда, но я-то описывала бэкграунд конкрентой ячейки (что указано в строке background-image: url '../Templates/Doma_gory/Fon_fasad.jpg');), а у меня растягиве6тся бэкграунд всей странички! Что тут не так? Код BODY {   scrollbar-arrow-color:#FFDEAD;   scrollbar-shadow-color:#B5C2D5;   scrollbar-face-color:#B5C2D5;   scrollbar-highlight-color:#FFDEAD;   scrollbar-darkshadow-color:#FFDEAD;   background-image: url('../Templates/Doma_gory/Fon_fasad.jpg');   background-repeat: repeat-x;   background-repeat: repeat-y;   } Код <td style="background-image: url('../Templates/Doma_gory/Fon_fasad.jpg')" valign="top">

Автор: Urod 11.5.2005, 09:34

Я в шоке : вот что у меня получилось со страничкой, когда я попыталась растянуть фон по горизонтали и вертикали + сделать каринку шапки + поставить Код <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> наверх кода Вот ссылка на мою страничку http://www.webfile.ru/297030 ПОМОГИТЕ!!!!!!

Автор: dm9 11.5.2005, 09:38

Цитата(Urod @ 11.5.2005, 09:46)   background-image: url('../Templates/Doma_gory/Fon_fasad.jpg');   background-repeat: repeat-x;   background-repeat: repeat-y; Ну так, наверное, это не для body надо делать, а для той ячейки, в которой тебе нужен фон. Доктайп вверху особо ни при чём...

Автор: PARROT 11.5.2005, 10:58

Вот ссылка... http://www.admin.traktora.spb.ru/lenta/zv.html

Автор: dm9 11.5.2005, 11:17

Фон всегда располагается сверху. Вот решение: Код <html><head></head> <body topmargin="0" leftmargin="0" bottommargin="0"> <table cellpadding="0" cellspacing="0" width="100%"> <tbody><tr> <td width="64"> <table cellpadding="0" cellspacing="0" width="64"> <tbody><tr> <td><img src="zv_files/top_film.gif"></td> </tr> <tr> <td><img src="zv_files/mid_film.gif"></td> </tr> <tr> <td><img src="zv_files/36k_film.gif"></td> </tr> <tr> <td><img src="zv_files/bot_film.gif"></td> </tr> </tbody></table> </td> <td valign="center"><div style="height: 60px; width: 100%; background-repeat: repeat-x; background-image: url(zv_files/film.gif);">&nbsp;</div></td> <td height="60" width="60"><img src="zv_files/end_film.gif"></td> </tr> </tbody></table> </body></html>

Автор: PARROT 11.5.2005, 11:54

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

Автор: dm9 11.5.2005, 12:14

Вот полностью грамотное решение. Код <html> <head></head> <body topmargin="0" leftmargin="0" bottommargin="0"> <table cellpadding="0" cellspacing="0" width="100%">     <tr>         <td width="37">             <img src="zv_files/top_film.gif"><br />             <img src="zv_files/mid_film.gif"><br />             <img src="zv_files/36k_film.gif"><br />             <img src="zv_files/bot_film.gif"><br />         </td>         <td valign="middle">             <div style="height: 60px; width: 100%; background-repeat: repeat-x; background-image: url(zv_files/film.gif);">&nbsp;</div>         </td>         <td valign="middle" width="60">             <img src="zv_files/end_film.gif"><br />         </td>     </tr> </table> </body> </html> Добавлено @ 12:15 Ну, может, пара мелочей не на 100% грамотна, а на 95% Добавлено @ 12:16 Картинки <img src="zv_files/top_film.gif"><br /> <img src="zv_files/mid_film.gif"><br /> <img src="zv_files/36k_film.gif"><br /> <img src="zv_files/bot_film.gif"><br /> имхо, лучше соединить в одну. Добавлено @ 12:17 А, и там плёнка относительно кассеты чуть-чуть неграмотно лежит. Для этого можно немножко подправить высоту кассеты - самое простое решение такое.

Автор: PARROT 11.5.2005, 12:52

Да! Это считается из разряда сложных? Нас так не учили. Про div вообще никакого разговора не велось.

Автор: dm9 11.5.2005, 12:55

Ой, сложно-не сложно, я не знаю Насчёт дива - надо понимать, зачем он сделан, чем отличается от спана и где используется. А так - опыт... чтение спецификаций. Логическое домысливание. Интерес

Автор: PARROT 11.5.2005, 12:58

Где почитать про него? Интерес проснулся

Автор: Urod 11.5.2005, 13:25

Вставила вот так: Код <td style="background-repeat: repeat-x;  background-repeat: repeat-y; background-image: url('../Templates/Doma_gory/Fon_fasad.jpg'); valign="top"> Безрезультатно: ни по вертикали, ни по горизонталми не вытягивается фоновая картинка Она статична. Что не так? Полагаю, что решение несложное, но мне не доводилось с этим работать, и поэтому я сосвем не знаю, куда эту связку вставить

Автор: Urod 11.5.2005, 19:33

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

Автор: Aliance 11.5.2005, 19:42

Должен с кавычками

Автор: Urod 11.5.2005, 20:16

AlianceОк! А эти репиты куда тыкать-то? Постом выше не посмотришь - у меня там где-то ошибка

Автор: Urod 11.5.2005, 20:31

СТОП! Я уже куда-то в дебри лезу. Мне необходимо сделать динамичными две верхние строки страницы (эти строки содержат картинки => мне надо применить некоторые приемы работы с картинками) Вот мои вопросы по страничке, которые я никак не могу решить (ссылка на страничку приведена выше): 1. Рисунок-шпка (он же логотип) необходимо сделать динимичным, т.е. чтобы он подстаивался под размеры разрешения экрана. 2. Под этим рисунком-логотипом есть меню, состоящее из, в принципе, ленты. Каждый кусочек этой ленты - есть пункт меню или просто пустое место (в смысле без слов). Я применяла предложенные Вами методы, но ни в одном вопросе я не пришла к успеху. Я уже себе голову сломала Может, посмотрите по ссылке?

Автор: dm9 11.5.2005, 20:31

Цитата(Aliance @ 11.5.2005, 20:42) Должен с кавычками Не столько категорично Спецификация утверждает, что это всё равно, опыт тоже. Читать тут. http://loc.stack.ru/projects/CSS2/syndata.html#x44 Цитата(Urod @ 11.5.2005, 14:25) background-repeat: repeat-x;  background-repeat: repeat-y; Ты 2 раза задала 1 и тот же стиль. Второй перекрывает первый. Есть три значения: repeat-x, repeat-y, repeat. Твой случай третий. Ну, ещё no-repeat. Читать тут. http://www.webber.ru/articles/article.html?article_id=7

Автор: Urod 11.5.2005, 20:46

Вот: Код <td {background-repeat: repeat; background-image: url../Templates/Doma_gory/Fon_fasad.jpg);}> Или вот: Код <td style="width: 100%; background-repeat: repeat; background-image: url(../Templates/Doma_gory/Fon_fasad.jpg);"> Не получается Картика не растягивается с уменьшением разрешения экрана Вообще у меня подозрени, что репит не для этих целей поможет, т.к. мне хотелось бы, чтобы картинка (фоновая) растягивалась/сужалась в соответствии с разрешением монитора, а репит, как я поняла, подходит для растяжения картинки в дублирующихся местах. Например, это решает вопрос с меню.

Автор: dm9 11.5.2005, 20:51

Цитата(PARROT @ 11.5.2005, 13:58) Где почитать про него? Интерес проснулся Ой... В общем, суть такая. Есть блочные элементы, и есть inline-элементы (не знаю, как по-русски, близкие по значению слова: поточный, линейный). Поточные располагаются один ЗА другим. Пример - картинки. Если ты напишешь 10 тэгов <img> подряд, картинки расположатся слева направо, одна ЗА другой. Блочные же располагаются один ПОД другим. Пример - таблицы. Если ты напишешь подряд 10 таблиц, они будут расположены одна ПОД другой. Как бы блоками. ВСЕ элементы делятся на блочные и поточные (inline). Блочные: table, li, form, p, div, др. Поточные: img, простые буквы - тоже поточные элементы, input, span, др. Это не фатально, это так по умолчанию. Любой блочный элемент можно сделать поточным, и наоборот. Блочный: стиль "display: block", поточный: "display:inline". Часто применяется, например, перевод формы (тэг form), которая по умолчанию является блоком, в inline-вид. Блочный - он как бы всегда прямоугольный, а набор inline-элементов может состоять из нескольких строк, как выделение текста. Теперь о div и span. Иногда нужно применить какой-то стиль к блоку или потоку элементов (ну, термины неофициальные, понятно, о чём я говорю). Тогда используется соответственно либо <div class="my">...</div>, либо <span class="my">...</span>. Иногда бывает нужно просто создать блок, например, для того, чтобы туда запихнуть фоновое изображение и разместить его по центру. Тогда используем div. Если надо выделить часть текста красным цветом, пишем <span style="color:red">my_text</span>, и тут неверно было бы применить div, так как это оказался бы блок, и этот "my_text" стал бы блоком, то есть весь последующий текст пошёл бы ниже, а не справа от my_text (ЗА my_text). Вот, собственно, суть... Ещё вот этот пункт спецификации стоит просмотреть: http://pyramidin.narod.ru/html401/global.html#h-7.5.4

Автор: Aliance 11.5.2005, 20:52

Вообще убери repeat, он по умолчанию ставиться в обе плоскости. Цитата(Urod @ 11.5.2005, 21:16) А эти репиты куда тыкать-то? Постом выше не посмотришь - у меня там где-то ошибка Ты спросила про кавычка - я ответил =) dm9 Хз, на практике может да. Но, имхо, по теории нужно ставить.

Автор: dm9 11.5.2005, 20:57

Цитата(Urod @ 11.5.2005, 21:46) <td {background-repeat: repeat; background-image: url../Templates/Doma_gory/Fon_fasad.jpg);}> Эээ... а что это за запись такая? ) Что там в фигурных скобках? И url неправильно написал. Синтаксис такой: background-image: url(my/url). Добавлено @ 20:59 Цитата(Aliance @ 11.5.2005, 21:52) Но, имхо, по теории нужно ставить. Ну я же написал выше, и ссылку дал. Никакого имхо. Что в спецификации написано, читал? Ссылки для кого даю, себе что ли?

Автор: Urod 11.5.2005, 21:27

Цитата(dm9 @ 11.5.2005, 20:57) Цитата(Urod @ 11.5.2005, ) <td {background-repeat: repeat; background-image: url../Templates/Doma_gory/Fon_fasad.jpg);}> Эээ... а что это за запись такая? ) Сама в шоке Я отредактировала предыдущий мой пост. Я так вставляю, как там в кодах, но, увы... Там так: Код  <td style="width: 100%; background-repeat: repeat; background-image: url(../Templates/Doma_gory/Fon_fasad.jpg);">

Автор: Aliance 11.5.2005, 21:47

ставь на tr... убери background-repeat поставь кавычки в url() Если не заработает - я пас

Автор: Urod 11.5.2005, 21:57

Цитата(Aliance @ 11.5.2005, 21:47) ставь на tr... Да ставила уже, что я только с ним уже не делала В обем так, думаю, буду по очереди задачи описывать. Вот! Значит так, сначала про меню: Сделала фон ячейке. В эту ячейку слева вставила 3 кнопки, а справа хочу вставить вда куочка-картинки. А эти два кусочка-картинки не хотят ставиться справа даже при алинге=райт (они просто переностятся вниз, под фон). Даю код: Код <tr>               <td style=" height:40 px; width: 100%; background-repeat: repeat-x; background-image: url('../Templates/Doma_gory/title_continue2.jpg');"><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_nadpis_fasad.jpg"  /><img src="../Templates/Doma_gory/title_continue1.jpg"  /></td> </tr> Добавлено @ 22:01 Собственно картинки "title_continue_nadpis_fasad.jpg" и "title_continue1.jpg" хочу вправый конец ячейки задвинуть.

Автор: Aliance 11.5.2005, 22:08

Цитата(Urod @ 11.5.2005, 22:57) вда куочка-картинки Цитата(Urod @ 11.5.2005, 22:57) алинге=райт

Автор: Urod 11.5.2005, 22:15

1. Два кусочка-картинки, т.е. кусочки-картинки (у меня много опечаток) 2. align=right Ну а на остальные вопросы я забью, т.к. так и не нашла на них ответа + мне что-то совсем не понравилась идя того, что мои таблички и пр. элементы сайта будут уменьшаться/увеличиваться в зависмости от разрешения монитора пользователя. Посмотрела - ерунда полунечитабельная получается, фууу А вот про меню ОЧЕНЬ прошу помочь. Добавлено @ 22:24 А точно картинку можно удлиннять с помощью репита? У меня из-за большого кол-ва текста (он расположен на фоне этой картинки) самого фона внизу не хватило (там просто верх от вона размножился). Так вот репит поможет?

Автор: Aliance 11.5.2005, 22:33

Например, глянь чуть ниже, на строчку "Быстрый ответ" - это td с картинкой шииной 1 пиксель, но разширенной по оси икс. Четкой задачи не понял =/ ЗЫ: посмотри, мы уже 4 страницы наделали. Разве это читабельно? На каждый вопрос создай отдельную тему. Не спеши, пиши проверяя посты. Старайся изложить мысль так, чтобы все ее поняли и будет тебе счастье

Автор: Urod 11.5.2005, 22:38

Все открываю новую тему: тут и вправду черт ноги сломает! ЗЫ Одна, кастати, дублируется гостем

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)