Jump to content
Dimusik

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

Recommended Posts

Posted (edited)
 </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

Edited by Dimusik

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
Just now, GreenDragon said:

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

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

Share this post


Link to post
Share on other sites
Posted (edited)
24 минуты назад, Dimusik сказал:

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

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

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

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

 

Edited by drujban

Share this post


Link to post
Share on other sites
1 час назад, Dimusik сказал:

ну я думал оно в ровень ляжет с текстом "Работает на .... ocStore"

с чего бы? )

Share this post


Link to post
Share on other sites
<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>

 

Share this post


Link to post
Share on other sites

Мдэээ.... возвращаемся к верстке 2000х? Хватит позорить HTML

Share this post


Link to post
Share on other sites
<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>

ну хотя бы так...

Share this post


Link to post
Share on other sites
Posted (edited)

спасибо 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

Edited by Dimusik

Share this post


Link to post
Share on other sites
<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 donate@opencart.com
//-->
</div>

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

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

Share this post


Link to post
Share on other sites

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

Или 

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

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

  • +1 1

Share this post


Link to post
Share on other sites
Posted (edited)

Всё вроде работает спасибо большое!!!! GreenDragon

111111.png

Edited by Dimusik

Share this post


Link to post
Share on other sites

В

.socseti-block {
    margin: 0 auto;
    width: 260px;
    position: relative;
    right: 100px;
}

width: 260px;

Share this post


Link to post
Share on other sites
3 часа назад, Dimusik сказал:

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

 

убрать  в начале

<div class="row">

и в конце

</div>

или изменить 
<div class="row">
на 
<div class="col-sm-12">

тут по желанию

хотя мне и не понятна самодеятельность тут 
<div class="col-sm-5 poweredblock....

<div class="col-sm-5 socblock....


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

Цитата

 

<div class="col-sm-6 poweredblock"> {{ powered }} </div>

<div class="col-sm-6 socblock">

 

 

  • +1 1

Share this post


Link to post
Share on other sites
1 час назад, GreenDragon сказал:

width: 260px;

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

  • +1 1

Share this post


Link to post
Share on other sites
Posted (edited)
12 часов назад, drujban сказал:

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

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

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

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

 

UPD

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

Edited by SiteMix

Share this post


Link to post
Share on other sites
8 часов назад, Pascha сказал:

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

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

P.S.

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

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

 

Share this post


Link to post
Share on other sites
1 час назад, GreenDragon сказал:

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

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

text-align: center

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

  • +1 1

Share this post


Link to post
Share on other sites
31 минуту назад, Pascha сказал:

 


text-align: center

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

 

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

Share this post


Link to post
Share on other sites
1 час назад, GreenDragon сказал:
 

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

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

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

  • +1 1

Share this post


Link to post
Share on other sites
Posted (edited)
53 минуты назад, Pascha сказал:

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

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

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

Edited by ShegoGo

Share this post


Link to post
Share on other sites
1 час назад, ShegoGo сказал:

Самокритично) 

а Вы считаете что я должен был раскрыть титану верстки дополнительную секретную строчку начинающуюся со слова padding?
Да ни за что!!! Тут и так слюной всего забрызгали... а в эру короновируса это смерти подобно... лучше остаться живым лохом, чем мертвым верстальщиком сайтов. :ugeek:

Share this post


Link to post
Share on other sites
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;
    }
}
 

Share this post


Link to post
Share on other sites
1 час назад, GreenDragon сказал:

padding-right: 200px;

:???: :ugeek:

 

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

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


Адаптивная верстка - это не табличная верстка, не фиксированная верстка!!!!
 

Или горбатого только ровное место под спиной исправит?

Орешек знаний все же нам "Орешек знанья тверд, но все же мы не привыкли отступать! Нам расколоть его поможет киножурнал "Хочу все знать"? (Из мультика моего детства)

Пилите гири - они золотые 

Share this post


Link to post
Share on other sites
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>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×

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.