[agnitium]

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

[Andrey108]

Может я чего-то не понял,но думаю тег <pre>...</pre> подойдет.(Текст будет написан также как и в редакторе - строчки также,переносы и т.д.)

Сообщение отредактировал Andrey108 - 14.5.2009, 21:09

[Radar]

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

[agnitium]

Меня наверно не поняли
Допустим я разрезал в фотошопе картинку.
Вот кусочек кода, что выдает фотошоп при сохранении в веб

Код

<tr>
        <td rowspan="6">
            <img src="skins/proba/images/334_07.gif" width="62" height="243" alt=""></td>
        <td>
            <img src="skins/proba/images/334_08.gif" width="156" height="60" alt=""></td>
        <td rowspan="9">
            <img src="skins/proba/images/334_09.gif" width="46" height="815" alt=""></td>
        <td colspan="2" rowspan="8">
            <img src="skins/proba/images/334_10.gif" width="554" height="790" alt=""></td>

        <td colspan="2" rowspan="7">
            <img src="skins/proba/images/334_11.gif" width="206" height="501" alt=""></td>
        <td>
            <img src="skins/proba/images/spacer.gif" width="1" height="60" alt=""></td>
    </tr>

Код

<td colspan="2" rowspan="8">
            <img src="skins/proba/images/334_10.gif" width="554" height="790" alt=""></td>

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

[Radar]

Код

<td colspan="2" rowspan="8" style="background: url('skins/proba/images/334_10.gif') no-repeat; width: 554px; height: 790px;">ТЕКСТ</td>

ну а я имел ввиду это.

[agnitium]

хорошо с этим я разобрался должно было получится вот это

Код

<td colspan="2" rowspan="8" style="background: url('skins/proba/images/334_10.gif') no-repeat; width: 554px; height: 790px;"><?php
if (file_exists('module/'.$id . '.php'))
include('module/'.$id . '.php');
else
{
include('module/eror.php');
}
?></td>

Но теперь другой вопрос, как сделать что бы текст не пытался растягиваться а получился "скорл"  __________.png ( 1.25 килобайт ) Кол-во скачиваний: 25

[Radar]

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

Именно по твоему вопросу:
_http://www.4webmaster.ru/articles/85/

И вот несколько просто полезно иметь под рукой:
_http://www.xiper.net/html-and-css-tricks/verstka-form/blochnaya-verstka-form.html
_http://softwaremaniacs.org/blog/category/web/primer/
Если что пиши (только не сегодня ), чем смогу помогу.

[agnitium]

Добрый вечер.
Допустим имеется вот такой дизайн.




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

Верстка таблицами

[Radar]

Ну поехали...



Итак порежем макет (я беру во внимание только главный блок, который мы и будем растягивать) следующим образом:

• 1, 3, 6 и 8 элементы разрезать лучше одинаковыми равносторонними квадратами (т.к. проще верстать будет), но из-за того что ввержу присутствует градиент надо быть повнимательнее с этим делом.
• Далее отрежем 2, 4, 5 и 7 элементы тоже равными долями например квадратами 10 х 10px.
• Ну и наконец элемент обозначенный на рисунке номером 9 - тут все зависит от того из чего он состоит, в данном случае это тупо белый цвет (при условии того что в вырезанные элементы 1,2,3 уместился весь Градиент), следовательно тут нам резать ничего ненадо мы просто сделаем заливку Белым цветом посредством HTML

Все картинки порезанные выше я буду обозначать по соответствующим номерам (1.jpg, 2.jpg, ..., 8.jpg. А фон элемента 9 в формате RRGGBB выглядит так - F1EFFO)

Ну вроде бы разрезали.
Теперь приступим к сбору элементов в одну таблицу (т.к. речь идет о табличной верстке) и постараемся перенести то что мы видим на картинке в HTML:

Начнем с HTML и впишем туда для начала просто таблицу, состоящую из 3-х ячеек и 3-х столбцов.

HTML

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Она у нас будет основой - с ней мы и будем работать.

Далее мы либо с помощью css либо с помощью тега style в HTML вставляем эти картинки в таблицу, при этом мы обязательно указываем что элементы 1,3,6 и 8 повторяться не должны с помощью параметра no-repeat, а вот элементы 2, 4, 5 и 7 делаем повторяющимися по следующей схеме - 2 и 7 по оси Х, а 4 и 5 по оси У, то есть repeat-x и repeat-y соответственно.
а элемент 9 мы воспроизведем цветом фона нужной ячейки таблицы.

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

HTML

<table align="left" valign="top" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="64px">
<td style="background: url('img/1.jpg') no-repeat; width: 64px; height:64px;">&nbsp;</td>
<td style="background: url('img/2.jpg') repeat-x; height:64px;">&nbsp;</td>
<td style="background: url('img/3.jpg') no-repeat; width: 64px; height:64px;">&nbsp;</td>
</tr>
<tr>
<td style="background: url('img/4.jpg') repeat-y; width: 64px;">&nbsp;</td>
<td style="background: #F1EFF0;">Сюда мы вставляем нужный текст и смотрим на разных разрешениях экрана.</td>
<td style="background: url('img/5.jpg') repeat-y; width: 64px;">&nbsp;</td>
</tr>
<tr height="64px">
<td style="background: url('img/6.jpg') no-repeat; width: 64px; height:64px;">&nbsp;</td>
<td style="background: url('img/7.jpg') repeat-x; height:64px;">&nbsp;</td>
<td style="background: url('img/8.jpg') no-repeat; width: 64px; height:64px;">&nbsp;</td>
</tr>
</table>

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

Ну если вопросы будут - милости прошу - описываем ситуацию, на выходе получаем мини урок.
Но весь ХТМЛ разжевывать каждому не собираюсь, так что прошу обращаться знающих хотя бы минимум в ХТМЛ.

© Radar.

[stress]

использую такой же метод верстки

[KKKrevedko]

radar,жаль опередил)
Вообще хватило бы 3 ячеек.Зачем девять?

[Radar]

radar,жаль опередил)
Вообще хватило бы 3 ячеек.Зачем девять?

9-ю ячейками я показал что можно не только по горизонтали тянуть, но и по вертикали.

[BestMan]

Создай тогда лучше уже отдельный файл стиля.

[Radar]

Создай тогда лучше уже отдельный файл стиля.

Читай внимательно или не пиши вообще:

Далее мы либо с помощью css либо с помощью тега style в HTML вставляем эти картинки в таблицу,...

[KKKrevedko]

Кстати

Но теперь другой вопрос, как сделать что бы текст не пытался растягиваться а получился "скорл"

Для этого надо просто применить к ячейке с текстом стиль overflow
Почитать об этом можно тут: http://www.htmlbook.ru/css/overflow.html

[agnitium]

Кстати

Для этого надо просто применить к ячейке с текстом стиль overflow
Почитать об этом можно тут: http://www.htmlbook.ru/css/overflow.html

со скорлом давно разобрался уже)