Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

не знаю как вывести сец-сети кнопки в футере и выровнить их окуратно


Recommended Posts

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

что я cделал. мои действия:

1. загрузил кнопки в отдельную папку на сервер прописал все отребуты 777

2. вставил вот этот код в фаеле : catalog/view/theme/default/template/common/footer.tpl

3, и прописал путь /store-bag/public_html/image-knopki

 

<div class="clear"></div>
<left>
    <h3>Мы в социальных сетях</h3>
  <a href="https://www.facebook.com/StoreBag.ru"><img src=/image-knopki/facebook.png" target="_blank"> <img style="width: 32px; height: 32px; alt="Мы facebook"></a>
  <a href="http://vk.com/storebag"><img src="http://store-bag.ru/image/cache/data/knopki/vkontakte-32x32.jpg" alt="Мы Вконтакте" hspace="7" vspace="-5"></a>
  <a href="http://www.odnoklassniki.ru/storebag"><img src="http://store-bag.ru/image/cache/data/knopki/odnoclassniki.png" alt="Мы в одноклассниках" hspace="7" vspace="-5"></a>
    </left>
</div>
 

 

4, вот сайт сам http://store-bag.ru/
5, посмотрите внизу подвала  копки:Мы в социальных сетях

post-29215-0-54711300-1373394254_thumb.png

Надіслати
Поділитися на інших сайтах


эээ...зачем так сложно-то?да и присвоили вы непонятно что и куда

<div class="clear">

    <h3>Мы в социальных сетях</h3>

  <a href="https://www.facebook.com/StoreBag.ru"><img src=/image-knopki/facebook.png" target="_blank"> <img style="width: 32px; height: 32px; alt="Мы facebook"></a>

  <a href="http://vk.com/storebag"><img src="http://store-bag.ru/image/cache/data/knopki/vkontakte-32x32.jpg" alt="Мы Вконтакте" hspace="7" vspace="-5"></a>

  <a href="http://www.odnoklassniki.ru/storebag"><img src="http://store-bag.ru/image/cache/data/knopki/odnoclassniki.png" alt="Мы в одноклассниках" hspace="7" vspace="-5"></a>

</div> вот я так понимаю должно было быть?

Надіслати
Поділитися на інших сайтах


 

эээ...зачем так сложно-то?да и присвоили вы непонятно что и куда

<div class="clear">

    <h3>Мы в социальных сетях</h3>

  <a href="https://www.facebook.com/StoreBag.ru"><img src=/image-knopki/facebook.png" target="_blank"> <img style="width: 32px; height: 32px; alt="Мы facebook"></a>

  <a href="http://vk.com/storebag"><img src="http://store-bag.ru/image/cache/data/knopki/vkontakte-32x32.jpg" alt="Мы Вконтакте" hspace="7" vspace="-5"></a>

  <a href="http://www.odnoklassniki.ru/storebag"><img src="http://store-bag.ru/image/cache/data/knopki/odnoclassniki.png" alt="Мы в одноклассниках" hspace="7" vspace="-5"></a>

</div> вот я так понимаю должно было быть?

нечего не изменилось как вы указали и иконки кнопок не отображается 

Надіслати
Поділитися на інших сайтах


так я и не предложил решение, я попросту убрал грубые ошибки для начала, а касательно отображения соц-сетей зачем вы велосипед изобретаете есть-же

https://opencartforum.com/files/file/573-perevod-besplatnogo-modulia-my-v-sotcsetiakh/

если для вас не вариант то присвойте хотя-бы

.clear{
position:absolute;
}
 

после откройте фаербаг и посмотрите что да как.

Надіслати
Поділитися на інших сайтах


1. загрузил кнопки в отдельную папку на сервер прописал все отрибуты 777

1. в какую именно? скопируйте путь в менеджере ФТП которым пользуетесь

 

>2. вставил вот этот код в фаеле : catalog/view/theme/default/template/common/footer.tpl

2. тут все норм, вставили туда, куда надо, но вопрос открыт по адресу расположения картинок

3, и прописал путь /store-bag/public_html/image-knopki

таким образом не прописываются адреса, это путь на хостинге 

вернее будет так: 

если папка knopki у вас расположена в корне сайта (где папка admin, catalog и др...) , тогда абсолютный путь к картинке будет выглядеть так:

 

 http://store-bag.ru/knopki/КАРТИНКА.jpg
 

