Добавление Под Шапкой Блока Картинок
#1
Отправлено 05 Январь 2014 - 16:25
У меня два вопроса:
1) как добавить блок из трех картинок со ссылками под шапку
2) съехал текст вниз как исправить чтоб скрыть синюю полоску.
p.s. Заранее спасибо"
#2
Отправлено 06 Январь 2014 - 09:33
#3
Отправлено 06 Январь 2014 - 15:16
#4
Отправлено 07 Январь 2014 - 08:19
miyako (06 Январь 2014 - 15:16) писал:
#5
Отправлено 07 Январь 2014 - 20:38
nymphetamin2004 (05 Январь 2014 - 16:25) писал:
У меня два вопроса:
1) как добавить блок из трех картинок со ссылками под шапку
2) съехал текст вниз как исправить чтоб скрыть синюю полоску.
p.s. Заранее спасибо"
2. Для того чтобы убрать синюю полоску из верхнего меню, вам необходимо перерисовать это картинку (синий цвет заменить на нужный вам) http://o7930.storela...et/panel-bg.png затем загрузить ее на ваш сайт перед этим удалив старую.
Если вы имеете ввиду нижнюю часть сайта, то вам необходимо отредактировать файл main.css
Находим
#footer { clear: both; width: 100%; background: #485d63; border-top: 4px solid #64828b; margin: 20px 0 17px 0; }Заменяем цвета на нужные вам
background: #485d63; цвет фона
border-top: 4px solid #64828b; цвет верхней границы
1. Куда именно вы хотите вставить ссылки (нарисуйте на скриншоте).
Загрузите картинки которые вы хотели бы использовать и укажите куда должна ссылаться картинка.
#6
Отправлено 07 Январь 2014 - 21:28
Castiel (07 Январь 2014 - 20:38) писал:
Если вы имеете ввиду нижнюю часть сайта, то вам необходимо отредактировать файл main.css
Находим
#footer { clear: both; width: 100%; background: #485d63; border-top: 4px solid #64828b; margin: 20px 0 17px 0; }Заменяем цвета на нужные вам
background: #485d63; цвет фона
border-top: 4px solid #64828b; цвет верхней границы
1. Куда именно вы хотите вставить ссылки (нарисуйте на скриншоте).
Загрузите картинки которые вы хотели бы использовать и укажите куда должна ссылаться картинка.
1. ссылки хочу вставить туда коричневая полоса, между поиском и основной частью. Три картинки к примеру 200х100 с ссылками на товар к примеру.
можете указать любые исправлю. вот мне просто не понятно куда и в файле html вставлять.
#7
Отправлено 07 Январь 2014 - 22:43
nymphetamin2004 (07 Январь 2014 - 21:28) писал:
1. ссылки хочу вставить туда коричневая полоса, между поиском и основной частью. Три картинки к примеру 200х100 с ссылками на товар к примеру.
можете указать любые исправлю. вот мне просто не понятно куда и в файле html вставлять.
Убираем полоску
Находим
#content .headline .h1 { background: url(http://o7930.storeland.net/separ-bg.jpg) bottom center repeat-x; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
Заменяем на
#content .headline .h1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
Добавление баннера
Редактируем шаблон HTML
Добавляем на 135 строке перед <div id="topobj"></div>
<div id="topbanner"> <a href="#"><img src="http://st.storeland.net/2/918/387/b3.jpg"></a> <a href="#"><img src="http://st.storeland.net/2/918/386/b2.jpg"></a> <a href="#"><img src="http://st.storeland.net/2/918/385/b1.jpg"></a> </div>
Редактируем main.css
Добавляем на 73 строке
#topbanner {width:1000px; height: 80px; margin: 5px; } #topbanner a {margin: 0 10px;} #topbanner a img {height:80px;width:200px;}
Стили написаны для баннера с размерами 200х80 (ширина высота), если ваши банеры будут иметь другие размеры, то вам необходимо будет изменить стили, чтобы они красиво встали
#8
Отправлено 08 Январь 2014 - 23:49
Castiel (07 Январь 2014 - 22:43) писал:
Находим
#content .headline .h1 { background: url(http://o7930.storeland.net/separ-bg.jpg) bottom center repeat-x; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
Заменяем на
#content .headline .h1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
Добавление баннера
Редактируем шаблон HTML
Добавляем на 135 строке перед <div id="topobj"></div>
<div id="topbanner"> <a href="#"><img src="http://st.storeland.net/2/918/387/b3.jpg"></a> <a href="#"><img src="http://st.storeland.net/2/918/386/b2.jpg"></a> <a href="#"><img src="http://st.storeland.net/2/918/385/b1.jpg"></a> </div>
Редактируем main.css
Добавляем на 73 строке
#topbanner {width:1000px; height: 80px; margin: 5px; } #topbanner a {margin: 0 10px;} #topbanner a img {height:80px;width:200px;}
Стили написаны для баннера с размерами 200х80 (ширина высота), если ваши банеры будут иметь другие размеры, то вам необходимо будет изменить стили, чтобы они красиво встали
Не помогло все ранво появляется..и теперь еще в каталогах появлятся..так же съехала вниз чуть полоса.
#9
Отправлено 09 Январь 2014 - 00:00
nymphetamin2004 (08 Январь 2014 - 23:49) писал:
Не вижу внесенных изменений, пожалуйста добавьте все изменения которые вам написали, чтобы мы могли посмотреть что не так
#10
Отправлено 09 Январь 2014 - 20:26
Castiel (09 Январь 2014 - 00:00) писал:
Вопрос в другом теперь:
1 убрать эту полосу, анее скомпоновать логотип
2. логотип строго выровнять
3. убрать полоску..опустить вывеску часов работы ниже
#11
Отправлено 09 Январь 2014 - 20:33
#header { width:100%; height:200px; clear:both; }замените его на
#header { width:100%; height:150px; clear:both; }
далее найдите
#header .blocks .logotype { margin:-85px 0 0 20px; float:left; }замените на
#header .blocks .logotype { margin:-130px 0 0 20px; float:left; }
#12
Отправлено 09 Январь 2014 - 21:24
Alexey11 (09 Январь 2014 - 20:33) писал:
#header { width:100%; height:200px; clear:both; }замените его на
#header { width:100%; height:150px; clear:both; }
далее найдите
#header .blocks .logotype { margin:-85px 0 0 20px; float:left; }замените на
#header .blocks .logotype { margin:-130px 0 0 20px; float:left; }
Да то что нужно спасибо. теперь понял где лого редактируется размер.
Вот теперь другой вопрос:
1 Отодвинуть весь блок туда в конец и надписи.
2 Такую же картинку сделаю в зеркальном отражении и вставить сюда..чтобы как крыша типа была что ли.
Возможно такое?
#13
Отправлено 09 Январь 2014 - 21:28
#15
Отправлено 09 Январь 2014 - 21:37
nymphetamin2004 (09 Январь 2014 - 21:33) писал:
Данные изменения могут некорректно отображаться на разных разрешениях экрана. Если бы вы хотели , чтобы ваш сайт смотрелся на всех устройствах одинаково , то я бы не советовал вам делать данные изменения, но если же вы все таки хотите сделать так как указано на скриншоте, то я могу вам помочь.
#16
Отправлено 09 Январь 2014 - 21:53
Alexey11 (09 Январь 2014 - 21:37) писал:
Не хотелось бы конечно чтоб неккоректность была. Ну а хотя бы слева если только сделать? Чтобы потом туда вставить в ряд вниз три картинки. размером 60 на 60 где то.?
вот как то так. 1,2,3, это картинки 100х60
Если честно хотелось бы так, как впервый раз. Был бы вид дома ушапки..и подходило бы под название магазина.
#17
Отправлено 09 Январь 2014 - 22:07
#18
Отправлено 09 Январь 2014 - 22:15
Alexey11 (09 Январь 2014 - 22:07) писал:
Картинки еще не готовы совсем. Просто можете любые ссылки вставить. Я поменяю. Размер 100х60, можете чуть другой если вам удобней будет.
#19
Отправлено 09 Январь 2014 - 22:23
Alexey11 (09 Январь 2014 - 22:07) писал:
haeder-bgy.png - слева
Если будете помогать сделать как в первом варианте. То насколько сильно могут быть проблемы?
Если выберете делать как второй вариант просто слева..тогда вот
haeder-bgy.png будет слева..а под ним потом другая картинка..щас найду примерно для фона и на ней три картинки
#20
Отправлено 09 Январь 2014 - 23:11
Alexey11 (09 Январь 2014 - 22:07) писал:
Количество пользователей, читающих эту тему: 1
0 пользователей, 1 гостей, 0 анонимных