Ознакомьтесь с нашей политикой обработки персональных данных
08:06 

Линии

D Ash
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, Новая запись, Теги оформления записи

Комментарии
2011-09-27 в 08:22 

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

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

Пример:
 

2011-09-27 в 08:32 

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

2011-09-27 в 10:11 

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

2011-09-27 в 11:14 

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

2011-09-27 в 11:25 

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

2011-09-27 в 11:26 

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

2011-09-27 в 12:37 

[Гер]
Стукнулся ворон головой и сделался добрым молодцем
Спасибо))

2011-09-27 в 12:38 

D Ash
Embrace your dreams and prove your honor...
GerVOlg,
You're welcome. ^_^

2011-09-27 в 13:31 

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

2011-09-28 в 20:50 

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

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

2011-09-28 в 22:24 

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

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

2011-09-29 в 01:09 

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

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

2011-09-29 в 02:20 

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

2012-01-06 в 23:21 

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

2012-01-07 в 04:54 

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

2012-03-11 в 11:28 

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

2012-03-16 в 09:52 

супер

2012-03-25 в 02:43 

D Ash
Embrace your dreams and prove your honor...
michaelgiacchino, jenrudin,
You're welcome. )

2013-01-21 в 22:46 

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

2013-02-03 в 23:25 

D Ash
Embrace your dreams and prove your honor...
*funny*, о чём речь?

2013-02-03 в 23:49 

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

2016-02-29 в 20:45 

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

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



2016-03-17 в 12:06 

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

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

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



2016-03-18 в 19:45 

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

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




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

2016-03-18 в 21:39 

quirischa
администратор
(с капибарой на аватарке)
Eliza Hale, все равно получается расстояние

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

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



2016-03-19 в 14:39 

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

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

@Дневники: секреты, тонкости и хитрости

главная