Отправлено: 04.01.11 14:10. Заголовок: Даешь уроки css!

цитата:

Zoltan пишет:  цитата: может, мне уже уроки css писать начинать пора xD Камрад! Давно пора! Если тебе требуется особое благословение, считай, что мы всем форумом тебе его дали))

Предлагаю всем высказаться по данному вопросу. Дело-то ведь полезное, и ни кто-нибудь, а наш родной и знакомый Золтан решил совершить сей подвиг во благо форумного ролевого движения! Давайте его поддержим!

 Отправлено: 28.01.12 15:56. Заголовок: Morfus пишет: всё ч..

Morfus пишет:

цитата:

всё что прописано для стилей прямо в скрипте, можно переопределить с помощью !important.

а если в скрипте уже будет стиль с параметром !important? ;)

говорю же, не критично, но неудобно. Да и вообще, считается дурным тоном..

Morfus пишет:

цитата:

Про Борду разговор отдельный, я этого сейчас не касаюсь.

привёл в качестве примера.
и кстати, весь этот скрипт с цитатой на том же принципе основан, что более "поздние" параметры срабатывают вместо "ранних".

 Отправлено: 30.01.12 13:52. Заголовок: Zoltan пишет: а есл..

Zoltan пишет:

цитата:

а если в скрипте уже будет стиль с параметром !important? ;)

Не будет. Код пишется с расчётом, чтобы было корректное отображение при наличии кривых ручек, но для знающего пользователя всегда оставляется возможность сделать по своему. !important не дурной тон, а вполне корректный инструмент. Если использовать по назначению.

 Отправлено: 30.01.12 14:22. Заголовок: Morfus пишет: Код п..

Morfus пишет:

цитата:

Код пишется с расчётом, чтобы было корректное отображение при наличии кривых ручек

Э? там ни на что не влияющий отступ в 5 пикселей и дурацкая полоса прокрутки в теле цитаты.
Это само по себе не есть корректное отображение - кому нужны лишние полосы прокрутки? Они обычно только мешают, когда содержимое блока нужно показать целиком, например, при чтении цитат. Так что нет, там изначально пишется не с расчётом на кривые руки, а, видимо, по индийскому методу, не иначе.

Morfus пишет:

цитата:

!important не дурной тон

моветон не !important, а прописывать стили в хтмл.

 Отправлено: 31.01.12 14:45. Заголовок: Zoltan Прокрутка не..

Zoltan
Прокрутка не дурацкая. Меня дико раздражают километровые посты-цитаты. А тут аккуратное отображение.

Zoltan пишет:

цитата:

Так что нет, там изначально пишется не с расчётом на кривые руки, а, видимо, по индийскому методу, не иначе.

Вы гадаете, а я знаю. *пожимает плечами*

Zoltan пишет:

цитата:

моветон не !important, а прописывать стили в хтмл.

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

 Отправлено: 31.01.12 18:42. Заголовок: Morfus пишет: Меня ..

Скрытый текст

Morfus пишет:  цитата: Меня дико раздражают километровые посты-цитаты. а меня дико раздражают блоки с прокруткой, т.к их надо прокручивать; скорость чтения позволяет читать больше 200px, а бесконечная прокрутка бьёт по глазам. В случае, если бы безымянные пейсатели кода учитывали юзабилити, то припаяли бы кнопку "развернуть" к цитате, чего нет. Думаю, я не один такой, кто в состоянии прочитать больше трёх строчек за раз. Morfus пишет:  цитата: Вы гадаете, а я знаю о нет, я всего лишь констатирую факт. Тот код не спасёт от кривых ручек, даже наоборот, признак этих самых кривых ручек. Morfus пишет:  цитата: Учитывая, что в исходном коде страницы не видно какая часть кода выведена системным кодом вида Да, это можно вырезать из шаблона, я в курсе. Но это есть в исходном варианте шаблона, прописанном розрабами. В юкозе нюансы? право, Америку открывать не надо, я пару раз имел дело с сайтами на юкозе, никаких нюансов там нет. Кроме невозможности пройти валидатор.

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

 Отправлено: 31.01.12 19:33. Заголовок: Аналогично. Мне вооб..

Аналогично. Мне вообще спорить в таких темах не интересно. Фломастеры, они и в Африке фломастеры и любое категоричное мнение смотрится как минимум странно. В любом случае следует как факт принимать движок сервиса и использовать его преимущества.
uCoz хорош тем, что доступ к изменению кода страниц там значительно больше, чем на Борде или даже миббе. Больше только на том движке, что сам ставишь. В отличие от Борды там для форума предусмотрены идентификаторы для практически 100% элементов и стилями можно сделать достаточно много. Хотя доступ к шаблонам тоже хорошее решение.

