08:06

Линии

Embrace your dreams and prove your honor...
Немного о них.

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



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




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

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


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

    
    
    
    




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

Комментарии
27.09.2011 в 08:22

alhames.ru
Самый простой способ добавить горизонтальную линию - тэг <hr>. Я им довольно часто пользуюсь, ибо удобно при разделении контента.
А еще это самый хреновый способ) IE не понимает его стилизацию и оформляет по своему. По-этому надежнее:

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

Пример:
 

27.09.2011 в 08:32

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

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

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

Embrace your dreams and prove your honor...
Чудеснов,
Просто использовать вещи проще. В конце концов, если хочется абсолютной свободы, надо просто создавать свой сайт на своём хостинге. В дайри есть большая часть, при желании этого вполне достаточно, чтобы сделать что-нибудь интересное и красивое.
27.09.2011 в 11:26

молодой динамично развивающийся
D Ash, ой, добро пожаловать на wordpress.com, lj.ru, tumblr.com, posterous.com - нигде такого маразма, как здесь, нет.
27.09.2011 в 12:37

"DON'T PANIC"(с) Стукнулся ворон головой и сделался добрым молодцем
Спасибо))
27.09.2011 в 12:38

Embrace your dreams and prove your honor...
GerVOlg,
You're welcome. ^_^
27.09.2011 в 13:31

Не говорите так быстро, я не успеваю класть х*р на ваши слова.
А я люблю юзать <hr> Не понимает его IE, да и фиг с ним.
28.09.2011 в 20:50

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

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

Embrace your dreams and prove your honor...
a-s-k-a,
Странно. У меня hr в IE отображается...
Так он и должен. Вопрос выше был из-за того, что IE оформляет их несколько по-другому.

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

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

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

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

06.01.2012 в 23:21

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

Embrace your dreams and prove your honor...
Lariday,
При редактировании внимательно посмотрите на окно редактирования. Выберите там HTML и никогда больше не пользуйтесь визуальным редактором, он забагованый. Переключитесь, проверьте код, поправьте ошибки.
11.03.2012 в 11:28

Отличный блог, мерси
16.03.2012 в 09:52

супер
25.03.2012 в 02:43

Embrace your dreams and prove your honor...
michaelgiacchino, jenrudin,
You're welcome. )
21.01.2013 в 22:46

а как типа таблички сделать? Спасибо.
03.02.2013 в 23:25

Embrace your dreams and prove your honor...
*funny*, о чём речь?
03.02.2013 в 23:49

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

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

222
333
666
556+8
554696
25562
51445
255612
2562
1662
2652202
2562
22562



17.03.2016 в 12:06

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

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

222
333
666
556+8
554696
25562
51445
255612
2562
1662
2652202
2562
22562



18.03.2016 в 19:45

Смерть - это не угасание. Это выключение лампы потому что наступил рассвет.
quirischa, спасибо
все равно получается расстояние

222
333
666
556+8
554696
25562
51445
255612
2562
1662
2652202
2562
22562




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

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

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

222
333
666
556+8
554696
25562
51445
255612
2562
1662
2652202
2562
22562



19.03.2016 в 14:39

Смерть - это не угасание. Это выключение лампы потому что наступил рассвет.
quirischa, о, спасибо большое за помощь.