Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

0

Перекроить Шапку. Тень Основного Тела.

Автор OlgaS, 30 окт. 2013 13:09

Авторизуйтесь для ответа в теме

Сообщений в теме: 7

#1 OlgaS

Пользователь

Пользователи
42 сообщений

Отправлено 30 Октябрь 2013 - 13:09

Добрый день ,подскажите, пожалуйста, или ткните в ссылки, как мне сделать такое:

1. Небольшую тень от основного тела с шапкой (нашла похожую тему, но не нашла у себя такого блока,чтоб заменить)
2. Самой шапке сделать фон цветом или картинкой на ту область, которая выделена голубым.
3. Убрать поиск, убрать слоган.
4. Сместить телефоны и время вправо, добавить под ними иконку корзины. Чтобы все это было выровнено по одной линии, как в примере.

И еще вопросик, почему у меня на фоне, где стык подвала и основного идет какая-то серая полоса? Я что -то не так прописала?

Прикрепленные изображения

Наверх

#2 Koderhan

Активный участник

Модератоpы
6 227 сообщений

Отправлено 30 Октябрь 2013 - 17:00

Добавил много изменений в стилях на ваш сайт. Вот что получилось на моем тестовом сайте.

Скрытый текст

В файле "main.css".
Добавить в конец файла код:

.head-right, .head-left {
display: inline-block;
height: 80%;
padding-top: 18px;
}
.head-left {
width: 60%;
}
.head-right {
width: 39%;
}
#contactInfo {
position: static;
top: 0;
left: 0;
}
#contactInfo td {
text-align: right !important;
}
#contactInfo table {
float: right;
margin-right: 10px;
}
#mainNav {
background-color: white;
height: 42px;
margin-bottom: -5px;
margin-left: -5px;
padding-left: 7px;
padding-right: 5px;
}
#header {
background: #E2E2FF;
}

В файле "HTML".
Найти код:

<body>

<div id="headerWrap">
<div id="header">
<a href="http://{NET_DOMAIN}/" title="Перейти на главную"><span id="logo"></span></a>

<!-- Контакты -->
<div id="contactInfo">
<table>
<tr>
<td class="contactInfoContent">
<table>
<!-- Первый контактный телефон -->
{% IF SETTINGS_STORE_PHONE_NUMBER1 %}
<tr>
<td class="contentTableHeadMainPhone">
<span class="contactInfoContentCountryCode">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span>
{% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %}
{SETTINGS_STORE_PHONE_NUMBER1}
</td>
</tr>
{% ENDIF %}

<!-- Второй контактный телефон -->
{% IF SETTINGS_STORE_PHONE_NUMBER2 %}
<tr>
<td class="contentTableHeadMainPhone">
<span class="contactInfoContentCountryCode">{SETTINGS_STORE_PHONE_COUNTRY_CODE2}</span>
{% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %}
{SETTINGS_STORE_PHONE_NUMBER2}
</td>
</tr>
{% ENDIF %}

<!-- Третий контактный телефон -->
{% IF SETTINGS_STORE_PHONE_NUMBER3 %}
<tr>
<td class="contentTableHeadMainPhone">
<span class="contactInfoContentCountryCode">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}</span>
{% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %}
{SETTINGS_STORE_PHONE_NUMBER3}
</td>
</tr>
{% ENDIF %}

<!-- Время работы магазина -->
{% IF SETTINGS_STORE_WORK_TIME %}
<tr>
<td class="contentTableHeadMainWorkTime">
{SETTINGS_STORE_WORK_TIME}
</td>
</tr>
{% ENDIF %}

<!-- Skype номер -->
{% IF SETTINGS_STORE_SKYPE %}
<tr>
<td class="contentTableHeadMainSkype">
<a class="valignMiddle" href="skype:{SETTINGS_STORE_SKYPE}?call" title="Свяжитесь с нами по Skype"><img class="valignMiddle" src="{FORALL_IMAGES_PATH}icon/skype.png" width="16" height="16" alt="Свяжитесь с нами по Skype" /><span class="valignMiddle">{SETTINGS_STORE_SKYPE}</span></a>
</td>
</tr>
{% ENDIF %}

