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

Ошибка вёрстки,как исправить?

Dimusik
 Share

Recommended Posts

Dimusik Rising Star

Dimusik

Опубліковано:
Опубліковано: (змінено) 
 </ul>
      </div>
    </div>
    <div class="powered-block">
	{{ powered }}
	<div style="margin: 0 auto; width: 200px">
		<div style="float: left; width: 50px; height: 50px;><a href="https://facebook.com"><img src="catalog/view/theme/listore/image/fb.jpg" /></a></div>
		<div style="float: left; width: 50px; height: 50px;><a href="https://instagram.com/"><img src="catalog/view/theme/listore/image/vk.jpg" /></a></div>
		<div style="float: left; width: 50px; height: 50px;><a href="https://od.ru"><img src="catalog/view/theme/listore/image/od.jpg" /></a></div>
		<div style="float: left; width: 50px; height: 50px;><a href="https://vk.com"><img src="catalog/view/theme/listore/image/in.jpg" /></a></div>
	</div>
	</div>
</footer>
{% for script in scripts %}
<script src="{{ script }}" type="text/javascript"></script>
{% endfor %}
<!--

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

Спасибо за помощь.

7777777777.png

Змінено користувачем Dimusik
Надіслати
Поділитися на інших сайтах

Dimusik Rising Star

Dimusik

Опубліковано:
  • Автор
Опубліковано:
Just now, GreenDragon said:

А что должно быть? Ссылку на сайт дайте..

ну я думал оно в ровень ляжет с текстом "Работает на .... ocStore" на одной полосе футера так сказать.В личку ссылку кинул. 

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

drujban Community Regular

drujban

Опубліковано:
Опубліковано: (змінено)
24 минуты назад, Dimusik сказал:

ну я думал оно в ровень ляжет с текстом "Работает на .... ocStore" на одной полосе футера так сказать.В личку ссылку кинул

зачем темы плодить?

киньте ссылку на сайт

или попробуйте сами <div class="col-sm-3>

 

Змінено користувачем drujban
Надіслати
Поділитися на інших сайтах
1

GreenDragon Mentor

GreenDragon

Опубліковано:
Опубліковано: 
<div class="powered-block">
    <div class="powered">
        {{ powered }}
    </div>
	<ul class="list-inline socseti-block">
        <li><a href="https://facebook.com"><img src="catalog/view/theme/listore/image/fb.png"></a></li>
        <li><a href="https://instagram.com/"><img src="catalog/view/theme/listore/image/vk.png"></a></li>
        <li><a href="https://od.ru"><img src="catalog/view/theme/listore/image/od.png"></a></li>
        <li><a href="https://vk.com"><img src="catalog/view/theme/listore/image/in.png"></a></li>
    </ul>
</div>
<style>
.powered-block {
    display: table; 
    width: 100%;
}
.powered {
    display: table-cell; 
    vertical-align: middle;
    width: 200px;
}
.socseti-block {
    margin: 0;
    padding-right: 200px;
    text-align: center;
}
@media (max-width: 768px) {
    .socseti-block {
       text-align: left;
       padding-right: 0;
    }
    .powered {
        display: block;
    }
}
</style>

 

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

Dimusik Rising Star

Dimusik

Опубліковано:
  • Автор
Опубліковано: (змінено)

спасибо Pascha этот код работает! но у меня появилась новая ошибка сбоку белый отступ.

  

<div class="row">
<div class="col-sm-6 poweredblock"> {{ powered }} </div>
<div class="col-sm-6 socblock">
<ul class="list-inline">
<li><a href="https://facebook.com"><img src="catalog/view/theme/listore/image/fb.jpg" /></a></li>
<li><a href="https://instagram.com/"><img src="catalog/view/theme/listore/image/vk.jpg" /></a></li>
<li><a href="https://od.ru"><img src="catalog/view/theme/listore/image/od.jpg" /></a></li>
<li><a href="https://vk.com"><img src="catalog/view/theme/listore/image/in.jpg" /></a></li>
</ul>
</div>
</div>

 

