Линии

[D Ash]

Немного о них.

Самый простой способ добавить горизонтальную линию - тэг <hr>. Я им довольно часто пользуюсь, ибо удобно при разделении контента.

---

Но есть ещё один способ рисовать тэгами. Верно, добавлять бортики к другим тэгам. Если коротко, это выглядит примерно так:

<div style="border:1px solid #000; width:50px; height:50px;"></div>

Где первый параметр - толщина, второй - тип (solid, dotted, dashed, double, groove, ridge, inset, outset), а третий - цвет. Можно описывать бортики только с каких-то конкретных сторон:

border-top: ...;
border-bottom: ...;
border-left: ...;
border-right: ...;

А теперь простой пример. ^_^

<table>
<tr><td style="border-left:1px solid #000; width:50px; height: 50px;"> </td><td style="border-top:1px solid #000; border-bottom:1px solid #000; width:50px;"> </td><td style="border-top:1px solid #000; border-right:1px solid #000; width:50px;"> </td><td style="width:50px;"> </td></tr>
<tr><td style="border-left:1px solid #000; border-right:1px solid #000; height:50px;"> </td><td> </td><td style="border-bottom:1px solid #000;> </td><td style="border-top:1px solid #000; border-right:1px solid #000;"> </td></tr>
<tr><td style="border-left:1px solid #000; border-bottom:1px solid #000; height:50px;"> </td><td style="border-top:1px solid #000; border-right:1px solid #000;"> </td><td style="border:1px dotted #f00;"> </td><td style="border-right:1px solid #000;"> </td></tr>
<tr><td> </td><td style="border-left:1px solid #000; border-bottom:1px solid #000; height:50px;"> </td><td style="border-top:1px solid #000; border-bottom:1px solid #000;"> </td><td style="border-top:1px solid #000; border-right:1px solid #000; border-bottom:1px solid #000;"> </td></tr>
</table>

@темы: CSS, Теги оформления записи, Новая запись

Comments

[alhames]

Самый простой способ добавить горизонтальную линию - тэг <hr>. Я им довольно часто пользуюсь, ибо удобно при разделении контента.

А еще это самый хреновый способ) IE не понимает его стилизацию и оформляет по своему. По-этому надежнее:

<div style="height:1px;font-size:0;background:#0f0;">&nbsp;</div>

Пример:

 

[D Ash]

alhames,
Верно. Но тут же идёт перегрузка кода при попытке чтения. Кроме того, если у кого-то фон дневника зелёный - в ленте видно вообще не будет. Это к вопросу о забивании цветов в "style", оно на каждом оформлении будет по-своему (тут разве что с чёрно-белой палитрой можно работать в силу её нейтральности, хотя видимость всё равно будет варьироваться). А стандартный внешний вид hr лично меня вполне устраивает.

[alhames]

D Ash, ну если текст требуется просто отформатировать так, чтоб он был читабельным - то да, hr подойдет.
А если стилизовать - то ну его нафик)

[Чудеснов]

дайри - не место для css
когда border-bottom-right-radius:30px заменяется на border-bottom-right:radius:30px, о чем вообще можно говорить?

[D Ash]

Чудеснов,
Просто использовать вещи проще. В конце концов, если хочется абсолютной свободы, надо просто создавать свой сайт на своём хостинге. В дайри есть большая часть, при желании этого вполне достаточно, чтобы сделать что-нибудь интересное и красивое.

[Чудеснов]

D Ash, ой, добро пожаловать на wordpress.com, lj.ru, tumblr.com, posterous.com - нигде такого маразма, как здесь, нет.

[[Гер]]

Спасибо))

[D Ash]

GerVOlg,
You're welcome. ^_^

[Тайя.]

А я люблю юзать <hr> Не понимает его IE, да и фиг с ним.

[a-s-k-a]

Странно. У меня hr в IE отображается...

Только не совсем понятно, зачем все эти неполные рамочки использовать? Для чего?.. Забавно, но зачем это нужно-то?

[D Ash]

a-s-k-a,

Странно. У меня hr в IE отображается...

Так он и должен. Вопрос выше был из-за того, что IE оформляет их несколько по-другому.

Только не совсем понятно, зачем все эти неполные рамочки использовать? Для чего?.. Забавно, но зачем это нужно-то?

Выделение темы топика. Оформление чего-либо. Построение какого-нибудь "древа". Мало ли, разные случаи бывают (скажем, в моём дневе толстые линии слева и справа используются на классе "quote_text", том, что для цитат, чтобы читалось лучше).

[a-s-k-a]

Ну, "quote_text" толстыми линиями справа и слева - это для "гурманов"

А "древа" лучше строить в Ворде (раньше там была Вставка-Объект-Организационная диаграмма (кажется так) - и это было очень удобно, сейчас я что-то не нашла этого): надписи, линии, заливки, потом Print Screen, обрезать, сохранить как gif и вставить картинку. Ей-богу, нагляднее и быстрее, чем ручками писать код таблицы с рамочками... ИМХО.

примерчик

5 минут на все...

