guvatara

увы картинка не открывается. может вы сохраните ее в jpg

Исходя из банальной психологии (думаю вы о ней слышали) научить (или скорее переучить) проще именно того у кого нет еще опыта и приобретенного багажа лагов, багов и фиксов. Если у человека в голове только теория, то там столько места, которое займет практика. А если у человека за плечами огромный багаж опыта и он уже привык пользоваться техникой выученной до автоматизма, но актуальность этой техники уже давно в прошлом, то извините но в 98% случаев он не сможет полностью перестроиться на новые рельсы. Т.к. обучаемость человека новому снижается с возрастом и количеством информации которое он уже усвоил. Да и стандарты придумывали не на коленке попивая пивко у завалинки. Да я согласен, что у молодых юношеский максимализм и им кажется что они боги в кодинге, но поверьте мне, они гораздо быстрее снимают лавровый венок и берут молоток для получения столь ценного для них опыта, чем люди с диким опытом или что еще хуже имеющие в прошлом признание и известность в своих кругах. Так что тут скорее спор новой реформаторской школы и консервативно-практичного подхода. Оба хороши по своему и оба плохи по своему. А задача программиста найти ту самую золотую середину и решить для себя каким путем идти ему.

а не проще прибить футер с бэкграундом к низу абсолютным позиционированием? вот пример, думаю при должной сноровке его можно использовать http://webtest.chebykin.ru/articles/footer/

Сегодня утром меня жестоко оскорбили, мне поставили висту с осликом 7 (которого я ненавижу всеми фибрами и мыбрами). Ослик 6 само сабой виста не любит, поэтому мне прибавилось еще куча проблем с тем, а как бы подружить висту и ослик 6. Единственая идея это отдельная виртуальная машинка. Короче я в дипрессии. Более глупой ОС я в жизни не видел. Она подстать ослику 7.

в теге текст выравнивается всегда по центру, но сама высота тега зависит от размера шрифта по умолчанию и падингов с маргинами по умолчанию для каждого браузера, советую использовать line-height и через него задать высоту тега чтоб текст там вертикально позиционировался или как написано выше используйте маргины и падинги.

вот и думай после этого какими руками собирали ослов.

padding - это внутренний отступ и соответсвенно тянет и фон, а margin это внешний отступ и фон он не тянет. А тут можно просто добавить как написано выше маргин внутреннему блоку, чтоб он растягивал фон.

жестоко. Меня такой цвет просто убивает. Но кому то может понравиться. Не стал дожидаться полной загрузки сайта.

