Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


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

Link to post
Share on other sites

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

<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> вот я так понимаю должно было быть?

Link to post
Share on other sites

 

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

<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> вот я так понимаю должно было быть?

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

Link to post
Share on other sites

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

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

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

.clear{
position:absolute;
}
 

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

Link to post
Share on other sites

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>

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

Link to post
Share on other sites

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>
 

 

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

Link to post
Share on other sites

кодировка  utf-8 без bom

атрибуты 777

больше не знаю проверяю пути под лупой пока нечего не нохожу

Link to post
Share on other sites

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

 

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

Link to post
Share on other sites

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

 

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

 

убрал public_html

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

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

Link to post
Share on other sites

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

 

 

0c510759b7e4.jpg

Link to post
Share on other sites

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

 

 

0c510759b7e4.jpg

 

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

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

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

 

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

Link to post
Share on other sites

В смысле оставил ошибку ,чтоб потом если что её вернуть? Пути все не верные.Зачем было создавать папку ,если все картинки элементарно можно было в папку 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>
 

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

Link to post
Share on other sites

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

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

Link to post
Share on other sites

Ширину чего ?

Link to post
Share on other sites

Ширину чего ?

вот  скриншот  куда хотелбы передвинуть кнопки 

post-29215-0-54711300-1373394254_thumb.png
как можно это реализовать
Link to post
Share on other sites

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

  • +1 1
Link to post
Share on other sites

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

css не очень хорошо знаю.

Link to post
Share on other sites

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

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

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

 

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

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

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

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

Link to post
Share on other sites

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

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

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

 

.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>
 

 

Link to post
Share on other sites

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

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

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

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

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

Link to post
Share on other sites

 

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

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

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

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

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

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

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

Link to post
Share on other sites

вот блин....не оборачивать в див надо, а внести))) он уже присутствует в вашем коде страницы
нужно просто перенести код до закрывающегося </div> а не после него)))

 

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

 

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.