333333.png

Змінено користувачем Dimusik
Надіслати
Поділитися на інших сайтах

Dimusik Rising Star

Dimusik

Опубліковано:
  • Автор
Опубліковано: 
<footer>
    <div class="footer-block">
      {% if informations %}
      <div class="column-footer">
        <h5>{{ text_information }}</h5>
        <ul>
         {% for information in informations %}
          <li><a href="{{ information.href }}">{{ information.title }}</a></li>
          {% endfor %}
        </ul>
      </div>
      {% endif %}
      <div class="column-footer">
        <h5>{{ text_service }}</h5>
        <ul>
          <li><a href="{{ contact }}">{{ text_contact }}</a></li>
          <li><a href="{{ return }}">{{ text_return }}</a></li>
          <li><a href="{{ sitemap }}">{{ text_sitemap }}</a></li>
        </ul>
      </div>
      <div class="column-footer">
        <h5>{{ text_extra }}</h5>
        <ul>
          <li><a href="{{ manufacturer }}">{{ text_manufacturer }}</a></li>
          <li><a href="{{ voucher }}">{{ text_voucher }}</a></li>
          <li><a href="{{ affiliate }}">{{ text_affiliate }}</a></li>
          <li><a href="{{ special }}">{{ text_special }}</a></li>
        </ul>
      </div>
      <div class="column-footer">
        <h5>{{ text_account }}</h5>
        <ul>
          <li><a href="{{ account }}">{{ text_account }}</a></li>
          <li><a href="{{ order }}">{{ text_order }}</a></li>
          <li><a href="{{ wishlist }}">{{ text_wishlist }}</a></li>
          <li><a href="{{ newsletter }}">{{ text_newsletter }}</a></li>
        </ul>
      </div>
    </div>	
    <div class="powered-block">
		<div class="row">
			<div class="col-sm-5 poweredblock"> {{ powered }} </div>
			<div class="col-sm-5 socblock">
				<ul class="list-inline">
					<li><a href="https://facebook.com" target="_blank"><img src="catalog/view/theme/listore/image/fb.png" /></a></li>
					<li><a href="https://instagram.com/" target="_blank"><img src="catalog/view/theme/listore/image/vk.png" /></a></li>
					<li><a href="https://od.ru" target="_blank"><img src="catalog/view/theme/listore/image/od.png" /></a></li>
					<li><a href="https://vk.com/public174030883" target="_blank"><img src="catalog/view/theme/listore/image/in.png" /></a></li>
				</ul>
			</div>
		</div>
	</div>
</div>
</footer>
{% for script in scripts %}
<script src="{{ script }}" type="text/javascript"></script>
{% endfor %}
<!--
OpenCart is open source software and you are free to remove the powered by OpenCart if you want, but its generally accepted practise to make a small donation.
Please donate via PayPal to [email protected]
//-->
</div>

<script src="catalog/view/theme/listore/js/dropclick.js"></script>
</body></html>

вот полный код страницы, подскажите что надо поправить?

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

GreenDragon Mentor

GreenDragon

Опубліковано:
Опубліковано:

А выше код, который я предложил - не работает? За одно и выравнивание по центру и вертикали будет..

Или  

.wrapp footer .powered-block {
    background: #1f1e1e;
    padding: 10px 15px;
    margin: 0;
    color: #ec5353;
}

вместо padding: 10px; -  padding: 10px 15px;

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

SiteMix Grand Master

SiteMix

Опубліковано:
Опубліковано: (змінено)
12 часов назад, drujban сказал:

или попробуйте сами <div class="col-sm-3>

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

Если это так, то там нужно что-то типа:

<div class="xs-100 sm-50 md-40">

 

UPD

Нет, там не Journal. В другой теме ссылку на сайт увидел...

Змінено користувачем SiteMix
Надіслати
Поділитися на інших сайтах

GreenDragon Mentor

GreenDragon

Опубліковано:
Опубліковано:
8 часов назад, Pascha сказал:

прописывать фиксированную ширину блоков в пикселях при адаптивной верстке - признак дурного тона 