<!-- ICQ номер -->
{% IF SETTINGS_STORE_ICQ %}
<tr>
<td class="contentTableHeadMainIcq">
<img class="valignMiddle" src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&amp;img=27" alt="Статус" width="16" height="16" />
<span class="valignMiddle">{SETTINGS_STORE_ICQ}</span>
</td>
</tr>
{% ENDIF %}
</table>
</td>
</tr>
</table>
</div>
<!-- end Контакты -->

<h2 id="title">Мир рукоделия</h2>

<div id="mainNav">
<table>
<tr>
{% FOR menu %}
{% FOR header %}
{% FOR links %}
<td {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}>
<div>
<a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{% ENDIF %} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a>
</div>
</td>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</tr>
</table>
</div>
<!-- Поиск -->
<div id="searchPanel">
<form action="http://{NET_DOMAIN}/search" method="get">
<p>
<label for="keywords">Поиск</label>
<input type="text" maxlength="100" id="keywords" name="q" value="{SEARCH_QUERY}" />
<input type="image" value="Search" title="search" alt="search" src="{ASSETS_IMAGES_PATH}search_button.gif" id="submit" name="submit" />
</p>
</form>
</div>
<!-- end Поиск -->

<!-- Корзина -->
<div id="cartInfo">
<a href="{CART_URL}">в корзине товаров на</a>:
<span id="cartSum">
{% IF cart_count_empty %}
<span class="red">0</span> {CURRENCY_NAME}
{% ELSE %}
{% FOR cart_sum %}
<span>{cart_sum.NOW_WITH_DISCOUNT | money_format}</span><br />
{% ENDFOR %}
{% ENDIF %}
</span>
</div>
<!-- end Корзина -->

</div>
</div>

Заменить:

<body>

<div id="headerWrap">
<div id="header">
<div class="head-left">
<a href="http://{NET_DOMAIN}/" title="Перейти на главную"><span id="logo"></span></a>
</div>
<div class="head-right">
<!-- Контакты -->
<div id="contactInfo">
<table class="contactInfoContent">
<!-- Первый контактный телефон -->
{% IF SETTINGS_STORE_PHONE_NUMBER1 %}
<tr>
<td class="contentTableHeadMainPhone">
<span class="contactInfoContentCountryCode">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span>
{% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %}
{SETTINGS_STORE_PHONE_NUMBER1}
</td>
</tr>
{% ENDIF %}

<!-- Второй контактный телефон -->
{% IF SETTINGS_STORE_PHONE_NUMBER2 %}
<tr>
<td class="contentTableHeadMainPhone">
<span class="contactInfoContentCountryCode">{SETTINGS_STORE_PHONE_COUNTRY_CODE2}</span>
{% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %}
{SETTINGS_STORE_PHONE_NUMBER2}
</td>
</tr>
{% ENDIF %}

<!-- Третий контактный телефон -->
{% IF SETTINGS_STORE_PHONE_NUMBER3 %}
<tr>
<td class="contentTableHeadMainPhone">
<span class="contactInfoContentCountryCode">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}</span>
{% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %}
{SETTINGS_STORE_PHONE_NUMBER3}
</td>
</tr>
{% ENDIF %}

<!-- Время работы магазина -->
{% IF SETTINGS_STORE_WORK_TIME %}
<tr>
<td class="contentTableHeadMainWorkTime">
{SETTINGS_STORE_WORK_TIME}
</td>
</tr>
{% ENDIF %}

<!-- Skype номер -->
{% IF SETTINGS_STORE_SKYPE %}
<tr>
<td class="contentTableHeadMainSkype">
<a class="valignMiddle" href="skype:{SETTINGS_STORE_SKYPE}?call" title="Свяжитесь с нами по Skype"><img class="valignMiddle" src="{FORALL_IMAGES_PATH}icon/skype.png" width="16" height="16" alt="Свяжитесь с нами по Skype" /><span class="valignMiddle">{SETTINGS_STORE_SKYPE}</span></a>
</td>
</tr>
{% ENDIF %}

<!-- ICQ номер -->
{% IF SETTINGS_STORE_ICQ %}
<tr>
<td class="contentTableHeadMainIcq">
<img class="valignMiddle" src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&amp;img=27" alt="Статус" width="16" height="16" />
<span class="valignMiddle">{SETTINGS_STORE_ICQ}</span>
</td>
</tr>
{% ENDIF %}
<tr>
<td>
<a href="http://{NET_DOMAIN}/cart"><img src="ссылка на картинку карзины" alt="Изображение карзины" /></a>
</td>
</tr>
</table>
</div>
<!-- end Контакты -->


