Olekh

После тестирования сайта, появились некоторые проблемы в версиях браузеров 3-4 летней давности. Например в Opera 9.60 и Firefox 3.6.10 не корректно отображаются размеры шрифтов, в IE 6 не корректно отображаются картинки png. Стоит ли делать правки под эти версии браузеров?

Вот такое решение работает. Ура! <input type="text" name="email_address" value = "Некий текст" onblur="if (this.value=='') this.value = 'Некий текст'" onfocus="if (this.value=='Некий текст') this.value = ''" />

Да, нет. Искал, смотрел, не нашел. На форуме VamShop подсказали заменить html, чтобы не править php. Заменил. Теперь ищу скрипт, чтобы выполнял динамичную форму. Два скрипта проверил - не подходят. Отложил пока на потом. Если не получится оставлю пока как есть. <form id="loginbox" method="post" action="login.php?action=process"> <p> E-Mail: </p> <p class="loginform"> <input type="text" name="email_address" /> </p> <p> Пароль: </p> <p class="loginform"> <input type="password" name="password" /> </p> <p class="LoginContentCenter"> <span class="button"><button type="submit">Продолжить</button></span> </p> </form>

Запарился уже искать на форуме. Может подскажет кто-то тему где обсуждали вот этот вопрос? - http://forum.htmlbook.ru/index.php?showtopic=21942&st=0&p=159570&hl=+%D1%84%D0%BE%D1%80%D0%BC%D0%B0%20+%D0%B2%D0%B2%D0%BE%D0%B4%D0%B0&fromsearch=1entry159570

Переделываю шаблонную форму ввода. В неактивном состоянии отображается нормально, после ввода e-mail и перехода к вводу пароля, e-mail отображается на фоне картинки, как сделать чтобы отображался на белом фоне? {$FORM_ACTION} <div class="loginformEmail"> {$FIELD_EMAIL} </div> <div class="loginformPass"> {$FIELD_PWD} </div> <div class="LoginButton"> {$BUTTON} </div> {$FORM_END} .loginformEmail input { background-image: url(img/Background_login.gif); background-repeat:no-repeat;} .loginformEmail input:focus, .sffocus, .sffocus { background-image:url(img/Background_login_focus.gif); background-repeat:repeat-x;} .loginformPass input { background-image: url(img/Background_login.gif); background-repeat:no-repeat;} .loginformPass input:focus, .sffocus, .sffocus { background-image:url(img/Background_login_focus.gif); background-repeat:repeat-x;}

Установил min-width: 993 px; и теперь у меня при увеличении отображается точно так же, как и на том сайте. Только в Opera полез header. Всем спасибо за помощь. И в Opera уже всё гуд - убрал width: 100% у header.

1. Нет не меню. Строчка навигация, navigation. Отображает путь к страничке на которой находится посетитель. На макете psd, №5, но не обязательно. 2. Я пока тоже только учусь, поэтому могу ошибаться. Попробуйте поэкспериментировать, но будьте внимательны, важна каждая точка, запятая ... !!!: HTML <!--вывод содержимого контента--> <div id="body"> <!--вывод левой колонки--> <div id="content"> <jdoc:include type="component" style="xhtml" /УБЕРИТЕ. Я НЕ ЗНАЮ ЧТО ЭТО ТАКОЕ>контент </div> <!--вывод правой колонки--> <div id="right"> <jdoc:include type="modules" name="right" style="xhtml" -УБЕРИТЕ. Я НЕ ЗНАЮ ЧТО ЭТО ТАКОЕ />правое ололололллллллллллллллллллллллллллллллллллл </div> </div> CSS #body{ width:100%; (поставьте 1001 px) } #content { background: url(../images/fon_left.jpg) repeat-y;УБЕРИТЕ. ПОТОМ ПРИСВОИТЕ. width: 767px; float: left; } #right { background: url(../images/fon_right.jpg) repeat-y;УБЕРИТЕ. ПОТОМ ПРИСВОИТЕ. width: 232px; float: left; или float: right; }

Пока не видно html, можно только гадать. Попробуйте поэкспериментировать, поменяйте на left, посмотрите что получится. Проверьте в html, какому диву принадлежит этот стиль. Вообще лучше показать html. Тогда будет проще разобраться. #right { background: url(../images/fon_right.jpg) repeat-y; float:right;

Если выстраивать несколько дивов по горизонтали, в html должно быть, на примере хидера. В html левый и правый дивы должны быть объедены в один див. Только потом в стилях CSS выравниваете float. На примере сайта, после хидера, лучше сделать меню, затем навигацию, затем контент, а не наоборот.

Там картинка, а не фон. Если сделать фоном её она растягиваться не будет так как надо.. Получается нам нужно отцентрировать картинку по вертикали, но она заведомо большего размера чем родительский блок. Все статьи по центрированию что я нашел работают только если картинка меньше блока( По моему там картинка background-image и она и не растягивается, как содержание. При уменьшении до минимума, там всё уменьшается кроме фона. Если бы там была картинка она должна была бы уменьшаться и увеличиваться вместе с содержимым. ИМХО.

Устанавливать в *body* или *wrapper*? Какую обычно ставят min-width: max-width:? Это минимальная ширина в 930 пикселей так задана. Никогда так не делайте. Понял. Никогда. :) Проверил в IE, Opera, Mozilla - растягивается одинаково красиво и правильно, в отличии от шаблона который приходится править http://vamshop.ru/index.php На этом сайте три колонки увеличиваются в рамках экрана, а в http://www.medtechnika.com.ua/ правая колонка после определенной ширины (предположительно 930 px) смешается вправо.

У меня разрешение 1600x900 всё смотрится в норме. Ничего не лезет. Увеличиваю до максимума, тоже самое всё в норме. при увеличении Ctrl+ до 5 раз от номинального, сайт как резиновый, затем смещается вправо и отображается как фиксированный, при этом ничего не смещается и не лезет по сторонам.

Смотрю в код, но не очень понимаю стиль expression. Ранее с этим не сталкивался. Не понимаю, сайт отображается таким образом потому, что используется expression или стили CSS править?!

Делаю верстку интернет-магазина по аналогии с интернет-магазином http://www.medtechnika.com.ua/ Не понимаю, резиновый сайт или фиксированный?! До определенного увеличения сайт работает как резиновый, затем как фиксированный. Подскажите пожалуйста, каким образом верстали этот интернет-магазин?

Установил position: absolute; right: 20px; top: 140px и проблема со сползанием правой колонки вниз решилась. Однако, сделать так, чтобы при увеличении Ctr+ сайт съезжал вправо, как на этом сайте http://www.medtechnika.com.ua/, а не оставался в рамках экрана, сужая контент, у меня не получается. Пожалуйста подскажите, каким образом это делается?

Ещё раз большое спасибо. Сделал как написали, только колонок резиновых две, а фиксированная одна. Еще добавил float: left по центру и сделал отступы. Получилось нормально. Каталог расширяется так как нужно было. Остался только один момент. При увеличении Ctrl+ с 0 до 4 - всё ок, а после пятого Ctr+, правая колонка съезжает вниз. На примере по ссылке http://www.medtechnika.com.ua/ в таком случае всё уходит вправо. Чтобы так получилось нужно править css или использовать expression? <!-- Левая колонка --> <div id="left"></div> <!-- /Левая колонка --> <!-- Центр --> <div id="wrapper"> <div id="content"> {$main_content} </div> </div> <!-- /Центр --> <!-- Правая колонка --> <div id="right"></div> <!-- /Правая колонка --> /* Центр */ div#wrapper { border-left: 220px solid #fff; } div#content { margin-left: 5px; /* отступ центра от боковых колонок */ width:75%; float: left; } /* /Центр */ /* Левая колонка */ div#left { width: 220px; /* Ширина левой колонки */ position: absolute; top: 140px; left: 0} /* /Левая колонка */ /* Правая колонка */ div#right { margin-left: 5px; width: 18%; float: left; } /* /Правая колонка */

Спасибо. Буду экспериментировать.

