Olekh
-
Posts
22 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Olekh
-
-
Вот такое решение работает. Ура!
<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.Так и есть - два этих ДИВАа в одном. После хэдера идет меню (просто пока только графическое поле), а навигация - это что? Не меню?
2. Olekh, пробовала...
вот index:
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. На примере сайта, после хидера, лучше сделать меню, затем навигацию, затем контент, а не наоборот.
вот еще не верстаный макет, как все должно быть: фрагмент 06 слева, справа фрагмент 07, оба повторяются по оси у.
а вот что получается: фрагмент 07 отображается снизу 06, даже если поставить обоим обтекание с сответственной стороны, он все равно отображается ниже 06, только справа.
<div id="header">
<div class="header-left">
Левая колонка
</div>
<div class="header-right"> Правая коонка
</div>
</div>
<!-- /Шапка -->
-
По моему там картинка background-image и она и не растягивается, как содержание. При уменьшении до минимума, там всё уменьшается кроме фона. Если бы там была картинка она должна была бы уменьшаться и увеличиваться вместе с содержимым. ИМХО.bacground-position не?
Там картинка, а не фон. Если сделать фоном её она растягиваться не будет так как надо..
Получается нам нужно отцентрировать картинку по вертикали, но она заведомо большего размера чем родительский блок. Все статьи по центрированию что я нашел работают только если картинка меньше блока(
-
Устанавливать в *body* или *wrapper*? Какую обычно ставят min-width: max-width:?Не исключено, что при очень больших разрешениях сайт будет смотреться не очень, поэтому резиновым сайтам задают минимальную и максимальную ширину min-width и max-width, при граничных значениях который сайт еще будет выглядеть приемлемо
Понял. Никогда.Смотрю в код, но не очень понимаю стиль expression.Это минимальная ширина в 930 пикселей так задана. Никогда так не делайте.
:)
Проверил в IE, Opera, Mozilla - растягивается одинаково красиво и правильно, в отличии от шаблона который приходится править http://vamshop.ru/index.php На этом сайте три колонки увеличиваются в рамках экрана, а в http://www.medtechnika.com.ua/ правая колонка после определенной ширины (предположительно 930 px) смешается вправо.Для него, родимого. И для IE5 (ветка с document.body вместо document.documentElement).
А по сабжу — скорее всего, это вообще не от сайта зависит, а от браузера. Так работает т.н. "адаптивный зум". В большинстве актуальных браузеров это по умолчанию, но слепо полагаться на это не стоит...
-
У меня разрешение 1600x900 всё смотрится в норме. Ничего не лезет. Увеличиваю до максимума, тоже самое всё в норме. при увеличении Ctrl+ до 5 раз от номинального, сайт как резиновый, затем смещается вправо и отображается как фиксированный, при этом ничего не смещается и не лезет по сторонам.Не исключено, что при очень больших разрешениях сайт будет смотреться не очень, поэтому резиновым сайтам задают минимальную и максимальную ширину min-width и max-width, при граничных значениях который сайт еще будет выглядеть приемлемо
-
Смотрю в код, но не очень понимаю стиль expression. Ранее с этим не сталкивался. Не понимаю, сайт отображается таким образом потому, что используется expression или стили CSS править?!Эм, а в код посмотреть?
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0"><!-- Контейнер --><div id="container" style='width:expression((document.compatMode && document.compatMode == "CSS1Compat") ? (document.documentElement.clientWidth < 930 ? "930px" : "") : (document.body.clientWidth < 930 ? "930px" : ""));'><div class="div_i_1"><div class="container_bkg2"> <div>
<!-- Центр --><div id="wrapper"><div id="content"><div id="content2">
<!-- Навигация --><div id="navigation" style="overflow:hidden;"><p><b><a href="http://www.medtechnika.com.ua/">Главная</a></b></p></div><!-- /Навигация --><div class="div_i_2">
<p>
</p>
<div class="pageItem" >
-
Делаю верстку интернет-магазина по аналогии с интернет-магазином http://www.medtechnika.com.ua/ Не понимаю, резиновый сайт или фиксированный?! До определенного увеличения сайт работает как резиновый, затем как фиксированный. Подскажите пожалуйста, каким образом верстали этот интернет-магазин?
-
Установил position: absolute; right: 20px; top: 140px и проблема со сползанием правой колонки вниз решилась. Однако, сделать так, чтобы при увеличении Ctr+ сайт съезжал вправо, как на этом сайте http://www.medtechnika.com.ua/, а не оставался в рамках экрана, сужая контент, у меня не получается. Пожалуйста подскажите, каким образом это делается?
/* Правая колонка */div#right
{ margin-left: 5px;
width: 18%;
float: left;
position: absolute; right: 20px; top: 140px
}
/* /Правая колонка */
-
Ещё раз большое спасибо. Сделал как написали, только колонок резиновых две, а фиксированная одна. Еще добавил float: left по центру и сделал отступы. Получилось нормально. Каталог расширяется так как нужно было. Остался только один момент. При увеличении Ctrl+ с 0 до 4 - всё ок, а после пятого Ctr+, правая колонка съезжает вниз. На примере по ссылке http://www.medtechnika.com.ua/ в таком случае всё уходит вправо. Чтобы так получилось нужно править css или использовать expression?Точнее нужно формулировать свои вопросы. К примеру я так и не услышал вопрос. Вобщем по аналогии с ссылкой на пример, имеем одну жесткую колонку и три динамические итого:
HTML
<!-- Левая колонка -->
<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;
}
/* /Правая колонка */ -
Точнее нужно формулировать свои вопросы. К примеру я так и не услышал вопрос. Вобщем по аналогии с ссылкой на пример, имеем одну жесткую колонку и три динамические итого:
HTML
Спасибо. Буду экспериментировать.
-
Не получается сделать резиновый шаблон, на примере - 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/
Создал отдельную тему.
-
Спасибо за ответы. Скорее всего надо привлечь к этому делу профи чтобы доработал сайт в разных версиях браузеров.без ссылки сложно точно сказать...но что можно сделать? нет ширины списка. попробуй написать ширину. потом #menu ul li {display:inline мне не нравится. Надо хотя бы писать inline-block или просто block вместе float:left
-
#menu ul li {float:left; margin:0; border-right: solid 2px #ff5c08;padding:0 8px;}
Не срабатывает, я уже что-то похожее делал. Смещается вниз <div class="headsr">.
-
В 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; }
Тестирвание сайта в разных браузерах
in HTML Coding
Posted · Edited by Olekh
После тестирования сайта, появились некоторые проблемы в версиях браузеров 3-4 летней давности. Например в Opera 9.60 и Firefox 3.6.10 не корректно отображаются размеры шрифтов, в IE 6 не корректно отображаются картинки png. Стоит ли делать правки под эти версии браузеров?