но... судя по фаербагу, ваши картинки не только не расположены там где вы указали, но и местоположение каждой почему то отличное: что то типа загружено в папку, а что то просто лежит в корне сайта, а не в папке вами указанной (я как не пытался, так и не нашел картинки ваши, не по указанному в коде пути, ни по примерно- возможным)

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

<a href="http://vk.com/storebag"><img src="http://store-bag.ru/knopki/vkontakte.jpg" alt="Мы Вконтакте"></a>

ну а после того, как вы правильно пропишете пути до картинок, можно говорить о помощи по выравниванию и т.д (сразу дам совет: загружайте картинки одинакового размера))) и дальнейшая помощь возможно уже не понадобиться

 

 

вот не могу понять вот здесь в ставляю код: /store-bag/public_html/catalog/view/theme/default/template/common/footer.tpl

использую ftp filezilla

не как не отображаеться картинки менял png на jpg

прописывал название картинки так vkontakte-100x100.jpg одно время отображались но слишком большие

а вот так опять не отображаеться vkontakte-32x32.jpg потом так оставил vkontakte.jpg

папка с картинками в корне сайта:  image-knopki/

 

по исправлял код 

 

<div class="clear">
    <h3>Мы в социальных сетях</h3>
  <a href="https://www.facebook.com/StoreBag.ru"><img src="http://store-bag/public_html/image-knopki/facebook-32x32.png" target="_blank"> <img style="width: 32px; height: 32px; alt="Мы facebook"></a>
  <a href="http://vk.com/storebag"><img src="http://store-bag/public_html/image-knopki/vkontakte.jpg" <img style="width: 32px; height: 32px; alt="Мы Вконтакте"></a>
  <a href="http://www.odnoklassniki.ru/storebag"><img src=""http://store-bag/public_html/image-knopki/odnoclassniki.png" alt="Мы в одноклассниках" hspace="7" vspace="-5"></a>
</div>
 

 

чего-то не как . что может быть в чем проблема как думаете .

Надіслати
Поділитися на інших сайтах


Смените лупу! Она врёт!))) http://store-bag/public_html/image-knopki/odnoclassniki.png

 

зачем в этом пути Папка  public_html  ?

Надіслати
Поділитися на інших сайтах

Смените лупу! Она врёт!))) http://store-bag/public_html/image-knopki/odnoclassniki.png

 

зачем в этом пути Папка  public_html  ????

 

убрал public_html

поставил так  http://store-bag/image-knopki/odnoclassniki.png

все равно не чего не изиенил

Надіслати
Поділитися на інших сайтах


Ну это одному Богу теперь известно чего там в магазине накурасесили!) Если смотреть в файрбаге там не путь до картинки ,а чёрти что.

 

 

0c510759b7e4.jpg

Надіслати
Поділитися на інших сайтах

Ну это одному Богу теперь известно чего там в магазине накурасесили!) Если смотреть в файрбаге там не путь до картинки ,а чёрти что.

 

 

0c510759b7e4.jpg

 

на одноклассникак оставил public_html  чтоб потом не искать если вдруг обратно поставить нужно будет

а на остальных в контакте и фейсбуке убрал.

одна ведь роли не играет они ведь все три не отображается 

Надіслати
Поділитися на інших сайтах


В смысле оставил ошибку ,чтоб потом если что её вернуть? Пути все не верные.Зачем было создавать папку ,если все картинки элементарно можно было в папку image/data загрузить и указать путь как           src="image/data/картинка"

Надіслати
Поділитися на інших сайтах

В смысле оставил ошибку ,чтоб потом если что её вернуть? Пути все не верные.Зачем было создавать папку ,если все картинки элементарно можно было в папку image/data загрузить и указать путь как           src="image/data/картинка"

image/data - где находиться.

 

вот здесь может быть - /catalog/view/theme/default/image - тут уже закачал картинки и прописывал путь тоже самое

Надіслати
Поділитися на інших сайтах


В смысле оставил ошибку ,чтоб потом если что её вернуть? Пути все не верные.Зачем было создавать папку ,если все картинки элементарно можно было в папку image/data загрузить и указать путь как           src="image/data/картинка"

нашел все поставил 

 