Не получается сделать резиновый шаблон, на примере - http://www.medtechnika.com.ua/ Когда все колонки резиновые, при увеличении, левая и правая растягиваются сужаясь. Когда устанавливаю левую колонку фиксировано, тогда при увеличении, левая колонка наезжает на центр. В шаблоне, который выше указан, используется CSS expression. Однако когда я отключил в браузере javaScript, шаблон растягивался точно также, как и с javaScript. Может, кто-то подскажет как такое сделать или где почитать? /* Центр */ div#wrapper { float: left; width: 100%; } div#content { margin: 0 20%; /* отступ центра от боковых колонок */ } /* /Центр */ /* Левая колонка */ div#left { float: left; width: 19% ; /* Ширина левой колонки */ margin-left: -100%; background: transparent; } /* /Левая колонка */ /* Правая колонка */ div#right { float: left; overflow: auto; width: 19% ;/* Ширина правой колонки */ margin-left: -19%; background: transparent; } /* /Правая колонка */

Не получается сделать резиновый шаблон, на примере - http://www.medtechnika.com.ua/ Создал отдельную тему.

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

Не срабатывает, я уже что-то похожее делал. Смещается вниз <div class="headsr">. http://savepic.org/1947442.png

В IE7 ,XP, разрешение экрана 1280х800 (ноутбук), при уменьшении Ctrl - и увеличении Ctrl +, ссылки в меню съезжают влево, линии остаются на месте. В Firefox 4 и 5 работает нормально. В IE8 на персональном компьютере работает нормально. У меня не получается сделать, так чтобы не разъезжалось, может кто-то поделится опытом. Заранее благодарю. Верстку шаблона мне делал фрилансер, я немного понимаю в html и css, но найти где ошибка не получается. http://savepic.org/1908623.png http://savepic.org/1962894.png Код меню в index.html <div id="menu"> <div class="headsl">{$box_SEARCH}</div> <ul> <li{$1}><a href="{$mainpage}">Главная</a> </li> <li{$2}><a href="shop_content.php?coID=4">О магазине</a> </li> <li{$3}><a href="shop_content.php?coID=6">Акции и скидки</a> </li> <li{$4}><a href="shop_content.php?coID=1">Оплата и доставка</a> </li> <li{$6} class="last"><a href="shop_content.php?coID=7">Контакты</a> </li> </ul> <div class="headsr"> <div align="center"><img src="{$tpl_path}img/homemapmail.png" width="111" height="14" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="0,4,11,12" href="index.php" /> <area shape="rect" coords="100,1,111,11" href="shop_content.php?coID=7" /> <area shape="rect" coords="45,3,63,10" href="shop_content.php?coID=8" /> </map> </div> </div> Css стили. /*- Меню-закладки сверху */ #menu {background:#66a3c2;margin:0;height:35px;border-top:solid 1px #FFF;} #menu ul {list-style: none; margin:3px 0px 0px 25px; padding: 5px 0 0px; text-align: center;float:left;} #navigation ul li {list-style: none;margin: 0;padding: 0;float:left;} #menu ul li {display: inline;margin:0; border-right: solid 2px #ff5c08;padding:0 8px;} #menu ul li.last {margin-right: 0; border:none;} #menu ul li a {color: #fff;padding: 3px 3px;font-weight: bold;text-decoration: none;} #menu ul li a:hover {color: #ff5c08; background: #dddddd; text-decoration: none;} #menu ul li.current a {color: #fff;padding: 3px 3px;font-weight: bold;text-decoration: none;} #menu ul li.current a:hover {color: #ff5c08; background: #dddddd text-decoration: none;} /*\*//*/ #menu ul li a {display: inline-block;white-space: nowrap;width: 1px;} #menu ul {padding-bottom: 0;margin-bottom: -1px;} /**/ /*\*/ * html #menu ul li a {padding: 0;} /**/ /*- /Меню-закладки сверху */ .headsl {height:35px; float:left; background:#dddddd; width:210px;} .headsr {height:25px;float:right;background:#dddddd; width:210px; padding:10px 0px 0px 0px; }