Форум » Вопросы дизайна » Даешь уроки css! » Ответить
Даешь уроки css!
Serifa: [quote]Zoltan пишет: цитата: может, мне уже уроки css писать начинать пора xD Камрад! Давно пора! Если тебе требуется особое благословение, считай, что мы всем форумом тебе его дали)) [/quote] Предлагаю всем высказаться по данному вопросу. Дело-то ведь полезное, и ни кто-нибудь, а наш родной и знакомый Золтан решил совершить сей подвиг во благо форумного ролевого движения! Давайте его поддержим!
Zoltan: Morfus пишет: всё что прописано для стилей прямо в скрипте, можно переопределить с помощью !important. а если в скрипте уже будет стиль с параметром !important? ;) говорю же, не критично, но неудобно. Да и вообще, считается дурным тоном.. Morfus пишет: Про Борду разговор отдельный, я этого сейчас не касаюсь. привёл в качестве примера. и кстати, весь этот скрипт с цитатой на том же принципе основан, что более "поздние" параметры срабатывают вместо "ранних".
Morfus: Zoltan пишет: а если в скрипте уже будет стиль с параметром !important? ;) Не будет. Код пишется с расчётом, чтобы было корректное отображение при наличии кривых ручек, но для знающего пользователя всегда оставляется возможность сделать по своему. !important не дурной тон, а вполне корректный инструмент. Если использовать по назначению.
Zoltan: Morfus пишет: Код пишется с расчётом, чтобы было корректное отображение при наличии кривых ручек Э? там ни на что не влияющий отступ в 5 пикселей и дурацкая полоса прокрутки в теле цитаты. Это само по себе не есть корректное отображение - кому нужны лишние полосы прокрутки? Они обычно только мешают, когда содержимое блока нужно показать целиком, например, при чтении цитат. Так что нет, там изначально пишется не с расчётом на кривые руки, а, видимо, по индийскому методу, не иначе. Morfus пишет: !important не дурной тон моветон не !important, а прописывать стили в хтмл.
Morfus: Zoltan Прокрутка не дурацкая. Меня дико раздражают километровые посты-цитаты. А тут аккуратное отображение. Zoltan пишет: Так что нет, там изначально пишется не с расчётом на кривые руки, а, видимо, по индийскому методу, не иначе. Вы гадаете, а я знаю. *пожимает плечами* Zoltan пишет: моветон не !important, а прописывать стили в хтмл. Учитывая, что в исходном коде страницы не видно какая часть кода выведена системным кодом вида $COD$, а какая вписана в шаблон, не вижу оснований для такой категоричности. В uCoz-е есть масса нюансов, которые со стороны не очень понятны. Поэтому рассуждать о них с предубеждённым наблюдателем, только время зря терять.
Zoltan: Morfus пишет: Меня дико раздражают километровые посты-цитаты. а меня дико раздражают блоки с прокруткой, т.к их надо прокручивать; скорость чтения позволяет читать больше 200px, а бесконечная прокрутка бьёт по глазам. В случае, если бы безымянные пейсатели кода учитывали юзабилити, то припаяли бы кнопку "развернуть" к цитате, чего нет. Думаю, я не один такой, кто в состоянии прочитать больше трёх строчек за раз. Morfus пишет: Вы гадаете, а я знаю о нет, я всего лишь констатирую факт. Тот код не спасёт от кривых ручек, даже наоборот, признак этих самых кривых ручек. Morfus пишет: Учитывая, что в исходном коде страницы не видно какая часть кода выведена системным кодом вида Да, это можно вырезать из шаблона, я в курсе. Но это есть в исходном варианте шаблона, прописанном розрабами. В юкозе нюансы? право, Америку открывать не надо, я пару раз имел дело с сайтами на юкозе, никаких нюансов там нет. Кроме невозможности пройти валидатор. В любом случае, мне не интересно спорить с вами, каждый защищает свою точку зрения и от спора проку не будет и на грош. Да и тема изначально была предназначена не для этого.
Morfus: Аналогично. Мне вообще спорить в таких темах не интересно. Фломастеры, они и в Африке фломастеры и любое категоричное мнение смотрится как минимум странно. В любом случае следует как факт принимать движок сервиса и использовать его преимущества. uCoz хорош тем, что доступ к изменению кода страниц там значительно больше, чем на Борде или даже миббе. Больше только на том движке, что сам ставишь. В отличие от Борды там для форума предусмотрены идентификаторы для практически 100% элементов и стилями можно сделать достаточно много. Хотя доступ к шаблонам тоже хорошее решение. Всегда восхищало трепетное отношение к валидаторам. Особенно учитывая, насколько на это кладут разработчики браузеров. )))
Serifa: А можно глянуть (пример), о чем вы так горячо спорили? Что там такое на юкозе страшное? Потом попробую что-то в цитате поменять, с помощью - Zoltan пишет: распишу что зачем в этом стиле, ведь не обязательно ставить именно такую цитату, всё самое "вкусное" - в настройке под себя) Как время найду.
Zoltan: Serifa Просто юкоз генерирует хтмл-код, в котором некоторые стили уже прописаны, на счёт них и спорили В основном, это строчка <div class="bbQuoteName" style="padding-left:5px;font-size:7pt"> Это не страшное, просто не очень удобное, как по мне, решение. А вот Morfus'у нравится. Кому как Serifa пишет: Потом попробую что-то в цитате поменять, с помощью Если что, не обязательно все стили писать, можно просто добавить себе в css что-то типа #quot_body { background: white;} это заменит цвет фона цитаты.
Serifa: На этом форуме цитата смотрится даже эффектно, можно и не менять ничего. А вот на форролл орге фон форума - серо-голубой. С другой стороны, смотрится тоже эффектно! Так что думаю, а надо ли что-то менять? Как говорится: если оно работает - отойди и не трогай :)
Serifa: Верстка резинового текстового поля (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 кроссбраузерная работоспособность метода не гарантирована.
Zoltan: имхо, изврат. Инпут даже высотой в n строк всегда будет иметь одну строку - так он себя в браузерах ведёт. И набираться строка будет строго по центру огромного поля. А перенос строки в инпутах как бы не предусмотрен.. В таких случаях лучше пользоваться textarea.
helheim: 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. }
Zoltan: helheim Извращение чистой воды. Инпут всегда в одну строчку, потому смысла в отступах не вижу. Ну окей, будет эта одна строчка посреди блока - красота? как по мне, практической ценности ровно ноль. Если уж нужен подобный изврат, то <div id="block" contenteditable="true"> <span> hooray! </span> </div> Ну и приправить стилями по вкусу.
helheim: Zoltan, хах! я тоже не понимаю, зачем. )) но мало ли, может у кого-то фетиш такой: инпутами все пространство окна занимать, или там рисовать в стиле кубизма: пиксель-арт. Вот хлебом не корми - да инпут сделать! С пятым хтмл удобно, конечно, но относительно стандартных форм ИМХО таки все еще остался один неприятный косяк: приходится на скрипты отправку вешать, вместо того, чтобы элементарным сабмитом отправлять. Нехай бы они еще сабмит к такой штуке аналогичный формам прикрутили - цены бы не было. Пока же я все-таки люблю, чтобы как минимум текст и формы юзабельно отображались и в дельфине, и в линксе.
Zoltan: helheim пишет: Вот хлебом не корми - да инпут сделать! cейчас как раз пишу скрипт, который пробегается по массиву и для каждого элемента создаёт инпут... Сейчас это что-то около полутора сотен. Не хотел бы, чтоб каждый занимал столько места helheim пишет: приходится на скрипты отправку вешать это да, но найдите мне того, у кого они отключены. И я скажу "сам виноват" В конце-концов, можно получить $('#block').html() и заслать его через форму, хоть хидден полем, хоть вообще без полей.
полная версия страницы