Помогите Разместить Две Кнопки
#1
Отправлено 14 Декабрь 2015 - 23:16
#2
Отправлено 15 Декабрь 2015 - 01:20
<!-- Форма поиска --> <div id="search"> <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;"> <button title="Искать" type="submit" value="Поиск" class="button-search"></button> <input type="text" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" onclick="this.value = '';" onkeydown="this.style.color = '#000000';"/> </form> </div> <!-- /Форма поиска -->
вставьте:
<!-- Авторизационные данные клиента --> <div class="login"> {% IF CLIENT_IS_LOGIN %} <a href="{USER_SETTINGS_URL}"><img src="ссылка кнопки лк" alt="" /></a><a href="{USER_LOGOUT_URL}"><img src="ссылка кнопки выхода" alt="" /></a> {% ELSE %} <a href="{USER_LOGIN_URL}"><img src="ссылка кнопки входа" alt="" /></a><a href="{USER_REGISTER_URL}"><img src="ссылка кнопки регистрации" alt="" /></a> {% ENDIF %} </div> <!-- END Авторизационные данные клиента -->
текст замените на необходимые ссылки
В main.css добавьте:
.login{float:left;}
#3
Отправлено 15 Декабрь 2015 - 23:01
Vaccina (15 Декабрь 2015 - 01:20) писал:
<!-- Форма поиска --> <div id="search"> <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;"> <button title="Искать" type="submit" value="Поиск" class="button-search"></button> <input type="text" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" onclick="this.value = '';" onkeydown="this.style.color = '#000000';"/> </form> </div> <!-- /Форма поиска -->
вставьте:
<!-- Авторизационные данные клиента --> <div class="login"> {% IF CLIENT_IS_LOGIN %} <a href="{USER_SETTINGS_URL}"><img src="ссылка кнопки лк" alt="" /></a><a href="{USER_LOGOUT_URL}"><img src="ссылка кнопки выхода" alt="" /></a> {% ELSE %} <a href="{USER_LOGIN_URL}"><img src="ссылка кнопки входа" alt="" /></a><a href="{USER_REGISTER_URL}"><img src="ссылка кнопки регистрации" alt="" /></a> {% ENDIF %} </div> <!-- END Авторизационные данные клиента -->
текст замените на необходимые ссылки
В main.css добавьте:
.login{float:left;}
Картинки сбились в левый угол
#4
Отправлено 16 Декабрь 2015 - 02:21
.login { float: left; }
замените на:
.login { float: right; }
В шаблоне HTML:
<!-- Авторизационные данные клиента --> <div class="login"> {% IF CLIENT_IS_LOGIN %} <a href="{USER_SETTINGS_URL}"><img src="ссылка кнопки лк" alt="" /></a><a href="{USER_LOGOUT_URL}"><img src="ссылка кнопки выхода" alt="" /></a> {% ELSE %} <a href="{USER_LOGIN_URL}"><img src="ссылка кнопки входа" alt="" /></a><a href="{USER_REGISTER_URL}"><img src="ссылка кнопки регистрации" alt="" /></a> {% ENDIF %} </div> <!-- END Авторизационные данные клиента -->
переместите, поставив после:
<!-- Форма поиска --> <div id="search"> <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;"> <button title="Искать" type="submit" value="Поиск" class="button-search"></button> <input type="text" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" onclick="this.value = '';" onkeydown="this.style.color = '#000000';"/> </form> </div> <!-- /Форма поиска -->
P.S.: не забудьте вставить ссылки на картинки, так как судя по скриншоту, тексты вы не заменили на ссылки.
#5
Отправлено 16 Декабрь 2015 - 23:09
Vaccina (16 Декабрь 2015 - 02:21) писал:
.login { float: left; }
замените на:
.login { float: right; }
В шаблоне HTML:
<!-- Авторизационные данные клиента --> <div class="login"> {% IF CLIENT_IS_LOGIN %} <a href="{USER_SETTINGS_URL}"><img src="ссылка кнопки лк" alt="" /></a><a href="{USER_LOGOUT_URL}"><img src="ссылка кнопки выхода" alt="" /></a> {% ELSE %} <a href="{USER_LOGIN_URL}"><img src="ссылка кнопки входа" alt="" /></a><a href="{USER_REGISTER_URL}"><img src="ссылка кнопки регистрации" alt="" /></a> {% ENDIF %} </div> <!-- END Авторизационные данные клиента -->
переместите, поставив после:
<!-- Форма поиска --> <div id="search"> <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;"> <button title="Искать" type="submit" value="Поиск" class="button-search"></button> <input type="text" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" onclick="this.value = '';" onkeydown="this.style.color = '#000000';"/> </form> </div> <!-- /Форма поиска -->
P.S.: не забудьте вставить ссылки на картинки, так как судя по скриншоту, тексты вы не заменили на ссылки.
И может я что-то не так делаю, на картинки не ставятся ссылки
<!-- Авторизационные данные клиента -->
<div class="login">
{% IF CLIENT_IS_LOGIN %}
<a href="http://zoovmeste.ru/.../register"><img src="{ASSETS_IMAGES_PATH}but11.png" alt="" title="" /></a>
<a href="http://zoovmeste.ru/.../register"><img src="{ASSETS_IMAGES_PATH}but12.png" alt="" title="" /></a>
{% ELSE %}
<a href="http://zoovmeste.ru/.../register"><img src="{ASSETS_IMAGES_PATH}but11.png" alt="" /></a>
<a href="http://zoovmeste.ru/.../register"><img src="{ASSETS_IMAGES_PATH}but22.png" alt="" /></a>
{% ENDIF %}
</div>
<!-- END Авторизационные данные клиента -->
#6
Отправлено 17 Декабрь 2015 - 03:46
.login { float: right; }замените на:
.login { float: right; position: relative; z-index: 19; text-align: right; }
Отредактируйте изображения, так как в низ вы оставили много пустого места под и над кнопками, это тоже влияет на отображение.
#7
Отправлено 18 Декабрь 2015 - 22:16
Vaccina (17 Декабрь 2015 - 03:46) писал:
.login { float: right; }замените на:
.login { float: right; position: relative; z-index: 19; text-align: right; }
Отредактируйте изображения, так как в низ вы оставили много пустого места под и над кнопками, это тоже влияет на отображение.
#8
Отправлено 19 Декабрь 2015 - 02:41
.login { float: right; position: relative; z-index: 19; text-align: right; }
пропишите:
.login a { display: block; }
#9
#10
Отправлено 21 Декабрь 2015 - 16:12
zoovmeste (19 Декабрь 2015 - 22:17) писал:
Здравствуйте, в main.css найдите код:
.login { float: right; position: relative; z-index: 19; text-align: right; } .login a { display: block; }
и замените на код:
.login { float: right; position: relative; z-index: 19; text-align: right; top: 5px; right: 11px; margin-bottom: 11px; } .login a { display: block; margin-bottom: -5px; }
#11
Отправлено 24 Декабрь 2015 - 21:55
Юля123 (21 Декабрь 2015 - 16:12) писал:
.login { float: right; position: relative; z-index: 19; text-align: right; } .login a { display: block; }
и замените на код:
.login { float: right; position: relative; z-index: 19; text-align: right; top: 5px; right: 11px; margin-bottom: 11px; } .login a { display: block; margin-bottom: -5px; }
Спасибо. Теперь нужно обе кнопки сдвинуть по середине (ближе к номеру телефона) и верхнюю границу кнопок сделать на уровне номера (опустить ниже)
#12
Отправлено 25 Декабрь 2015 - 01:43
.login { float: right; position: relative; z-index: 19; text-align: right; top: 5px; right: 11px; margin-bottom: 11px; }
в нем увеличьте значение top, чтобы опустить блок и уменьшите значение left, чтобы блок был ближе к телефону
#13
Отправлено 25 Декабрь 2015 - 22:34
Vaccina (25 Декабрь 2015 - 01:43) писал:
.login { float: right; position: relative; z-index: 19; text-align: right; top: 5px; right: 11px; margin-bottom: 11px; }
в нем увеличьте значение top, чтобы опустить блок и уменьшите значение left, чтобы блок был ближе к телефону
#14
Отправлено 26 Декабрь 2015 - 03:14
#header #search { position: relative; float: right; top: 9px; right: 0px; margin-bottom: 9px; width: 225px; z-index: 15; }
замените на:
#header #search { position: relative; float: right; top: 9px; right: 0px; margin-top: 9px; width: 225px; z-index: 15; }
#15
Отправлено 26 Декабрь 2015 - 22:43
Vaccina (26 Декабрь 2015 - 03:14) писал:
#header #search { position: relative; float: right; top: 9px; right: 0px; margin-bottom: 9px; width: 225px; z-index: 15; }
замените на:
#header #search { position: relative; float: right; top: 9px; right: 0px; margin-top: 9px; width: 225px; z-index: 15; }
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных