Цитата сообщения Kleooa Учимся делать рамочки.11

урок - 11



Цитата сообщения _Н_А_Т_А_Л_И_Я_

Учимся делать рамочки 11

Теперь продолжим наш предыдущий урок и вставим нашу картинку сбоку,но уже
в сложную рамочку.За основу возьму рамочку с 4-мя слоями:

ВАШ ТЕКСТ

Теперь загружаю картинку,как мы делали это в прошлом уроке(один совет не
берите очень широкие картинки)и вставляю в рамочку между слоями,как мы это делали в предыдущих уроках с прямыми рамочками.
Вот так:

Здесь подчеркнуты те два слоя,которые будут нашей внешней рамочкой:

здесь те слои,которые будут нашей внутренней рамочкой:

Теперь будем регулировать наши размеры,
размер нашей внутренней рамочки ставим так чтобы сумма ,размера картинки и ее размера ,не превышала размера внешней рамочки,а была бы примерно равной ей .

И мы получаем такой вид рамочки:

ВАШ ТЕКСТ

Как видем вид не очень притягательный.
Теперь делаем следующее:
Перед картинкой ставим вот
этот тег со следующими характеристиками:

1.устанавливаем жестко:

2.уравниваем размер по картинки:

И получаем такой вид рамочки:

ВАШ ТЕКСТ

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

Вот так:

И мы получим вот такой вид рамочки:

ВАШ ТЕКСТ

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