Перейти к содержимому
La2Base
Главная
ЗагрузкиВикиФорумFAQ
Поиск
ruen
Регистрация Войти
ГлавнаяФайлыВикиВойти
  • Главная
  • Загрузки
  • Вики
  • FAQ
  • Обратная связь
  • О проекте
  • Правила
  • Конфиденциальность
  • Условия использования

© 2026 la2base.com · Все права защищены

ruen
Форум/Работа с Графикой/[help] Вопрос по верстке
Поиск

[help] Вопрос по верстке

16 ответов481 просмотровСейчас просматривают: 1
agnitium
agnitium

Пользователь

Ветеран

Постов: 1298

На форуме с: 07.03.2008

Репутация: +351

Рейтинг: 0

· 14.05.2009, 16:15

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

— Дизайны на заказ 1236548

0
Андрей
Андрей

Пользователь

Ветеран

Постов: 751

На форуме с: 30.11.2008

Репутация: +119

Рейтинг: 0

· 14.05.2009, 18:14

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

— Newbie&#33;

0
Руслан
Руслан

Модератор

Ветеран

Постов: 1201

На форуме с: 14.12.2007

Репутация: +775

Рейтинг: 0

· 14.05.2009, 18:28

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

На Форуме я тоже Radar!
Я везде Radar!

0
agnitium
agnitium

Пользователь

Ветеран

Постов: 1298

На форуме с: 07.03.2008

Репутация: +351

Рейтинг: 0

· 14.05.2009, 18:34

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

Код
<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>
- вот это и есть тот листочек на котором и пишется обычно текст, вот мне надо узнать, каким образом переписать это дело, что бы корректно отображался текст именно на этом листочке не корежив диз.

— Дизайны на заказ 1236548

0
Руслан
Руслан

Модератор

Ветеран

Постов: 1201

На форуме с: 14.12.2007

Репутация: +775

Рейтинг: 0

· 14.05.2009, 18:38

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


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

На Форуме я тоже Radar!
Я везде Radar!

0
agnitium
agnitium

Пользователь

Ветеран

Постов: 1298

На форуме с: 07.03.2008

Репутация: +351

Рейтинг: 0

· 14.05.2009, 18:53

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

Код
<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>

Но теперь другой вопрос, как сделать что бы текст не пытался растягиваться а получился "скорл" [attachment=3342:__________.png]

— Дизайны на заказ 1236548

0
Руслан
Руслан

Модератор

Ветеран

Постов: 1201

На форуме с: 14.12.2007

Репутация: +775

Рейтинг: 0

· 14.05.2009, 19:05

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

Именно по твоему вопросу:
_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/
Если что пиши (только не сегодня smile3.gif ), чем смогу помогу.

На Форуме я тоже Radar!
Я везде Radar!

0
agnitium
agnitium

Пользователь

Ветеран

Постов: 1298

На форуме с: 07.03.2008

Репутация: +351

Рейтинг: 0

· 27.05.2009, 14:39

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




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

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

— Дизайны на заказ 1236548

0
Руслан
Руслан

Модератор

Ветеран

Постов: 1201

На форуме с: 14.12.2007

Репутация: +775

Рейтинг: 0

· 27.05.2009, 21:55

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



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

  • 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.

На Форуме я тоже Radar!
Я везде Radar!

0
sanja
sanja

Пользователь

Бывалый

Постов: 197

На форуме с: 26.08.2008

Репутация: +280

Рейтинг: 0

· 27.05.2009, 22:03

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

0
KKKrevedko
KKKrevedko

Пользователь

Бывалый

Постов: 206

На форуме с: 11.07.2008

Репутация: +346

Рейтинг: 0

· 30.05.2009, 10:25

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

http://la2base.ru/client/dop_client/1879-djevid-blejjn-dobralsja-i-sjuda.html Девид блейн добрался и сюда.(c)KKKrevedko

— Client Developer

0
Руслан
Руслан

Модератор

Ветеран

Постов: 1201

На форуме с: 14.12.2007

Репутация: +775

Рейтинг: 0

· 30.05.2009, 13:43

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


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

На Форуме я тоже Radar!
Я везде Radar!

0
BestMan
BestMan

Пользователь

Бывалый

Постов: 102

На форуме с: 17.09.2008

Репутация: +608

Рейтинг: 0

· 02.06.2009, 18:28

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

0
Руслан
Руслан

Модератор

Ветеран

Постов: 1201

На форуме с: 14.12.2007

Репутация: +775

Рейтинг: 0

· 02.06.2009, 23:16

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


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

На Форуме я тоже Radar!
Я везде Radar!

0
KKKrevedko
KKKrevedko

Пользователь

Бывалый

Постов: 206

На форуме с: 11.07.2008

Репутация: +346

Рейтинг: 0

· 03.06.2009, 14:39

Кстати

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

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

http://la2base.ru/client/dop_client/1879-djevid-blejjn-dobralsja-i-sjuda.html Девид блейн добрался и сюда.(c)KKKrevedko

— Client Developer

0
agnitium
agnitium

Пользователь

Ветеран

Постов: 1298

На форуме с: 07.03.2008

Репутация: +351

Рейтинг: 0

· 03.06.2009, 15:34

KKKrevedko: Кстати

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

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

— Дизайны на заказ 1236548

0
Тема закрыта для ответов