Помощник
|
резиновый дизайн |
ruscadet
|
Сообщение
#1
|
||
|
|
||
|
|||
Nightfly_hb |
19.6.2009, 14:23;
Ответить: Nightfly_hb
Сообщение
#2
|
|
[PHP]<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr> <td background="bg.png"><a href="index.php"><img src="logo.png" width="455" height="107" align="left" border="0"/></a><img src="logo2.png" width="466" height="107" align="right"/></td> </tr> </table>[/PHP]В этом примере шапка состоит из 2х картинок (слева, и справа). Посередине замощается фоном. Левая картинка имеет ссылку на индекс. Вроде вполне наглядно. |
|
|
ruscadet
|
Сообщение
#3
|
|
Sandman, т.е., как я понял, нужно просто в тэг table прописать атрибут width="100%" ?
|
|
|
ruscadet
|
Сообщение
#4
|
|
вот код одной из страничек и сама страница с картинками. резалась на слайсы в Image Ready
<html> если можно, просто ткните, плиз, пальцем, где и что нужно сделать
<head> <title>Art-Сувенир || Главная</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body bgcolor="b8c9c3" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table id="main" bgcolor="b8c9c3" width="990" height="792" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="51" height="684" rowspan="39"> <img src="images/spacer.gif" width="51" height="684" alt=""></td> <td colspan="8" rowspan="4"> <img src="images/main_02.jpg" width="239" height="115" alt=""></td> <td width="67" height="90" colspan="5" rowspan="3"> <img src="images/spacer.gif" width="67" height="90" alt=""></td> <td colspan="3" rowspan="3"> <img src="images/main_04.jpg" width="35" height="90" alt=""></td> <td width="106" height="90" colspan="7" rowspan="3"> <img src="images/spacer.gif" width="106" height="90" alt=""></td> <td colspan="2" rowspan="8"> <img src="images/main_06.jpg" width="41" height="168" alt=""></td> <td width="125" height="168" colspan="5" rowspan="8"> <img src="images/spacer.gif" width="125" height="168" alt=""></td> <td rowspan="15"> <img src="images/main_08.jpg" width="17" height="270" alt=""></td> <td rowspan="10"> <img src="images/main_09.jpg" width="11" height="185" alt=""></td> <td width="55" height="185" colspan="3" rowspan="10"> <img src="images/spacer.gif" width="55" height="185" alt=""></td> <td colspan="2" rowspan="17"> <img src="images/main_11.jpg" width="23" height="307" alt=""></td> <td width="86" height="46" colspan="6"> <img src="images/spacer.gif" width="86" height="46" alt=""></td> <td> <img src="images/main_13.jpg" width="46" height="46" alt=""></td> <td width="87" height="46" colspan="3"> <img src="images/spacer.gif" width="87" height="46" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="46" alt=""></td> </tr> <tr> <td width="41" height="38" colspan="4"> <img src="images/spacer.gif" width="41" height="38" alt=""></td> <td colspan="5" rowspan="11"> <img src="images/main_16.jpg" width="166" height="185" alt=""></td> <td width="12" height="745" rowspan="40"> <img src="images/spacer.gif" width="12" height="745" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="38" alt=""></td> </tr> <tr> <td colspan="4" rowspan="3"> <img src="images/main_18.jpg" width="41" height="59" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="6" alt=""></td> </tr> <tr> <td width="14" height="70" rowspan="4"> <img src="images/spacer.gif" width="14" height="70" alt=""></td> <td colspan="10" rowspan="3"> <img src="images/main_20.jpg" width="146" height="59" alt=""></td> <td width="48" height="153" colspan="4" rowspan="10"> <img src="images/spacer.gif" width="48" height="153" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="25" alt=""></td> </tr> <tr> <td width="168" height="45" colspan="6" rowspan="3"> <img src="images/spacer.gif" width="168" height="45" alt=""></td> <td rowspan="3"> <img src="images/main_23.jpg" width="24" height="45" alt=""></td> <td width="47" height="45" rowspan="3"> <img src="images/spacer.gif" width="47" height="45" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="28" alt=""></td> </tr> <tr> <td width="41" height="59" colspan="4" rowspan="6"> <img src="images/spacer.gif" width="41" height="59" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="6" alt=""></td> </tr> <tr> <td width="45" height="11" colspan="3"> <img src="images/spacer.gif" width="45" height="11" alt=""></td> <td colspan="2" rowspan="8"> <img src="images/main_27.jpg" width="25" height="107" alt=""></td> <td width="76" height="107" colspan="5" rowspan="8"> <img src="images/spacer.gif" width="76" height="107" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="11" alt=""></td> </tr> <tr> <td width="138" height="18" colspan="4" rowspan="2"> <img src="images/spacer.gif" width="138" height="18" alt=""></td> <td colspan="8" rowspan="6"> <img src="images/main_30.jpg" width="160" height="83" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="8" alt=""></td> </tr> <tr> <td colspan="4" rowspan="10"> <a href="price.html"><img src="images/main_31.jpg" alt="" width="98" height="143" border="0"></a></td> <td width="68" height="75" colspan="3" rowspan="5"> <img src="images/spacer.gif" width="68" height="75" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="10" alt=""></td> </tr> <tr> <td width="66" height="506" rowspan="30"> <img src="images/spacer.gif" width="66" height="506" alt=""></td> <td colspan="3" rowspan="4"> <img src="images/main_34.jpg" width="72" height="65" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="7" alt=""></td> </tr> <tr> <td colspan="4" rowspan="7"> <a href="portfolio.html"><img src="images/main_35.jpg" alt="" width="66" height="122" border="0"></a></td> <td> <img src="images/spacer.gif" width="1" height="17" alt=""></td> </tr> <tr> <td colspan="2" rowspan="5"> <img src="images/main_36.jpg" width="13" height="78" alt=""></td> <td width="28" height="105" colspan="2" rowspan="6"> <img src="images/spacer.gif" width="28" height="105" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="29" alt=""></td> </tr> <tr> <td width="166" height="187" colspan="5" rowspan="13"> <img src="images/spacer.gif" width="166" height="187" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="12" alt=""></td> </tr> <tr> <td width="102" height="105" colspan="5" rowspan="7"> <img src="images/spacer.gif" width="102" height="105" alt=""></td> <td rowspan="7"> <img src="images/main_40.jpg" width="24" height="105" alt=""></td> <td width="106" height="13" colspan="5"> <img src="images/spacer.gif" width="106" height="13" alt=""></td> <td width="34" height="27" colspan="3" rowspan="2"> <img src="images/spacer.gif" width="34" height="27" alt=""></td> <td rowspan="2"> <img src="images/main_43.jpg" width="14" height="27" alt=""></td> <td rowspan="5"> <a href="price.html"><img src="images/main_44.jpg" alt="" width="32" height="68" border="0"></a></td> <td width="36" height="64" colspan="2" rowspan="4"> <img src="images/spacer.gif" width="36" height="64" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="13" alt=""></td> </tr> <tr> <td width="95" height="14" colspan="4"> <img src="images/spacer.gif" width="95" height="14" alt=""></td> <td colspan="4"> <img src="images/main_47.jpg" width="46" height="14" alt=""></td> <td width="66" height="14" colspan="4"> <img src="images/spacer.gif" width="66" height="14" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="14" alt=""></td> </tr> <tr> <td width="61" height="78" colspan="2" rowspan="5"> <img src="images/spacer.gif" width="61" height="78" alt=""></td> <td colspan="9" rowspan="7"> <a href="services.html"><img src="images/main_50.jpg" alt="" width="137" height="111" border="0"></a></td> <td width="16" height="111" colspan="2" rowspan="7"> <img src="images/spacer.gif" width="16" height="111" alt=""></td> <td colspan="3" rowspan="3"> <a href="price.html"><img src="images/main_52.jpg" alt="" width="41" height="41" border="0"></a></td> <td rowspan="2"> <a href="portfolio.html"><img src="images/main_53.jpg" alt="" width="17" height="37" border="0"></a></td> <td> <img src="images/spacer.gif" width="1" height="10" alt=""></td> </tr> <tr> <td width="13" height="27" colspan="2"> <img src="images/spacer.gif" width="13" height="27" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="27" alt=""></td> </tr> <tr> <td colspan="5" rowspan="5"> <a href="portfolio.html"><img src="images/main_55.jpg" alt="" width="84" height="74" border="0"></a></td> <td colspan="7" rowspan="3"> <a href="portfolio.html"><img src="images/main_56.jpg" alt="" width="90" height="41" border="0"></a></td> <td width="9" height="111" rowspan="8"> <img src="images/spacer.gif" width="9" height="111" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="4" alt=""></td> </tr> <tr> <td width="41" height="70" colspan="3" rowspan="4"> <img src="images/spacer.gif" width="41" height="70" alt=""></td> <td rowspan="3"> <img src="images/main_59.jpg" width="26" height="51" alt=""></td> <td colspan="3"> <img src="images/main_60.jpg" width="72" height="13" alt=""></td> <td width="32" height="107" rowspan="7"> <img src="images/spacer.gif" width="32" height="107" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="13" alt=""></td> </tr> <tr> <td width="72" height="38" colspan="3" rowspan="2"> <img src="images/spacer.gif" width="72" height="38" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="24" alt=""></td> </tr> <tr> <td width="84" height="85" colspan="4" rowspan="6"> <img src="images/spacer.gif" width="84" height="85" alt=""></td> <td colspan="4" rowspan="3"> <a href="services.html"><img src="images/main_64.jpg" alt="" width="103" height="46" border="0"></a></td> <td width="35" height="85" colspan="2" rowspan="6"> <img src="images/spacer.gif" width="35" height="85" alt=""></td> <td colspan="3" rowspan="6"> <img src="images/main_66.jpg" width="30" height="85" alt=""></td> <td width="25" height="70" colspan="2" rowspan="5"> <img src="images/spacer.gif" width="25" height="70" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="14" alt=""></td> </tr> <tr> <td colspan="3"> <a href="techs.html"><img src="images/main_68.jpg" alt="" width="83" height="19" border="0"></a></td> <td width="15" height="19"> <img src="images/spacer.gif" width="15" height="19" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="19" alt=""></td> </tr> <tr> <td colspan="7" rowspan="3"> <a href="services.html"><img src="images/main_70.jpg" alt="" width="88" height="37" border="0"></a></td> <td width="18" height="410" rowspan="19"> <img src="images/spacer.gif" width="18" height="410" alt=""></td> <td colspan="10" rowspan="8"> <a href="techs.html"><img src="images/main_72.jpg" alt="" width="186" height="106" border="0"></a></td> <td colspan="5"> <img src="images/main_73.jpg" width="84" height="13" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="13" alt=""></td> </tr> <tr> <td width="18" height="15"> <img src="images/spacer.gif" width="18" height="15" alt=""></td> <td> <img src="images/main_75.jpg" width="24" height="15" alt=""></td> <td width="61" height="15" colspan="2"> <img src="images/spacer.gif" width="61" height="15" alt=""></td> <td width="84" height="24" colspan="5" rowspan="2"> <img src="images/spacer.gif" width="84" height="24" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="15" alt=""></td> </tr> <tr> <td colspan="4" rowspan="2"> <img src="images/main_78.jpg" width="103" height="24" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="9" alt=""></td> </tr> <tr> <td rowspan="8"> <img src="images/main_79.jpg" width="21" height="107" alt=""></td> <td width="67" height="373" colspan="6" rowspan="16"> <img src="images/spacer.gif" width="67" height="373" alt=""></td> <td colspan="2" rowspan="5"> <a href="techs.html"><img src="images/main_81.jpg" alt="" width="51" height="69" border="0"></a></td> <td width="65" height="15" colspan="4"> <img src="images/spacer.gif" width="65" height="15" alt=""></td> <td colspan="4"> <img src="images/main_83.jpg" width="59" height="15" alt=""></td> <td width="141" height="52" colspan="4" rowspan="3"> <img src="images/spacer.gif" width="141" height="52" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="15" alt=""></td> </tr> <tr> <td width="61" height="15" colspan="2"> <img src="images/spacer.gif" width="61" height="15" alt=""></td> <td colspan="6" rowspan="10"> <a href="about.html"><img src="images/main_86.jpg" alt="" width="126" height="125" border="0"></a></td> <td width="34" height="358" colspan="2" rowspan="15"> <img src="images/spacer.gif" width="34" height="358" alt=""></td> <td colspan="11" rowspan="9"> <a href="contacts.html"><img src="images/main_88.jpg" alt="" width="155" height="120" border="0"></a></td> <td> <img src="images/spacer.gif" width="1" height="15" alt=""></td> </tr> <tr> <td width="34" height="30" rowspan="2"> <img src="images/spacer.gif" width="34" height="30" alt=""></td> <td rowspan="2"> <img src="images/main_90.jpg" width="27" height="30" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="22" alt=""></td> </tr> <tr> <td colspan="3" rowspan="4"> <a href="contacts.html"><img src="images/main_91.jpg" alt="" width="80" height="46" border="0"></a></td> <td width="61" height="321" rowspan="13"> <img src="images/spacer.gif" width="61" height="321" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="8" alt=""></td> </tr> <tr> <td colspan="2" rowspan="3"> <a href="about.html"><img src="images/main_93.jpg" alt="" width="61" height="38" border="0"></a></td> <td> <img src="images/spacer.gif" width="1" height="9" alt=""></td> </tr> <tr> <td width="88" height="19" colspan="6"> <img src="images/spacer.gif" width="88" height="19" alt=""></td> <td> <a href="techs.html"><img src="images/main_95.jpg" alt="" width="26" height="19" border="0"></a></td> <td width="123" height="19" colspan="5"> <img src="images/spacer.gif" width="123" height="19" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="19" alt=""></td> </tr> <tr> <td width="66" height="285" colspan="4" rowspan="10"> <img src="images/spacer.gif" width="66" height="285" alt=""></td> <td colspan="4" rowspan="5"> <a href="techs.html"><img src="images/main_98.jpg" alt="" width="63" height="52" border="0"></a></td> <td width="108" height="285" colspan="4" rowspan="10"> <img src="images/spacer.gif" width="108" height="285" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="10" alt=""></td> </tr> <tr> <td width="61" height="168" colspan="2" rowspan="7"> <img src="images/spacer.gif" width="61" height="168" alt=""></td> <td colspan="3" rowspan="2"> <img src="images/main_101.jpg" width="80" height="27" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="9" alt=""></td> </tr> <tr> <td width="21" height="266" rowspan="8"> <img src="images/spacer.gif" width="21" height="266" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="18" alt=""></td> </tr> <tr> <td width="80" height="248" colspan="3" rowspan="7"> <img src="images/spacer.gif" width="80" height="248" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="10" alt=""></td> </tr> <tr> <td colspan="5" rowspan="2"> <img src="images/main_104.jpg" width="78" height="39" alt=""></td> <td colspan="6" rowspan="2"> <a href="contacts.html"><img src="images/main_105.jpg" alt="" width="77" height="39" border="0"></a></td> <td> <img src="images/spacer.gif" width="1" height="5" alt=""></td> </tr> <tr> <td width="126" height="126" colspan="6" rowspan="3"> <img src="images/spacer.gif" width="126" height="126" alt=""></td> <td width="63" height="233" colspan="4" rowspan="5"> <img src="images/spacer.gif" width="63" height="233" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="34" alt=""></td> </tr> <tr> <td width="35" height="199" colspan="3" rowspan="4"> <img src="images/spacer.gif" width="35" height="199" alt=""></td> <td colspan="8"> <a href="contacts.html"><img src="images/main_109.jpg" alt="" width="120" height="69" border="0"></a></td> <td> <img src="images/spacer.gif" width="1" height="69" alt=""></td> </tr> <tr> <td width="120" height="130" colspan="8" rowspan="3"> <img src="images/spacer.gif" width="120" height="130" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="23" alt=""></td> </tr> <tr> <td colspan="8"> <img src="images/main_111.jpg" width="243" height="74" alt=""></td> <td width="61" height="107" colspan="2" rowspan="2"> <img src="images/spacer.gif" width="61" height="107" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="74" alt=""></td> </tr> <tr> <td width="243" height="33" colspan="8"> <img src="images/spacer.gif" width="243" height="33" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="33" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="51" height="1" alt=""></td> [...] <img src="images/spacer.gif" width="12" height="1" alt=""></td> <td></td> </tr> </table> </body> </html> |
|
|
Nightfly_hb |
19.6.2009, 15:33;
Ответить: Nightfly_hb
Сообщение
#5
|
|
У Вас таблица фиксированной ширины. Резины так не будет. Используйте проценты. Указывайте ширину в пикселях только для столбцов, и элементов которые нужно строго зафиксировать.
зы. такого понятия как высота таблицы (height="792") в природе не существует. |
|
|
Кофейник |
19.6.2009, 18:24;
Ответить: Кофейник
Сообщение
#6
|
|
Ох какая ересь, даже я так не делаю.
Ваш код ужасен и безвкусен с какой стороны не посмотреть, ну да ладно :) Во-первых, чему нас учат в школе в первом классе, когда мы решаем задачку? Вспоминайте, вот вы пишите width="51" height="684" И что?width="51 Баранов?" height="684 кочанов капусты?" Для начала научитесь работать со стилями, такое количество атрибутов не нужно. Делайте всё резиново, а именно через проценты, так же вам придётся задать многим ячейкам тиражируемый фон, чтобы шапка тянулась. Короче изучайте CSS и будет вам счастье, а на чистом HTML вы далеко не уедете. И выложите макет шапки если можно, вдруг он и вовсе не подходит для растягивания. |
|
|
ruscadet
|
Сообщение
#7
|
|
Sandman,получается, что если я пропишу ширину таблицы и каждой ячейки 100%, то высота будет пропорционально изменяться?
Кофейник, И что? вроде как по дефолту оно в пикселях считает. а учить css из-за разового заказа - дольше выйдет.width="51 Баранов?" height="684 кочанов капусты?" разве в html никак нельзя без премудростей использования стилей реализовать? |
|
|
Nightfly_hb |
22.6.2009, 12:42;
Ответить: Nightfly_hb
Сообщение
#8
|
|
если я пропишу ширину таблицы и каждой ячейки 100% Указывайте ширину в пикселях только для столбцов, и элементов которые нужно строго зафиксировать. то высота будет пропорционально изменяться? высота таблицы зависит от размещённого в ней контента
|
|
|
ruscadet
|
Сообщение
#9
|
|
Sandman,так а мне надо, чтобы ширина и высота пропорционально менялись в зависимости от разрешения дисплея
Вы скачивали прикреплённую страничку? смотрели? |
|
|
Diablo_hb |
22.6.2009, 14:23;
Ответить: Diablo_hb
Сообщение
#10
|
|
ruscadet - пропорционально слово означает конкретное изменение размеров один относительно другого - вам сказано что нельзя это делать
высота зависит от количества контента, где тут может быть пропорциональность? |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
PRO дизайн: для маркетплейсов и соц. сетей, разработка сайтов, логотипов и иллюстраций! | 26 | OlgaMcField | 7381 | 11.3.2024, 10:13 автор: OlgaMcField |
|
Дизайн сайтов и прочей графики | 3 | sapernik | 4475 | 4.2.2024, 17:34 автор: Vikbit |
|
Качественный современный дизайн сайтов, логотипов, печатной продукции. Верстка. | 26 | zaiko | 17105 | 30.1.2024, 18:10 автор: zaiko |
|
СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое | 5 | CULA | 3243 | 19.12.2023, 18:55 автор: CULA |
|
Веб дизайн сайтов с душой | Графический дизайн На связи ежедневно без выходных с 10 до 20 по Мск |
15 | GigArt | 7515 | 11.12.2023, 13:36 автор: GigArt |
Текстовая версия | Сейчас: 19.3.2024, 11:46 |