Вёрстка шаблона сайта не всегда лёгкое занятие, ещё тяжелее, когда приходится верстать чужой шаблон, когда не все записи тебе известны. В таких случаях часто возникает проблема с «прокруткой страницы» и если вертикальная прокрутка вполне естественна, хотя тоже порой мешает, то мне не известны случаи, когда была бы естественной горизонтальная.

Бывает, разработал сайт, всё в нём хорошо и дизайн всех устроил и в мобильной версии корректно отображается, и даже с браузерами беды нет, как вдруг, приходится вставить видео в контент. И вот тут то и начинаются беды у верстальщиков, поскольку видео-код предоставляется в «фиксированном» размере и здесь уже не угадаешь либо слишком маленькое на большом размере либо поплывший дизайн у мобильной версии.

Я вообще сторонник идеи, что «чем проще, тем лучше», что разного рода извращения со стилями только портят дизайн и отвлекают от содержимого, но что делать, когда клиент просит? Правильно, клиент всегда прав – а значит делаем. Вот примерно так со смирением я обычно делаю градиент на текст, раньше это делали в Photoshop, вставляя потом картинки на сайт (помните это убожество, да?) теперь можно настройки задавать в CSS.

Работая с одним из сайтов, возникла необходимость отцентрировать по вертикали текст в списке. Всё усложнялось ещё тем, что у каждого элемента был свой собственный list-style-image. Усложнялось, потому что всякие попытки установить свойство display приводило к тому, что изображение списка просто пропадало.

Собственно с данной проблемой столкнулся, когда мне нужно было в форму обратной связи добавить перечень. И если с тегом input сложностей не возникло, то на select почему-то работать не хотел.

Столкнулся с вопросом «рамки» у тега img , а точнее с тем – как её убрать, после того, как удалил атрибут src и решил прописать его через свойство стилей background-image:url всё получилось, как надо – изображение встало там, где мне было нужно, но только вот откуда не возьмись появилась рамка.

При всех ворчаниях, которые у меня происходят при работе с новыми CMS, кое, что меня всё же привлекло в Opencart, а именно то, что шаблоны (по умолчанию) уже настроены под мобильную версию (по крайней мере, версия Opencart 2.3 точно) сайта. Таким образом, небольшие правки цветовой гаммы и, по крайней мере, вопросом дизайна (а в особенности вёрстки) можно не задаваться.

Работая над очередной безумной идеей, столкнулся с вопросом, что нужно было написать стили для элемента с атрибутом name. Поскольку class имел «общий» характер, а id был задействован в javascript’e и дабы исключить фактор «ой, а я и забыл, что ты у меня ещё и к css имеешь отдельную привязку» решил стиль писать по атрибуту name.

SVG (Scalable Vector Graphic) – масштабируемая векторная графика. Я не стал создавать отдельную рубрику для SVG, хотя скорей всего нужно было, но у меня просто не будет времени настолько углублённо изучить эту систему. Поэтому все свои опыты в этом направлении я буду писать именно в xhtml потому что файлы SVG описываются по всем правилам XML и имеют разрешения *.svg и *.svgz.

Работая над очередным сайтом, столкнулся с проблемой вёрстки. Причём, как мне казалось «идеальное решение» вёрстки на деле оказалось пылью в глаза. На самом деле, всё в действительности должно было работать так, как задумал. Но на деле работало только в браузере Chrome, остальные (речь идёт не только про Internet Explorer, разработчики которого похоже разрабатывают браузер для жителей параллельного пространства) не желали воспринимать настройки из файла css.