Метка: css

Вопросы и ответы

Какая верстка лучше – табличная или блочная?

3

Если коротко, то разницы для посетителя сайта между версткой, сделанной на основе вложенных таблиц (table) или верстка блоками (div, span) нет никакой. Верстка сайта не только не влияет на субъективное мнение посетителя, она не влияет и на отношение поисковых роботов.

Гуглу и Яндексу абсолютно все равно, как у вас сверстан сайт, если в нем закрыты теги и они используются в логичной последовательности. Например, теги заголовков второго уровня H2 не должны быть встречаться в коде раньше, чем теги заголовка первого уровня (H1), а выделение текста курсивом или полужирным стилем должно быть уместно и не избыточно.

Качественная верстка сайта

(далее…)

Секреты верстки сайтов

Как окружить фото текстом и задать отступы текста от картинки

13

Ничего сложного в том, чтобы сделать обтекание картинки текстом, нет. В то же время, вопрос какой код нужен для задания отступов текста от картинки или фотографии достаточно распространенный у новичков, которые только начали вести блог или постигать основы html+css. В этой статье я приведу пару типичных решений для создания отступа картинки от текста в виде кода html и css.

Способ 1: Вписываем код отступа текста для отдельной картинки или фотки

Простой способ задания обтекания картинки текстом, не требующий знаний html и css.

Задаем отступ текста для фото Чаще всего встречается задача, когда нужно расположить картинку слева и чтоб при этом ее сверху, справа и снизу окружал текст. Еще желательно, чтобы текст располагался не вплотную к вставленной в статью фотографии или схеме, а немного отступал от картинки. Как правило, большинство админок генерируют код для вставки изображения, при котором картинка располагается слева, а текст начинается не справа вверху от картинки, в справа внизу, что удобно для крохотных иконок, но не подходит для больших картинок. Чтобы сделать обтекание текстом для изображения, как в этом способе, при вставке картинки в статью нужно написать такой код:

1
2
3
4
<img src="здесь_веб-адрес_картинки" alt="" /> alt="Здесь_подсказка_если_картинка_не_загрузлась" title="Здесь_встплывающая_над_картинкой_подсказка" width="ширина_ картинки_в_точках_числом"
height="высота_ картинки_в_точках_числом"
align=”left”
style="margin: 3px 12px 0px 0px;>

Например, для вставки картинки, которую вы видите в этой статье чуть выше, код html и css выглядит так:

1
2
3
4
5
<img src="https://www.web-article.com.ua/wp-content/uploads/2009/12/otstup-kartinka-tekst.jpg" alt="" /> alt="Задаем отступ текста для фото"
title="Задаем отступ текста для фото"
width="300" height="350"
align="left"
style="margin: 3px 12px 0px 0px;>

(далее…)

Секреты верстки сайтов

Простая анимация CSS (спрайты)

5

Никого не удивляют акционные баннеры, иконки или графические меню, сделанные с помощью JavaScript, которые могут слегка меняться при наведении на них указателя мыши. Интерактивная анимация, которая состоит всего из двух кадров (активно/неактивно), имеет ряд преимуществ: она недорогая, легко создается, быстро загружается и при этом заметно оживляет сайт, делая его более дружественным для посетителя. Чаще всего такая двухкадровая css-анимация (также известная как спрайты css), реагирующая на действия пользователя, создается с помощью JavaScript или CSS. В этом уроке мы рассмотрим второй способ, т.к. анимация с помощью каскадных стилей имеет ряд преимуществ перед скриптовой анимацией.

Ярким примером использования возможностей CSS для реализации интерактивной двухкадровой анимации является сайт украинской художницы Елены Миросединой:

Пример анимации css

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

Бесплатно скачать коды урока интерактивной CSS-анимации

(далее…)

Секреты верстки сайтов

Код CSS, который понимает только Internet Explorer

11

Браузер Internet Explorer не всегда утруждает себя соблюдением всех стандартов верстки W3C. В свое время это было «фишкой» Microsoft, которая пользовалась своим монопольным положением на рынке ПО, чтобы еще больше его упрочить. А до этого «вольное трактование» языка разметки помогло победить Netscape. Впрочем, речь в этой статье пойдет не о погибшем браузере и даже не о его победителях.

IE против Mozilla

В результате отступления Майкрософта от некоторых стандартов HTML и CSS код может трактоваться по-разному браузером Internet Explorer и другими, «честными» браузерами (Firefox Mozilla, Opera, Safari и др.). Опытные веб-мастера и html-кодеры знают о нюансах создания качественного кроссбраузерного кода, но новички, у которых еще нет хорошего практического опыта верстки сайтов, часто набивают шишки и вспоминают родителей бывшего главы Microsoft. К сожалению, злость и обвинения – дело неконструктивное. Проблемы лучше решать, опираясь на опыт и шишки, желательно, чужие.

В этой статье я хотел бы рассказать об одной уловке при описании стилей CSS, позволяющей решить распространенную проблему: как сделать так, чтобы код верстки понимался только браузером Internet Explorer, но игнорировался всеми остальными «нормальными» браузерами. При этом JavaScript нам не понадобится, достаточно правок общего стиля CSS.
(далее…)