Скрытый текст

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

 Отправлено: 10.02.12 17:04. Заголовок: А можно глянуть (при..

А можно глянуть (пример), о чем вы так горячо спорили? Что там такое на юкозе страшное?
Потом попробую что-то в цитате поменять, с помощью -

Zoltan пишет:

цитата:

распишу что зачем в этом стиле, ведь не обязательно ставить именно такую цитату, всё самое "вкусное" - в настройке под себя)

Как время найду.

 Отправлено: 12.02.12 08:40. Заголовок: Serifa Просто юкоз г..

Serifa
Просто юкоз генерирует хтмл-код, в котором некоторые стили уже прописаны, на счёт них и спорили В основном, это строчка
<div class="bbQuoteName" style="padding-left:5px;font-size:7pt">
Это не страшное, просто не очень удобное, как по мне, решение. А вот Morfus'у нравится. Кому как

Serifa пишет:

цитата:

Потом попробую что-то в цитате поменять, с помощью

Если что, не обязательно все стили писать, можно просто добавить себе в css что-то типа
#quot_body {
background: white;}
это заменит цвет фона цитаты.

 Отправлено: 12.02.12 08:44. Заголовок: На этом форуме цитат..

На этом форуме цитата смотрится даже эффектно, можно и не менять ничего. А вот на форролл орге фон форума - серо-голубой. С другой стороны, смотрится тоже эффектно! Так что думаю, а надо ли что-то менять? Как говорится: если оно работает - отойди и не трогай :)

 Отправлено: 02.03.12 21:46. Заголовок: Верстка резинового т..

Верстка резинового текстового поля (input[type=text])

Взято отсюда: http://unixhome.org.ua/blog/315.html#comment322
ЦИТАТА:
__________________________________________
Думаю, что многим верстальщикам (и не только) приходилось верстать текстовые поля (/>), задавая им произвольные размеры. Но как сделать данный элемент резиновым и удовлетворить следующим условиям:

Возможность установки любых горизонтальных и вертикальных отступов у текста;
Элемент должен занимать весь контейнер, в который он помещен;
Клик мышью в любое место текстового поля устанавливает в нем курсор.


Ответ достаточно прост и решается следующим методом:

Для начала, надо понять, что происходит с input-элементом при выставлении его ширины в 100% и добавления слева и справа отступов для текста.

Согласно стандартам CSS (а в данном случае их поддерживают все браузеры), результирующая ширина элемента input, при отсутствии границ (border) и внешних отступов (margin), будет равна:

width = width + padding-left + padding-right


Т.е. она будет больше на величину внутренних горизонтальных отступов, и получившийся при этом элемент будет выступать за отведенную для него область.
Чтобы итоговая ширина была равна 100%, можно использовать систему из двух контейнеров:

1 <div class="input-width">
2 <div class="width-setter">
3 <input type="text" value="" />
4 <div>
5 </div>


Каждый контейнер выполняет свою роль:

input-width – этот контейнер задает результирующую ширину текстового поля;
width-setter – этот контейнер задает ширину input-элемента за вычетом горизонтальных внутренних отступов.

Вот набор стилей, который разъяснит эту конструкцию:

01 .input-width {
02 height:23px;
03 border:1px solid #999;
04 background:#fff;
05 }
06 .width-setter {
07 height:23px;
08 margin:0 9px;
09 }
10 .width-setter input {
11 width:100%;
12 height:14px;
13 padding:4px 9px 5px;
14 margin:0;
15 font-family:Tahoma, Geneva, sans-serif;
16 font-size:12px;
17 line-height:14px;
18 color:#000;
19 border:0 none;
20 background:#9C6;
21 }


Пример 1

Из стилей получается, что элемент input-width задает ширину, которую должно было занимать текстовое поле. Элемент width-setter задает ширину input-элемента меньше на горизонтальные внутренние отступы. Стоит заметить, что его внешние отступы (margin) должны быть равны padding-left и padding-right для элемента input.
При таком описании input-элемент будет выступать из width-setter на величину своих горизонтальных отступов (padding), а в IE6 — растягивать всех «родителей» под собственные размеры (пример 1). Также в браузерах IE6-7 input-элемент имеет отступы, которые нельзя убрать, обнуляя свойство margin. Чтобы изменить такое расположение, надо сдвинуть текстовое поле влево, на размер левого отступа (padding-left). Можно это осуществить через position:relative, но при этом в IE6 останется растянутым под ширину текстового поля input контейнер width-setter. Для устранения растяжения надо сделать так, чтобы элемент не мог влиять на размеры своего родителя, задав, например, ему position:absolute.

