[Ян Ричард Григ]

06.08.2013 в 17:36

Пишет  juanika:

03.08.2013 в 12:35

Пишет  Ai_Yamaneko:

Как сделать оформление поста.
Конечно, если кому-то это интересно и надо. А так же разгребу черновик =^.^=
Главное запомнить одно - все картинки, что будете применять в оформление должны лежать в Вашей Библиотеке изображений!
Все делается через таблицу. Можно и просто применить подложку, а на ней уже прописать код таблицы. По мне так таблицей будет проще, ибо во втором способе приходится подгонять все по фоновой картинке.

Оформление поста.

Здесь может быть ваш текст, например, название фика/видео картинкой в формате png либо оформить его с помощью обычных кодов. Любовь? А что это? Ваш текст фика/рассказа/видео. Это Вы уже сами решите, что писать =) Здесь вы так же можете вставить картинку текста. Если вам это надо, чтобы скрыть некоторую часть поста)

Её код.

Код:

<div align="center"><table width="98%;" style="background: url('/userdir/1/8/9/5/1895947/78986725.jpg')" border="0" cellspacing="0" cellpadding="0">
<tr height="38px;">
<td colspan="3" style="background: url('/userdir/1/8/9/5/1895947/78986968.png');"></td></tr>
<tr>
<td>
<div align="center">Здесь может быть ваш текст, например, название фика/видео картинкой в формате png либо оформить его с помощью обычных кодов.
<div style="text-align: center; font-family: terminal,monaco; color: #1bbcff; font-size:30px; text-shadow: rgb(42, 36, 58) 0px 1px 0px, rgb(42, 36, 58) 0px 0px 1px; ">Любовь? А что это?</div>
<table width="90%;">
<tr>
<td style="color: #282929">
<div align="justify">
Ваш текст фика/рассказа/видео. Это Вы уже сами решите, что писать =)

[MORE=Здесь вы так же можете вставить картинку текста.]Если вам это надо, чтобы скрыть некоторую часть поста)[/MORE]</div>
</td>
</tr>
</table>
</div></td>
</tr>
<tr height="38px;">
<td colspan="3" style="background: url('/userdir/1/8/9/5/1895947/78987662.png');"></td>
</tr>
</table></div>

Ну, а сейчас распишу, что и куда.
Код:

<table width="98%;" style="background: url('/userdir/1/8/9/5/1895947/78986725.jpg')" border="0" cellspacing="0" cellpadding="0">

width="98%" - ваша таблица, Вы можете сделать ее полной, а можете сделать только половину ее. Тут как Вам уже хочется.
style="background: url('/userdir/1/8/9/5/1895947/78986725.jpg')" - фон таблицы. В моем случае это http://static.diary.ru/userdir/1/8/9/5/1895947/78986725.jpg
cellspacing - отвечает за пространство между ячейками таблицы. Ноль стоит по умолчанию.
cellpadding - задает верхнее, нижнее, правое и левое поля ячейки. Ноль стоит по умолчанию.
Еще можно использовать внутри td valign.
1. top - Выравнивание содержимого ячейки по верхнему краю строки.
2. middle - Выравнивание по середине.
3. bottom - Выравнивание по нижнему краю.
4. baseline - Выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.
В бордюре применен colspan, чтобы связать между собой ячейки по горизонтали.

Код:

<tr height="38px;">
<td colspan="3" style="background: url('/userdir/1/8/9/5/1895947/78986968.png');"></td></tr>

Здесь прописан верхний бордюр, аналогично ему внизу есть точно такой же код. Если кому-то их не надо - можно удалить. Так же можно сделать тоже самое, но со столбцом, применив вместо colspan rowspan (связывает между собой ячейки по вертикали).
height - высота ячейки.
width - ширина ячейки.

Еще момент. Цвет текста внутри таблицы можно изменить. Для этого Вам нужно только изменить код цвета после # в этой строке td style="color: #282929"

Простая таблица.

Текст
картинка	текст
текст

<table cellpadding="0" bordercolor="#c5ddea" cellspacing="0" border="3">
<tbody>
<tr>
<td align="center" colspan="3" bgcolor="#182955"><span style="color: #ddf3ff"><b>Текст</b></span></td></tr>  <tr><td>картинка</td><td><span style="color: #182955">текст</span></td></tr>
<tr><td align="center" colspan="2"><span style="color: #182955">текст</span></td></tr>
</tbody> </table>

bordercolor="#c5ddea" - отвечает за цвет рамки
bgcolor="#182955" - фоновый цвет ячейки

Оформление текста.

Любовь? А что это?

<div style="text-align: center; font-family: terminal,monaco; color: #1bbcff; font-size:30px; text-shadow: rgb(42, 36, 58) 0px 1px 0px, rgb(42, 36, 58) 0px 0px 1px; ">Любовь? А что это?</div>

0px 1px 0px; 0px 0px 1px - отвечают за расположение тени.
color - цвет текста.
font-size:30px - размер текста, в данном случае 30пикс.
text-align: center - текст по центру, можно сменить на right и left.

Ваш текст.

<div style="border:3px solid #c5ddea;padding:10px;">Ваш текст.</div>

border - толщина линии
solid - цвет
padding - отступ от краёв

Вставка картинки в текст.

Картинка слева
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

<img src="адрес картинки" style="margin: 0pt 8px 8pt 0pt; float: left;" vspace="2" hspace="4" />Ваш текст

Картинка справа
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

<img src="адрес картинки" style="margin: 0pt 0px 8pt 8pt; float: right;" vspace="2" hspace="4" />Ваш текст 

Текст между двух картинок

<table align="center" border="0"><br />
<tr><br />
<td><img src="адрес картинки" /></td><br />
<td>Ваш текст</td><br />
<td><img src="адрес картинки" /></td><br />
</tr><br />
</table> 

На этом пока всё ^^.