</div>

<div class="head-bottom">



</div>

<div id="mainNav">
<table>
<tr>
{% FOR menu %}
{% FOR header %}
{% FOR links %}
<td {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}>
<div>
<a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{% ENDIF %} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a>
</div>
</td>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</tr>
</table>
</div>
<!-- Поиск
<div id="searchPanel">
<form action="http://{NET_DOMAIN}/search" method="get">
<p>
<label for="keywords">Поиск</label>
<input type="text" maxlength="100" id="keywords" name="q" value="{SEARCH_QUERY}" />
<input type="image" value="Search" title="search" alt="search" src="{ASSETS_IMAGES_PATH}search_button.gif" id="submit" name="submit" />
</p>
</form>
</div>
end Поиск -->

<!-- Корзина -->
<div id="cartInfo">
<a href="{CART_URL}">в корзине товаров на</a>:
<span id="cartSum">
{% IF cart_count_empty %}
<span class="red">0</span> {CURRENCY_NAME}
{% ELSE %}
{% FOR cart_sum %}
<span>{cart_sum.NOW_WITH_DISCOUNT | money_format}</span><br />
{% ENDFOR %}
{% ENDIF %}
</span>
</div>
<!-- end Корзина -->

</div>

</div>

Наверх

#3 OlgaS

Пользователь

Пользователи
42 сообщений

Отправлено 30 Октябрь 2013 - 17:14

Koderhan, какая красота...Спасибо огромное!
А с остальным как мне разобраться?
Тень от тела и стык подвала и бок.фона...Не понимаю. почему полосит там((

PS: Где вас учат китайской грамоте?))Я тоже хочу понимать все это))

Наверх

#4 ne_yana

Активный участник

Модератоpы
1 190 сообщений

Отправлено 30 Октябрь 2013 - 17:46

OlgaS (30 Октябрь 2013 - 17:14) писал:

Koderhan, какая красота...Спасибо огромное!
А с остальным как мне разобраться?
Тень от тела и стык подвала и бок.фона...Не понимаю. почему полосит там((

PS: Где вас учат китайской грамоте?))Я тоже хочу понимать все это))

Здравствуйте, чтобы убрать эту полосу, нужно в файлу main.css заменить

#footer {
border-top: 1px solid #CCC;
clear: both;
color: #999;
font-family: verdana;
height: 139px;
margin: 0px;
padding: 0px;
text-align: center;
}

на

#footer {
clear: both;
color: #999;
font-family: verdana;
height: 139px;
margin: 0px;
padding: 0px;
text-align: center;
}

Наверх

#5 OlgaS

Пользователь

Пользователи
42 сообщений

Отправлено 30 Октябрь 2013 - 18:00

ne_yana (30 Октябрь 2013 - 17:46) писал:

Здравствуйте, чтобы убрать эту полосу, нужно в файлу main.css заменить

#footer {
border-top: 1px solid #CCC;
clear: both;
color: #999;
font-family: verdana;
height: 139px;
margin: 0px;
padding: 0px;
text-align: center;
}

на

#footer {
clear: both;
color: #999;
font-family: verdana;
height: 139px;
margin: 0px;
padding: 0px;
text-align: center;
}

Спасибо, все получилось)
А про тень все таки? Как ее сделать?

Наверх

#6 ne_yana

Активный участник

Модератоpы
1 190 сообщений

Отправлено 30 Октябрь 2013 - 18:13

OlgaS (30 Октябрь 2013 - 18:00) писал:

Спасибо, все получилось)
А про тень все таки? Как ее сделать?

Ответ был в теме форума http://forum.storela...ень/#entry99222

Наверх

#7 OlgaS

Пользователь

Пользователи
42 сообщений

Отправлено 30 Октябрь 2013 - 18:24

Увидела, спасибо большое.

Наверх

#8 ac-dream

Активный участник

Пользователи
401 сообщений

Отправлено 19 Ноябрь 2013 - 15:21

Напишите, пожалуйста, по пунктам ответы на вопросы, которая задала OlgaS, необходимо сделать то же самое.

Наверх

Обратно в Изменение общей стилистики

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

Перекроить Шапку. Тень Основного Тела.

Прикрепленные изображения

Количество пользователей, читающих эту тему: 0

Войти

Google поиск