John106

3 часа назад, torsar сказал:

https://jsfiddle.net/wm5uk9w6/

 

При position: absolute перестает работать margin: auto.

Почему?

Если вам по центру нужно сделать с помощью position: absolute, то я думаю такой вариант будет намного лучше: https://jsfiddle.net/wm5uk9w6/1/

8 минут назад, brezze сказал:

Если не сложно, посмотри пожалуйста этот код. Что я тут портачу ?) Вместо блоков у меня картинки, но это не суть важно. Если начать уменьшать страничку, красный блок начинает уезжать со своего места в левую сторону. Интересно узнать, как это исправить ? Спасибо 

 

Вот так вам нужно?

1 час назад, asyntrail сказал:

C after не получилось, сделал немного по другому https://jsfiddle.net/asyntrail/6bthsqdr/4/ . Спасибо за подсказку!

Я думаю что так будет намного лучше: https://jsfiddle.net/6bthsqdr/6/

10 минут назад, Igor Schnaider сказал:

Похоже, что meta viewport нет. Но все равно, по сетке у вас выравнивания не получиться. Или вы про другое, может я вопрос неправильно понял.

Да, действительно это не работало потому что я не указал meta viewport (как-то из головы выпало). Теперь все работает как и хотел. Спасибо за отклик.

33 минуты назад, Igor Schnaider сказал:

Если я правильно понял, вам нужно, чтобы колонки тянулись, но при этом были не меньше определенной ширины и не выходили из сетки.

Средствами CSS с флэксами не получиться. (Ну только если нагородить в разметке лишних элементов в качестве заполнителей с нулевой высотой, но это не решение, конечно.)

Я бы JS использовал.

И еще, не знаю, но может на гридах такое возможно?..

Вот как работает этот код который в песочнице в браузере Firefox: Скриншот 1 Скриншот 2

А в браузере Chrome не работает: Скриншот 1 Скриншот 2, хотя когда я делал примеры по верстке Flexbox все в Chrome работало, а когда начал сам делать уже нет. Тут должно без JS работать.

Должны на мобильных экранах все эти элементы быть друг над другом, еще раз повторюсь что в Chrome в режиме адаптива не работает, а в Firefox в этом режиме работает.

Что никто не знает как исправить эту проблему?

Столкнулся с такой проблемой что при уменьшении окна браузера flex-элементы не хотят выстраиваться в один столбец. В песочнице все работает отлично, а когда делаю у себя на компьютере, то не работает. Код один и тот же пишу. На скриншотах все видно.

Код в песочнице

Скриншот 1

Скриншот 2

Проверял в Firefox все работает, а в Chrome нет... Понять не могу почему, хотя как делал примеры все работало, а когда начал сам делать не работает. (это я про то что в хроме не работает)

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

2 часа назад, Gilgamesh сказал:

Добрый день!

Изучаю верстку, сверстал небольшою анимированную галерею.

Вот: https://jsfiddle.net/30g214ru/

И столкнулся с такой проблемой - когда я focus-ом открываю изображение - анимация открытия идет поверх общей галереи картинок, но когда я focus снимаю, происходит анимация закрытия открытого изображения.Но происходит она под галереей картинок.

Как исправить подобную проблему? И возможно ли это?

Я разные варианты с z-index-ом пробовал, ничего не получилось. Проблема в контексте наложения? Но вроде он один в моем коде.

Как-то так: https://jsfiddle.net/30g214ru/1/

51 минуту назад, Igor Schnaider сказал:

Ну вообще, никто не запрещает использовать и то, и другое :-) Я про то, что у них немного разная логика выходит.

Понял, спасибо

2 часа назад, Igor Schnaider сказал:

В случае с flexbox и flex-basis это, скорее, ближе к Element Queries. Media Queries все же завязаны на ширину вьюпорта. Поэтому решайте.

То есть если я захочу использовать Media Queries, то лучше не верстать сайт на FlexBox, я так понял? 

У меня такой вопрос: Если я сверстал сайт на FlexBox, стоит вообще использовать медиа запросы? Или использования FlexBox достаточно для адаптива?

2 минуты назад, Tilonorrinco сказал:

У меня в примере использованы обычные кавычки, а в макете  -- закрывающая "лапка" (”), исправьте в псевдоэлементе content: "”"; 

А, блин, не углядел.

36 минут назад, Tilonorrinco сказал:

John106,

1. Такую же, какую и у дочернего блока wrapper, т.е. .slider { min-width: 1170px; }, аналогично для классов head, foot. 

5. Как-то так: https://jsfiddle.net/7ou5cLyo/

 

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

У меня есть появился вопрос, а можно к списку вместо маркеров использовать картинки через псевдоэлементы, точнее правильно ли это будет по написанию кода?

3 часа назад, Tilonorrinco сказал:

John106,

1. При уменьшении экрана обрезаются изображения в блоках foot и slider. Можно назначить им в стилях минимальную ширину, тогда будет норм. При использовании фоновых изображений нужно прописать также и фоновый цвет, похожий на это изображение, чтобы, в случае проблем с загрузкой фоновых изображений текст на этом фоне хорошо читался. При задании шрифтов также полезно помимо основного шрифта прописывать также и несколько безопасных.

2. Тэгу header нужно прописать класс, на будущее, т.к. хедеров может быть несколько на странице.

3. Названия классов не очень информативны. Css сложнее читать, и приходится смотреть в разметку. Что такое line-bot? Что содержится в этом блоке, какое место этот блок занимает по отношению к другим блокам? Сложно сказать, если не заглянуть в html. Еще один пример: блок внутри секции works назван la-works. Не понятно, что такое 'la'. Информативнее, имхо, будет works-item (классика). 

4. Уменьшение прозрачности шрифта при наведении на кнопку -- некрасиво. Читабельность пропадает. Цвет текста лучше не изменять, вполне достаточно более темного фона. Такие большие отступы я бы повесил не на саму ссылку, а на slider: прописал бы ему минимальную высоту или что-то в этом роде. А ссылке прописал бы только верхнее поле. А то получается -- удалили кнопку -- slider уменьшился до смешных размеров.

5. С оформлением цитаты как-то сложно вышло. Зачем элемент оформления (кавычка) вынесен в разметку? Можно ведь использовать  для этого псевдоэлементы. Почему такие странные поля у параграфа с цитатой (кстати, для такой цитаты можно использовать тег <blockquote>): зачем прописывать ему отступ слева в 217 пикселей, чтобы просто выровнять его по центру?

1. Не заметил что обрезаются при уменьшении экрана. Какую минимальную ширину ему указать? А то я пробую что-то у меня не получается.

3. Когда следующий шаблон буду верстать, буду называть классы более информативно.

4. Хорошо, исправлю.

5. С псевдоэлементами еще не сильно знаком, подскажите какой там лучше использовать? Я даже как-то не подумал что можно было этим тегом воспользоваться. Просто не знал как по центру его сделать вот и прописал такой отступ.

И да, спасибо за вашу критику.

1 час назад, shamil_ozdemirov сказал:

здоров John106 скинь мне этот макет

Держи

Оцените первую мою верстку сайта. Верстал без JS, жду адекватной аргументированной критике по коду. Вот ссылка на верстку

Макет по которому я верстал:

Можете подсказать с чего лучше всего начать учить front-end разработку? Буду очень благодарен вам.