<div class="clear">
    <h3>Мы в социальных сетях</h3>
  <a href="https://www.facebook.com/StoreBag.ru"><img src="image/data/facebook.png" alt="Мы facebook" target="_blank">></a>
  <a href="http://vk.com/storebag"><img src="image/data/vkontakte.png" alt="Мы Вконтакте"></a>
  <a href="http://www.odnoklassniki.ru/storebag"><img src="image/data/odnoclassniki.png" alt="Мы в одноклассниках"></a>
</div>
 

но у вы почему то опять двадцать пять

Надіслати
Поділитися на інших сайтах


Надіслати
Поділитися на інших сайтах

все получилось  спасибо тебе дружище .

как бы мне выровнеть его , честно сказать я не знаю ширину как подровнять

Надіслати
Поділитися на інших сайтах


А что мешает теперь их туда стилями загнать?

например так:

вставив в стили : 

 

.clear {
width: 300px;
margin:auto;
position: relative;
left: -320px;
top: -40px
}
 

ну и при необходимости поиграться отступами

хотя это скорее костыли, чем правильная верстка)))

по идее нужно обернуть нижний блок в див, задать ему фиксированный размер и потом уже прописывать классы, иначе при различном разрешении блоки ниже футера будут "плавать"

а ведь можно выровнять не прибегая к css ( мне так удобнее было-бы, чтоб после обновления движка например намного легче скопировать и вставить в шаблон  все изменения)

вырвнить сам блог div

подскажите как правильно подправить тут :

 

<div class="clear" align="left" -320px; height: -40px;">
 

 

сам блог

<div class="clear" align="left" -320px; height: -40px;">
    <h3>Мы в социальных сетях</h3>
  <a rel="nofollow" href="https://www.facebook.com/StoreBag.ru" target="_blank"><img src="image/data/facebook.png" title="Мы в Facebook" alt="Мы facebook"></a>
  <a rel="nofollow" href="http://vk.com/storebag" target="_blank"><img src="image/data/vkontakte.png" title="Наша страница ВКонтакте" alt="Мы Вконтакте"></a>
  <a rel="nofollow" href="http://www.odnoklassniki.ru/storebag" target="_blank"><img src="image/data/odnoclassniki.png" alt="Мы в одноклассниках"></a>
</div>
 

 

Надіслати
Поділитися на інших сайтах


 

а ведь можно выровнять не прибегая к css ( мне так удобнее было-бы, чтоб после обновления движка например намного легче скопировать и вставить в шаблон  все изменения)

вырвнить сам блог div

подскажите как правильно подправить тут :

для начала внести код кнопок соцсетей в пределы <div id="container">....</div>

я вроде уже Вам ответил, что нужно обратить внимание сначала на верстку , а потом на стили, не важно куда они внесены в сам код или вынесены отдельно

я обернул как вы написали : <div id="container">....</div>

блог сдвинулся в право как надо, но вверх нет . хотелось-бы его прижать к верхней линии.

Надіслати
Поділитися на інших сайтах


вот блин....не оборачивать в див надо, а внести))) он уже присутствует в вашем коде страницы

нужно просто перенести код до закрывающегося </div> а не после него)))

 

а поднять: margin-top  в помощь

 

p.s. никогда не любил вносить стили в общий код, обычно это делается при временной верстке, для удобства редактирования "все в одном"...а потом все равно все выношу в отдельный файл стилей... не понять мне вот этих "танцев с бубном" если вопрос уже был решен

я вставил так:

 

<div id="container" align="left" left: -320px; top: -40px;">
<div class="clear">
    <h3>Мы в социальных сетях</h3>
  <a rel="nofollow" href="https://www.facebook.com/StoreBag.ru" target="_blank"><img src="image/data/facebook.png" title="Мы в Facebook" alt="Мы facebook"></a>
  <a rel="nofollow" href="http://vk.com/storebag" target="_blank"><img src="image/data/vkontakte.png" title="Наша страница ВКонтакте" alt="Мы Вконтакте"></a>
  <a rel="nofollow" href="http://www.odnoklassniki.ru/storebag" target="_blank"><img src="image/data/odnoclassniki.png" alt="Мы в одноклассниках"></a>
  </div>
</div> 
 

вот скриншот

 

 

post-29215-0-39430200-1373561885_thumb.png

Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.