присвойте диву параметр display:table обычно в нем проблема у оперы. .container { background-color: #FFFFFF; height: 100%; margin: 0 15px; [b]display:table;[/b] }

диву с картинкой right:0px; Как я понял он должен быть всегда справа. Опера (как и остальные) очень придирчива к указаниям для слоев. Поэтому советую ставить размеры для блоков, чтоб она понимала. Да и используйте свойство display. Очень сильно лечит ее.

Мне он тоже понравился

Сами только что перечислили недостатки. Вкладки мне лично все равно что они есть что их нет. Сам дизайн - это не более чем шаблон( видел на многих блогах) неоптимизированный под возможные изменения (баннер убивает шапку). Использование смены цветов кому как, на e107.8 есть стандартные шаблон такого типа, но там уже внесено место под баннер. Чтоб не быть голословным вот стандартный шаблон e107.8 http://www.guvatara.ru На счет чуда с банером - сунул скрипт при этом не подумав проверить во всех браузерах, первая ошибка веб-дизайнера. У меня еще стоит SeoQuake для FireFox, она добавляет отбой в шапке на 15-20 пикселей и сразу видно где и как делалась шапка. Так что реального дизайна там и не было, был взят шаблон и вставлена картинка в шапку и не более того. А по хорошему устраивать религиозные войны из-за дизайна. По-моему скучно и пустая трата времени.

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

По просьбам трудящихся на виртуальной ниве, даю ссылку на свой любимый дизайн сайта. http://www.webdesignersindia.net/ этот сайт мне кажется удачным в плане цветов (хотя я бы использовал беледно серые тона вместо белых, глаза меньше устают читать текст).

Оффтоп но все же. Мой глаза такой дизайн не выдерживают, слишком много белого, загорать можно от экрана на котором такой дизайн. Чтоб не был оффтопом полным, вот мои любимые места в сети. http://webmascon.com/ http://webtest.chebykin.ru/ - идеально для начинающих (куча проблем может даже не возникнуть если внимательно прочитать статейки). http://xmlhack.ru/

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

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

Суть вопроса весьма странна. Есть двух колоночный шаблон с шапкой и футером прибитым к низу окна. Причем и шапка и футер тянутся в ширь. Но вопрос не в этом. Одна и колонок это меню и имеет постоянную ширину. А вторая колонка должна тянуться, но при этом вертикально центрирована в оставшейся справа свободной части экрана. Короче ее ширина должна составлять около 80% от свободной области справа. Проблема в том что в разных броузерах по разному понимаются некоторые приемы реализации данного изврата дизайнера. Может подскажите хотя бы по какой дороге идти чтоб найти решение. P.S. нужно чтоб все это было чисто в дивах. соббственно сам код страницы <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Untitled Document</title> <link href="script/style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- h1 { font-size: 16px; } --> </style></head> <body> <div class="main"> <!-- Header --> <div id="min-width"> <div class="minwidth"> <div class="container"> <div class="top_r"> <div class="top_l"></div> </div> </div> </div> </div> <!-- End Header --> <!-- Main Content --> <div class="main_content"> <div class="menu_side"> <div class="menu_side_top"> </div> <div class="menu"> <p>Новость1</p> <img src="i/perehod_menu.jpg" alt="menu_per" width="260" height="11" /> <p>Новость1</p> <img src="i/buttom_menu.jpg" alt="menu_buttom" width="260" height="10" hspace="0" vspace="0" border="0" /></div> </div> <div class="wa"> <div class="wa_border"> <div class="wa_h"> <h1 class=" wa_h1">Заголовок™</h1></div> <div style="display:block; padding-bottom:15px;"> <p>ормлоралорплавфрловрл</p> <p>овырлповырплаврл</p> </div> </div> <div class="wa_but_dev"></div> </div> </div> <!-- End Main Content --> </div> <!-- Fotter --> <div id="min-width_but"> <div class="minwidth"> <div class="container_but"> <div class="buttom"><img src="i/but_r.jpg" alt="but_r" width="372" height="54" hspace="0" vspace="0" border="0" /></div> </div> </div> </div> <!-- End Fotter --> </body> </html> css /* CSS Document */ * { margin: 0; padding: 0; /* стандартное правило для удаления всех посторонних отступов */ } html { height: 100%; /* чтобы элемент html распространялся на всю высоту окна браузера */ } body { position: relative; /* чтобы потомки элемента body позиционировались по отношению к body */ height: auto !important; /* для Firefox и Opera ? чтобы не сработало следующее объявление */ height: 100%; /* для IE (работает некорректно, что обеспечивает нужный результат) */ min-height: 100%; /* для Firefox и Opera (в IE 7 делает то же, что предыдущее объявление) */ } body { background-image:url(../i/top_c_plash.jpg); background-position:top; background-repeat:repeat-x; color:#242730; font:Tahoma; } .main { width:100%; height:100%; display:table; min-height:100%; } .gainlayout { min-height: 0; } .top_r { background-image:url(../i/top_r.jpg); background-position:right top; width:100%; height:253px; background-repeat:no-repeat; } .top_l { float:left; height:253px; width:500px; background-image:url(../i/top_l.jpg); background-repeat:no-repeat; } .main_content { display:table; min-width:972px; width:100%; margin-bottom:54px; } .menu_side { display:table; float:left; width:270px; } *html .menu_side { display:block; height:auto; } .menu_side_top { width:262px; height:114px; background-image: url(../i/main_l.jpg); background-repeat:no-repeat; } .menu { background-image:url(../i/menu_bg.jpg); background-repeat:repeat-y; width:260px; margin-left:2px; display:block; display:table; } .menu p { color:#242730; margin-left:5px; background-image:url(../i/menu_div.jpg); background-position:bottom left; background-repeat:no-repeat; padding-left:22px; height:22px; margin-bottom:65px; } * html .menu p { margin-left:5px; background-image:url(../i/menu_div.jpg); background-position:bottom left; background-repeat:no-repeat; padding-left:22px; padding-bottom:2px; } .wa { display:table; min-width:700px; margin-bottom:25px; width:72%; } .wa_border { border-left:#CCCCCC 1px solid; border-right:#CCCCCC 1px solid; border-bottom:#CCCCCC 1px solid; background-color:#f1edea; margin-right:25px; display:block; } .wa_h { background-image: url(../i/wa_top_s.jpg); height:23px; background-repeat: repeat-x; width:auto; display:block; } .wa_h1 { background-image:url(../i/wa_top.jpg); background-repeat:no-repeat; padding-left:25px; } .wa p { font:Tahoma; padding-left:19px; padding-right:10px; font-size:14px; color:#242730; } .wa_but_dev { height:1px; border-bottom:#000000 1px solid; font-size:1px; width:auto; margin-right:25px; } *html .wa { padding-left:270px; display: block; width:auto; } .buttom { float:right; width:372px; height:54px; font-size:1px; } /*для всех броузеров что понимают min-width */ #min-width { width:100%; min-width:972px; height:253px; display:inline-block; background-image:url(../i/top_c_plash.jpg); background-repeat:repeat-x; background-position:top; } #min-width_but { position:absolute; bottom:0px; margin-top:-54px; width:100%; min-width:972px; height:54px; display:inline-block; background-image: url(../i/but_plash.jpg); background-repeat:repeat-x; background-position: bottom; } /* для IE */ * html .minwidth { border-left:972px solid #fff;/*min-width*/ position:relative; float:left; z-index:1; } * html .container { margin-left:-960px; /*-min-width*/ position:relative; float:left; z-index:2; background-image:url(../i/top_c_plash.jpg); background-repeat:repeat-x; background-position:top; } * html .container_but { margin-left:-960px; /*-min-width*/ position:relative; float:left; z-index:2; background-image: url(../i/but_plash.jpg); background-repeat:repeat-x; background-position: bottom; }

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

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

Все таки почему то мой код не хочет работать. Подскажите где я ошибся. <body style="height="100%";"> <div id="pup1"> <div id="pup2"> <div style="height=300px;"> </div> <div id="content">Любой текст</div> </div> </div> </body> var height = document.getElementById('content').offsetHeight; var bodyheight = (document.body.clientHeight - 300) + "px"; if (/MSIE (7).+Win/.test(navigator.userAgent)) { if ( height < bodyheight) { document.getElementById('pup1').style.height = "100%"; document.getElementById('pup2').style.height = "100%"; } else { document.getElementById('pup1').style.height = "auto"; document.getElementById('pup2').style.height = "auto"; } }

Я убью ослика, но ни один из примеров по этой ссылке не помогли. ..................... Все решил проблему. спасибо

Я тут почитал вопрос ниже, но увы он мне не подошел. Суть вопроса: Есть шапка <!-- body { margin: 0; padding: 0; background-image:url(i/top_c_plash.jpg); background-position:top; background-repeat:repeat-x; } --> <div style="width:100%; min-width:972px; height:253px; display:inline-block;"> <div style=" float:left; height:253px; width:500px; display: inline-block;"><img src="i/top_l.jpg" width="500" height="253" alt="top_l" /></div> <div style=" float:right; height:253px; width:468px; display:inline-block;"><img src="i/top_r.jpg" alt="top_r" width="468" height="253" /></div> </div> Пытаюсь добиться иллюзии резиновости шапки. Но подлый Ослик не хочет понимать этого. (в других броузерах min-widht понимается как нужно) и переносит второй блок на следующую строку при уменьшении окна. Можно ли что то дать ослику чтоб он не капризничал. Распорку не хочется ставить, да и таблицы тоже не хочется использовать.

спасибо огромное Просто я не мог разобраться что к чему в том коде. теперь ясно.