Вёрстка | Разработчик сайтов и магазинов на битриксе . И не только.

Пропорциональный див на css( от ширины экрана)-

18.11.2016 Автор:alex

Комментариев нет

Достаточно просто сделать пропорциональный див вот так:

div {
  width: 30%;
  margin: auto;
  background: silver;
  overflow: hidden; /* clearfix */
}

div:before {
  content: "";
  padding-top: 100%;
  float: left;
}

1

2

3

4

5

6

7

8

9

10

11

12

div {

width: 30%;

margin: auto;

background: silver;

overflow: hidden; /* clearfix */

}

div:before {

content: "";

padding-top: 100%;

float: left;

}

играясь параметрами padding-top: 100%; и width: 30% мы получаем ширину и высоту элемента. Не благодарите.
Удобное дополнение для bootstrap .

Вот первоисточник.
ссылка

Стилизация социальных кнопок- быстрая

15.11.2016 Автор:alex

Комментариев нет

это переклик с тех социальных кнопок что сделал верстальщик, на те что реально работают, но не стилизованы. (с помощью сервиса http://social-likes.js.org/ru/) (Добавляем в обертку ready )

jQuery('a.vk').click(function (e) { 
e.preventDefault(); 
jQuery('.social-likes__button_vkontakte').click(); 

}); 
jQuery('.fb').click(function (e) { 
e.preventDefault(); 
jQuery('.social-likes__button_facebook').click(); 
}); 

jQuery('a.ok').click(function (e) { 
e.preventDefault(); 
jQuery('.social-likes__widget_odnoklassniki').click(); 
}); 
jQuery('a.tw').click(function (e) { 
e.preventDefault(); 
jQuery('.social-likes__widget_twitter').click(); 
}); 
jQuery('a.ggl').click(function (e) { 
e.preventDefault(); 
jQuery('.social-likes__widget_plusone').click(); 
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

jQuery('a.vk').click(function (e) {

e.preventDefault();

jQuery('.social-likes__button_vkontakte').click();

});

jQuery('.fb').click(function (e) {

e.preventDefault();

jQuery('.social-likes__button_facebook').click();

});

jQuery('a.ok').click(function (e) {

e.preventDefault();

jQuery('.social-likes__widget_odnoklassniki').click();

});

jQuery('a.tw').click(function (e) {

e.preventDefault();

jQuery('.social-likes__widget_twitter').click();

});

jQuery('a.ggl').click(function (e) {

e.preventDefault();

jQuery('.social-likes__widget_plusone').click();

});

подключаем js и css с сайта http://social-likes.js.org/ru/

<link rel="stylesheet" href="css/social-likes_classic.css">
<script src="/js/social-likes.min.js"></script>

1 2	<link rel="stylesheet" href="css/social-likes_classic.css"> <script src="/js/social-likes.min.js"></script>

вот базовая верстка — от дизайнера

<ul class="social">
<li><a href="#" class="vk" title="vkontakte">Vkontakte</a></li>
<li><a href="#" class="fb" title="facebook">Facebook</a></li>
<li><a href="#" class="ok" title="Odnoklassniki">Odnoklassnii</a></li>
<li><a href="#" class="tw" title="Twitter">Twitter</a></li>
<li><a href="#" class="ggl" title="Google+">Google+</a></li>
</ul>

1

2

3

4

5

6

7

<li><a href="#" class="vk" title="vkontakte">Vkontakte</a></li>

<li><a href="#" class="fb" title="facebook">Facebook</a></li>

<li><a href="#" class="ok" title="Odnoklassniki">Odnoklassnii</a></li>

<li><a href="#" class="tw" title="Twitter">Twitter</a></li>

<li><a href="#" class="ggl" title="Google+">Google+</a></li>

</ul>

вот то что дает этот сервис (http://social-likes.js.org/ru/), добавляем ниже верстки от дизайнера

<div class="social-likes" data-counters="no">
	<div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
	<div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
	<div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
	<div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
	<div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

1

2

3

4

5

6

7

<div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>

<div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>

<div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>

<div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>

<div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>

</div>

добавляем display:none к той верстке что предоставил нам сервис

<div class="social-likes" data-counters="no" style="display:none">
</div>

1 2	<div class="social-likes" data-counters="no" style="display:none"> </div>

А теперь кликаем на иконки что сделал дизайнер)

Выравнивание дивов по высоте.

26.10.2016 Автор:alex

Комментариев нет

Выравнивание дивов по высоте можно сделать использовав функцию Js.

function setEqualHeight(columns)
{
	
	var tallestcolumn = 0;
	columns.each(
	function()
	{
	currentHeight = jQuery(this).height();	
	if(currentHeight > tallestcolumn)
	{
		
	tallestcolumn = currentHeight;
	}
	}
	);
	columns.height(tallestcolumn);
}


пример использования -вставить в ready
//выравнивание по высоте всех стразу пицц, роллов и других
setEqualHeight(jQuery(".proluct_list_with_fon .row>div .thumbnail"));

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

function setEqualHeight(columns)

{

var tallestcolumn = 0;

columns.each(

function()

{

currentHeight = jQuery(this).height();

if(currentHeight > tallestcolumn)

{

tallestcolumn = currentHeight;

}

);

columns.height(tallestcolumn);

}

пример использования -вставить в ready

//выравнивание по высоте всех стразу пицц, роллов и других

setEqualHeight(jQuery(".proluct_list_with_fon .row>div .thumbnail"));

Как из неадаптивной верстки сделать аптивную

23.10.2016 Автор:alex

Комментариев нет

Как из не адаптивной верстки (пиксель в пиксель) сделать адаптивную можно посмотрев видео. В видео показана методика.

сервис для проверки css: http://csslint.net/
Код CSS копируем в поле текстового ввода на странице сервера и жмем кнопку «LINT!». После проверки сервис загружает страницу со списком ошибок и предупреждений. В списке указаны номера строк, в которых были найдены проблемы, и описание.
Недостатком сервиса является полное отсутствие поддержки русского языка. Придется использовать переводчик от Google или Yandex.

О горе-верстальщиках — пиксельная верстка для начинающего верстальщика. Капелька критики.

22.06.2016 Автор:alex

Комментариев нет

При работе веб-программистом, значительная часть задач- это верстка . Ну и приходится за некоторыми проверять их ‘Труды’. Попутно комментируя. Всё что ниже — это часть критики работ. И вообще- начинающим верстальщика будет полезно это почитать. При этом у меня был приступ ярости! Ох… Ну читай те же.