В данном случаи это не важно, только если добавлять или убирать иконки в будущем - то нужно будет либо отнять ширину пикселей самой иконки либо добавить в width: 260px; Не с админки же это делается, всеравно придется код редактировать. Но за то - все ровно отцентрировано.  

P.S.

Я бы ище изменил padding: 10px; на padding: 10px 15px;  в 

.wrapp footer .powered-block {
    background: #1f1e1e;
    padding: 10px;
    margin: 0;
    color: #ec5353;
}

 

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

GreenDragon Mentor

GreenDragon

Опубліковано:
Опубліковано:
31 минуту назад, Pascha сказал:

  


text-align: center

заменить 15-ю строками кода стилей - если не говорит о профессионализме, то хотя бы подтверждает знания css ))))

 

Каким это образом text-align: center решит проблему центрирования по горизонтали и вертикали в данном случаи, если использовать сетку бутстрапа? 

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

SonLux Collaborator

SonLux

Опубліковано:
Опубліковано: (змінено)
53 минуты назад, Pascha сказал:

думаю нет смысла продолжать беседу и не нужные споры...

Вы - гуру, я -лох... 
И мы...сча-а-а-а-а-а-стливы!!!! ("Дом-2")
 

Однако самокритично) 

Змінено користувачем ShegoGo
Надіслати
Поділитися на інших сайтах
1

GreenDragon Mentor

GreenDragon

Опубліковано:
Опубліковано:
2 часа назад, Pascha сказал:

заменить 15-ю строками кода стилей - если не говорит о профессионализме, то хотя бы подтверждает знания css ))))

думаю нет смысла продолжать беседу и не нужные споры...
 

Так я не спорю, просто если есть у Вас иное решение - выкладывайте,  мне самому интересно.. На счет text-align: center, html верстка иконок блочная изначально была, я ее не трогал и только стили написал к ней на коленке, поэтому там margin 0 auto и фиксированная ширина были изначально 

P.S.

Можно сделать так в итоге, что бы небыло фиксированного размера блока иконок 

.socseti-block {
    margin: 0;
    padding-right: 200px;
    text-align: center;
}
@media (max-width: 768px)
    .socseti-block {
        text-align: left;
        padding-right: 0;
    }
}
 
Надіслати
Поділитися на інших сайтах
1

GreenDragon Mentor

GreenDragon

Опубліковано:
Опубліковано:
3 часа назад, Pascha сказал:

:???: :ugeek:

 

а если как то такого типа? 
  


padding-top: 2%;
padding-right: 2%;

 

padding-right: 200px; - компенсация блока powered шириной в 200px, можно конечно и в % задать ширину и компенсацию, можно и выравнивание подобрать при помощи padding-top, но vertical-align делает это автоматически для всех елементов ячеек табличной верстки , не вижу ничего страшного в данном методе.  

 

Тут можно и   display: flex; align-items: center применить если уж на то пошло..     

<div class="powered-block">
    <div class="col-sm-3 powered">{{ powered }}</div>
    <ul class="list-inline socseti-block">
        <li><a href="https://facebook.com"><img src="catalog/view/theme/listore/image/fb.png"></a></li>
        <li><a href="https://instagram.com/"><img src="catalog/view/theme/listore/image/vk.png"></a></li>
        <li><a href="https://od.ru"><img src="catalog/view/theme/listore/image/od.png"></a></li>
        <li><a href="https://vk.com"><img src="catalog/view/theme/listore/image/in.png"></a></li>
    </ul>
</div>
<style>
.powered-block {
    display: flex;
    align-items: center;
}
.socseti-block {
    margin: 0 auto;
    padding-right: 25%;
}
@media (max-width: 768px) {
    .powered-block {
        display: block;
    }
    .socseti-block {
       padding-top: 20px;
       padding-right: 0;
    }
}
</style>

 

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

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

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

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

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

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

Вхід

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

Вхід зараз
 Share
Перейти до списку тем

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

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

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

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

  Я даю згоду