Работа с CSS

[Faran]

Здравствуйте. Мне нужно сделать блок для текста из 5 картинок.

1 картинка отвечает за верх блока

2 картинка за низ

3 картинка за левую сторону

4 картинка за правую сторону

5 картинка за середину

Думал сделать солидную пачку дивов, но хтмл код будет слишком "грязным". Я делаю первый раз сайт и не знаю более компактных способов.

Мой блок будет 700 пикселей в ширину и в зависимости от текста будет ползти вниз. В нём будут только заголовок H1 и теги <p>

Подскажите пожалуйста, как это можно компактно реализовать?

[Takker]

Я знаю только два способа:

1. пачка div'ов с кучей параметров

2. таблица с объединенными ячейками

Если хочешь, чтобы твое окно растягивалось не только по вертикали, то лучше использовать больше ячеек с картинками:

верх:

- левый верхний угол

- верхняя картинка (рипит по иксу) - растягивание по горизонтали

- правый верхний угол

середина:

- левая граница (рипит по игрику) - растягивание по вертикали

- центральное поле для содержимого (любой размер)

- правая граница (рипит по игрику) - растягивание по вертикали

низ:

- левый нижний угол

- нижняя картинка (рипит по иксу) - растягивание по горизонтали

- правый нижний угол

[Justnewone]

  Faran said:

Здравствуйте. Мне нужно сделать блок для текста из 5 картинок.

1 картинка отвечает за верх блока

2 картинка за низ

3 картинка за левую сторону

4 картинка за правую сторону

5 картинка за середину

Думал сделать солидную пачку дивов, но хтмл код будет слишком "грязным". Я делаю первый раз сайт и не знаю более компактных способов.

Мой блок будет 700 пикселей в ширину и в зависимости от текста будет ползти вниз. В нём будут только заголовок H1 и теги <p>

Подскажите пожалуйста, как это можно компактно реализовать?

Солидная пачка дивов будет меньше (читай - правильней) , а точнее понадобится только 2 (в первом - верхняя часть картинки, во внутреннем втором - нижняя + нужные верхний паддинг в родительском диве, если надо), раз ширина намертво прошита в 700px в данном случае, чем, например, таблица, со всей вереницей обязательных тегов.

[Faran]

Приготовил картинки.http://depositfiles.com/files/fw9wsd37n

Это будет центральный блок на сайте (сайт делаю xhtml transitional) В нём буду размещать новости (далеко не один h заголовок и параграфы)

Спасибо Всем, кто потратил своё время на мою тему.

Edited October 19, 2009 by Faran

[Justnewone]

  Faran said:

Приготовил картинки.http://depositfiles.com/files/fw9wsd37n

Это будет центральный блок на сайте (сайт делаю xhtml transitional) В нём буду размещать новости (далеко не один h заголовок и параграфы)

Спасибо Всем, кто потратил своё время на мою тему.

переложите на всяк случай на яндекс.файлы, я сижу в локалке и из принципа только раз в 100 лет могу скачать с депозита.

[Faran]

http://narod.ru/disk/14283933000/kartinki.rar.html

.topfon {

background:

background-image: url(fon/top.gif);

background-repeat: no-repeat;

background-position: top;

}

.topleft {

background:

background-image: url(fon/left.gif);

background-repeat: no-repeat;

background-position: left;

}

.topright {

background:

background-image: url(fon/left.right);

background-repeat: no-repeat;

background-position: right;

}

.topbottom {

background:

background-image: url(fon/bottom.right);

background-repeat: no-repeat;

background-position: bottom;

}

.topcenter {

background:

background-image: url(fon/center.right);

}

ХТМЛ

<div class="topfon"></div>

<div class="topleft"></div>

<div class="topright"></div>

<div class="topcenter"></div>

Много текста, заголовки и параграфы

<div class="topbottom"></div>

</div></div></div></div></div>

У меня получилась куча дивов и всё не работает. Хотя но-рипит и положение обьекта в css указано.

[Justnewone]

Вы сразу же ставите перед собой неправильную задачу. Картинка у вас вообще статичная. Вы просто в фотошопе склейте этот блок на 2 на 3 и более высот, и посмотрите, что будет, у этого блока шансов красиво вытянуться в высоту просто нет. Этот рисунок рассчитан только на то, чтобы положить текст в див размером точь в точь как рисунок, а картинку (склейнные вместе все 5 частей) эту положить ему в бекграунд. Делая тянущиеся блоки, надо представлять себе как будет выглядеть перспектива увеличения в нужную сторону. Как вариант, который всегда работает, надо нарисовать блок, который тянется в высоту следующим образом: картинка имеет шапки, имеет футер, в мередине должен быть однопиксельный фрагмент, который может быть растянут по высоте сколь угодно много. Далее все просто, два блока, один вставлен в другой, в основной в бекграунд шапка с продолженным вниз с солидным запасом однопиксельным фрагментом. Внутренний див(если скруглены углы) имеет в бекграунде футер, вылазиет вниз отрицательным маргином или релейтив с top:-XXpx, где XX - Высота отрезанного футера. Конечно есть ньюансы, все зависит от картинки, то же самое можно проделать, приклеить тянущийся пиксель к футеру, и прочее. Но в Вашем случае я не вижу варианта, кроме как может илюзорная возможность тянуца по вертикали, превращая звездочки в лошадиные морды.

[Faran]

Эти картинки хоть и не склеиваются в единую, у меня готовиться вариант 1 в 1 по размерам, только идеально отрисованный. К сожалению я понял только это, и до сих пор нуждаюсь в помощи вёрстки.

[Justnewone]

  Faran said:

Эти картинки хоть и не склеиваются в единую, у меня готовиться вариант 1 в 1 по размерам, только идеально отрисованный. К сожалению я понял только это, и до сих пор нуждаюсь в помощи вёрстки.

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

[Sayitright]

Картинки такие синие)

Edited October 19, 2009 by Sayitright

[Faran]

Сейчас выложу то, что должно получиться

[Faran]

http://narod.ru/disk/14291558000/фон под текст.rar.html

Edited October 19, 2009 by Faran

[Justnewone]

  Faran said:

http://narod.ru/disk/14291558000/фон под текст.rar.html

Это нерасширяемая картинка

[Faran]

У меня фиксированная страница, не растягивается, без абсолютного позиционирования.

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

[Justnewone]

  Faran said:

У меня фиксированная страница, не растягивается, без абсолютного позиционирования.

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

Это два блока, один вложен в другой.