[D Ash]

a-s-k-a,

Ну да. Допустим. Ещё быстрее - нарисовать в photoshop и сохранить как png. А уж о возможностях вообще заикаться не придётся. Но, повторюсь, - случаи разные бывают. Пример с таблицей - исключительно для демонстрации. А накинуть на блок рамку можно всегда - это 30 секунд максимум. + padding пикселей на 5-15, и получается аккуратный блок. Вот как этот.

[Lariday]

Написала код. Таблица появилась. Опубликовала. После того как отредактировала запись, не код даже а текст перед ним, вся таблица пропала. При редактировании отображается пунктиром, при публикации исчезает. Как ее вернуть?

[D Ash]

Lariday,
При редактировании внимательно посмотрите на окно редактирования. Выберите там HTML и никогда больше не пользуйтесь визуальным редактором, он забагованый. Переключитесь, проверьте код, поправьте ошибки.

[michaelgiacchino]

Отличный блог, мерси

[jenrudin]

супер

[D Ash]

michaelgiacchino, jenrudin,
You're welcome. )

а как типа таблички сделать? Спасибо.

[D Ash]

*funny*, о чём речь?

да я уже разобралась. спасибо за отклик. D Ash,

[Eliza Hale]

Нужна помощь
Почему отодвигается текст с левой стороны?
И как сделать верхнею и нижнюю границу на всю таблицу?

222 333 666

556+8 554696 25562

51445 255612 2562

1662 2652202 2562 22562

<table><tr><td><td style="border-left:1px solid #000; width:50px; height: 50px;"><td style="border-top:1px solid #000; border-bottom:1px solid #000;">222
333
666
<td><td style="border-left:1px solid #000; width:50px; height: 50px;">556+8
554696
25562</td>
<td><td style="border-left:1px solid #000; width:50px; height: 50px;">51445
255612
2562</td>
<td><td style="border-left:1px solid #000; width:50px; height: 50px;">1662
2652202
2562
22562<td style="border-right:1px solid #000; width:000px; height: 50px;"></td><td style="border-top:1px solid #000; border-bottom:1px solid #000;"></td></tr>
</table>

[quirischa]

Eliza Hale,

Почему отодвигается текст с левой стороны?

вот такой код работает:

222 333 666

556+8 554696 25562

51445 255612 2562

1662 2652202 2562 22562

<table><tr><td><td style="border-left:1px solid #000; "><td style="border-top:1px solid #000; border-bottom:1px solid #000;">222
333
666
<td><td style="border-left:1px solid #000; width:50px; height: 50px;">556+8
554696
25562</td>
<td><td style="border-left:1px solid #000; width:50px; height: 50px;">51445
255612
2562</td>
<td><td style="border-left:1px solid #000; width:50px; height: 50px;">1662
2652202
2562
22562<td style="border-right:1px solid #000; width:000px; height: 50px;"></td><td style="border-top:1px solid #000; border-bottom:1px solid #000;"></td></tr>
</table>

[Eliza Hale]

quirischa, спасибо
все равно получается расстояние

222 333 666

556+8 554696 25562

51445 255612 2562

1662 2652202 2562 22562

<table><tr><td><td style="border-left:1px solid #000; "><td style="border-top:1px solid #000; border-bottom:1px solid #000;">222
333
666
<td><td style="border-left:1px solid #000; width:50px; height: 50px;"><td style="border-top:1px solid #000; border-bottom:1px solid #000;">556+8
554696
25562</td>
<td><td style="border-left:1px solid #000; width:50px; height: 50px;"><td style="border-top:1px solid #000; border-bottom:1px solid #000;">51445
255612
2562</td>
<td><td style="border-left:1px solid #000; width:50px; height: 50px;"><td style="border-top:1px solid #000; border-bottom:1px solid #000;">1662
2652202
2562
22562<td style="border-right:1px solid #000; width:000px; height: 50px;"></td><td style="border-top:1px solid #000; border-bottom:1px solid #000;"></td></tr>
</table>

Может есть код что бы сразу на все колонки сделать линию? Или только для каждой колонки вставлять отдельно?

[quirischa]

Eliza Hale,

все равно получается расстояние

а вы поудаляйте везде "width:50px; height: 50px;"

222 333 666

556+8 554696 25562

51445 255612 2562

1662 2652202 2562 22562

<table><tr><td><td style="border-left:1px solid #000; "><td style="border-top:1px solid #000; border-bottom:1px solid #000;">222
333
666
<td><td style="border-left:1px solid #000;"><td style="border-top:1px solid #000; border-bottom:1px solid #000;">556+8
554696
25562</td>
<td><td style="border-left:1px solid #000;"><td style="border-top:1px solid #000; border-bottom:1px solid #000;">51445
255612
2562</td>
<td><td style="border-left:1px solid #000;"><td style="border-top:1px solid #000; border-bottom:1px solid #000;">1662
2652202
2562
22562<td style="border-right:1px solid #000;"></td></tr>
</table>

[Eliza Hale]

quirischa, о, спасибо большое за помощь.