Опишем по-новому исходный набор контейнеров:

01 .input-width {
02 height:23px;
03 border:1px solid #999;
04 background:#fff;
05 }
06 .width-setter {
07 height:23px;
08 margin:0 9px;
09 position:relative;
10 }
11 .width-setter input {
12 width:100%;
13 height:14px;
14 padding:4px 9px 5px;
15 margin:0;
16 font-family:Tahoma, Geneva, sans-serif;
17 font-size:12px;
18 line-height:14px;
19 color:#000;
20 border:0 none;
21 background:#9C6;
22 position:absolute;
23 left:-9px;
24 top:0;
25 }


Пример 2

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

Примечание. Приведенный метод реализации резинового текстового поля проверен на Doctype: HTML 4.01, XHTML 1.0 и HTML (HTML 5) — и имеет кроссбраузерность: IE6-8, Opera 9+, FF 2.0+, Safary 2.0+, Chrome. При отсутствии Doctype кроссбраузерная работоспособность метода не гарантирована.

 Отправлено: 04.03.12 14:13. Заголовок: имхо, изврат. Инпут ..

 Отправлено: 07.05.12 15:32. Заголовок: Zoltan, не обязатель..

Zoltan, не обязательно по центру.

будды... какой изврат...

<любой блок, который надо заполнить; зачем это делать - не спрашиваем. НАДО.>
<input type="text" value="lalala" id="olala" />
</любой блок, который надо заполнить; зачем это делать - не спрашиваем. НАДО.>

любой блок, который надо заполнить; зачем это делать - не спрашиваем. НАДО. {
position: relative; //чтоб 100% не пойми от кого не брало
width: 400px; //ширина - (минус) горизонтальные отступы инпута
height: 14px; //высота строки инпута
padding: 20px 30px (нужная высота блока - вертикальные отступы инпута - высота строки)px 50px; //те же самые отступы, что у инпута
}

#olala {
width: 100%;
height: //высота строки инпута
padding: 20px 30px (нужная высота блока - вертикальные отступы инпута - высота строки)px 50px; //вот те самые любые отступы, они с объемлющим блоком одинаковые
margin: -20px -30px -(нужная высота блока - вертикальные отступы инпута - высота строки)px -50px // те же отступы со знаком минус
line-height: 14px; //та самая высота строки.
}

То же самое, коротко без комментов:

Код:
1. <блок>
2. <input type="text" value="lalala" id="olala" />
3. </блок>

стиль:
01. блок {
02. position: relative;
03. width: 400px;
04. height: 14px;
05. padding: 20px 30px 226px 50px;
06. }

07. #olala {
08. width: 100%;
09. height: 14px;
10. padding: 20px 30px 226px 50px;
11. margin: -20px -30px -226px -50px;
12. line-height: 14px;
13. }

 Отправлено: 08.05.12 10:51. Заголовок: helheim Извращение ч..

helheim
Извращение чистой воды. Инпут всегда в одну строчку, потому смысла в отступах не вижу. Ну окей, будет эта одна строчка посреди блока - красота? как по мне, практической ценности ровно ноль. Если уж нужен подобный изврат, то


<div id="block" contenteditable="true">
<span> hooray! </span>
</div>

Ну и приправить стилями по вкусу.

 Отправлено: 09.05.12 05:36. Заголовок: Zoltan, хах! я тоже ..

Zoltan, хах! я тоже не понимаю, зачем. ))
но мало ли, может у кого-то фетиш такой: инпутами все пространство окна занимать, или там рисовать в стиле кубизма: пиксель-арт. Вот хлебом не корми - да инпут сделать!

С пятым хтмл удобно, конечно, но относительно стандартных форм ИМХО таки все еще остался один неприятный косяк: приходится на скрипты отправку вешать, вместо того, чтобы элементарным сабмитом отправлять. Нехай бы они еще сабмит к такой штуке аналогичный формам прикрутили - цены бы не было.
Пока же я все-таки люблю, чтобы как минимум текст и формы юзабельно отображались и в дельфине, и в линксе.

 Отправлено: 09.05.12 08:13. Заголовок: helheim пишет: Вот ..

helheim пишет:

цитата:

Вот хлебом не корми - да инпут сделать!

cейчас как раз пишу скрипт, который пробегается по массиву и для каждого элемента создаёт инпут... Сейчас это что-то около полутора сотен. Не хотел бы, чтоб каждый занимал столько места

helheim пишет:

цитата:

приходится на скрипты отправку вешать

это да, но найдите мне того, у кого они отключены. И я скажу "сам виноват"
В конце-концов, можно получить $('#block').html() и заслать его через форму, хоть хидден полем, хоть вообще без полей.