class DarkRaha extends com { // разработка приложений
            String a="Главная" b="Контакты" c="О сайте"
};

введение
css селекторы
внедрение стилей
значение свойств стилей
передний, задний фон
текст
шрифт
боксовая модель
поля, отступы
настройка рамки
позиция и размеры элемента
плавающие элементы
обтекание и наложение текста
разбиение на столбцы
ссылки
списки
видимость элемента
выпадающее меню
таблицы
устройства

Справочник по CSS

Обтекание и наложение текста на изображение

Пусть имеется xhtml код


<img id=picture src="logo01.gif" alt="test"/>
<p>Здесь много много какого-то текста...</p>

Без стилей текст будет под изображением. Чтобы получить обтекание текста добавляется стиль: #picture {float:left;}

Если необходимо наложить текст на изображение, то изображение помещается в блок div


<div id=picture>
<img  src="logo01.gif" alt="test" />
</div>
<p>Здесь много много какого-то текста...</p>

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


#picture {
float:left;
width:20px;
}
test
Здесь много много много текста, ну просто очень много текста

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


<div style="width:238px; 
height: 110px;
background-image: 
url(/res/logo01.gif);">
Здесь много много много текста
</div>
Здесь много много много текста

Если вы ориентируетесь на IE, то для наложения первый способ не подойдет, там изображение накладывается на текст. В этом случае можно применить абсолютное позиционирование и задать z координату явно.


<div>
<img src="/res/logo01.gif" 
style="position:absolute; z-index:-1;"
alt="test" />
Здесь много много много текста, 
ну просто очень много текста
</div>
test2

Здесь много много много текста, ну просто очень много текста


Рейтинг@Mail.ru