- Главная … И потом добавлением правила: #nav li.first{border:none} И все вроде бы работает как надо. Но. Оба эти подхода(с class=”first” и с текстовыми разделителями “|”) требуют от нас несимметричной генерации элементов - надо различать первый и все остальные LI. Проблема(лень) Так как мои меню генерировал движок, то для вставки этого класса пришлось бы менять код движка, а лезть туда мне было лень . Отсюда родилось решение как сделать такие разделители не вставляя никаких классов и оперируя лишь обычным списком. Решение Идея простая как 5 копеек. Вот весь код: #nav{ overflow:hidden; /* что бы UL растянулся до содержимых float во всех броузерах кроме ИЕ, а так же для нашего “обрезания”*/ width:100%; /* что бы UL растянулся до содержимого в ИЕ, к самому трюку имеет косвенное отношение*/ } #nav li{ margin-left:-1px; /*сдвигаем все элементы влево*/ } Суть такова. Задаем overflow:hidden для UL - таким образом все что выходит за пределы блока UL отображаться не будет. Затем задаем margin-left:-1px для всех элементов списка, то есть первый элемент выйдет на 1 пиксель за пределы элемента UL, но это как раз и будет тот лишний злополучный первый разделитель! Все же остальные разделители останутся в деле - так как не выйдут за пределы блока. А первый будет скрыт. В результате получим: Смотреть пример Идея Эта же идея только с заменой на border-top и margin-top:-1px сработает и для таких меню: Смотреть пример Более того такой прием можно применять и для графических разделителей. Будь они даже потолще одного пиксела - просто придётся задавать больший отрицателый отступ для элементов списка. В конце Хотя прием и довольно узкоспециализированный но мне сэкономил время, да и идея мне понравилась. Тестировалось и работает во всех моих виндошных броузерах(IE5-7, FF, Opera). Думаю работает везде. Рабочий пример для горизонтальных разделителей Рабочий пример для вертикальных разделителей Буду рад услышать Ваше мнение или приемы по этому поводу! ]]> http://cssing.org.ua/2006/11/05/menu-separators/feed/ http://cssing.org.ua/2006/10/30/first-russian-wsg-moscow/ http://cssing.org.ua/2006/10/30/first-russian-wsg-moscow/#comments Mon, 30 2006 14:18:10 +0000 akella веб стандарты http://cssing.org.ua/2006/10/30/first-russian-wsg-moscow/ Наконец-то состоялась первая встреча русских веб-стандартистов в Москве. Надеюсь это станет традицией . Далее небольшой отчет. Организация и присутствующие Отдельное спасибо за организацию хотелось бы сказать pepelsbey ‘у. На встрече присутствовали следующие личности: Вадим “pepelsbey” Макеев , Алексей “Flack” Рыбаков , Сергей “TheBits” Мезенцев , Александр “uggallery” Исаков , Марат “MT” Таналин , Марат Мамяшев , Ольга Алексашенко , виртуально Максим Россомахин ну и я. Доклады Слушали три интересных доклада, пересказывать бессмысленно, скажу лишь вкратце о чем… Про ASP (от Сергея Мезенцева) : услышали историю, новые возможности ASP.NET, посетовали на потуги исключить верстальщика из цикла создания сайта.. Про jQuery и других (от Марата Мамяшева из cssblast.ru ): на пальцах рассказал о возможностях, применении, тут же показав примеры использования двух джаваскриптовых фреймворков, настолько просто что даже я приехав не удержался и начал использовать в работе. За что ему отдельное спасибо. Было действительно интересно. Про Типографику (от Александра “uggallery” Исакова): очень интересный доклад про русские(и не только) шрифты, их историю, и способы правильного употребления и еще много интересного. (этот доклад мне к сожалению не удалось дослушать до конца - не хватило времени…:() Далее несколько фото(событие проходило в законспирированной квартире с несколькими кофе-ти-брейками): (за фото спасибо uggallery ) Сергей Мезенцев рассказывает про то какая крутая новая ASP: Доклад Марата Мамяшева о библиотеках javascript(видно один из пальцев на которых он нам все это обьяснил ): Доклад Александра “uggallery” Исакова о типографике: Обсуждение структуры сайта русского WSG: Доклад Александра Исакова Отчет на Вебмасконе Фотки с подписями смотрите в фликер аккаунте русского WSG сообщества . В целом Было круто. ) Была отличная атмосфера и такие вещи надо повторять. И вот что интересно, есть ли украинцы желающие участвовать в подобных мероприятиях? Делиться опытом и знакомиться с коллегами и просто интересными людьми из смежных областей. И вообще что думаете про подобные мероприятия? (не только украинцы) ]]> http://cssing.org.ua/2006/10/30/first-russian-wsg-moscow/feed/ http://cssing.org.ua/2006/10/16/font-size-em/ http://cssing.org.ua/2006/10/16/font-size-em/#comments Mon, 16 2006 12:47:33 +0000 akella XHTML/CSS Полезности http://cssing.org.ua/2006/10/16/font-size-em/ Разумеется я имею ввиду изменяемые в ИЕ(6-) шрифты, поскольку во всех остальных броузерах они и так легко изменяемы. Задавать шрифты в пикселах - нехорошо по отношению к юзерам. Можно и нужно задавать их в других относительных единицах. Тут я расскажу скорее не о каком то оригинальнои приеме, а просто об общем подходе для создания страничек с резиновыми шрифтами для ИЕ. Заметка(запоздалая) вызвана двумя постами на pepelsbey.net и mauzon.com и желанием поделиться своим простым подходом, вдруг кому то поможет. Возможности Задавать шрифты можно в пикселах(если бы не ИЕ так и нужно было бы делать всем), поскольку это все же не абсолютная единица как многие любят говорить - а относительная(от точек экрана зависит), так же можно использовать ЕМ’ы, проценты и ключевые слова. Ключевые слова немного глючат в IE - их значение там сдвинуто , хотя при желании можно использовать и их(с хаками). Пикселы для текста это табу - по причине существования ИЕ - там пользователь не сможет изменять размеры шрифта заданного пикселами. Остаются проценты и ЕМ. Они очень похожи. Потому их можно использовать смешанно - что Вам больше нравится. Далее я расскажу как с помощью ЕМ добиться точных нужных пиксельных размеров. С чего начать В своем темплейте я как правило сразу задаю размер шрифта для body, вот так: body{ font: 62.5% /1.4 Arial, sans-serif } По дефолту в броузерах размер шрифта 16 пикселов, таким образом 62.5% от 16 равняется ровно 10(я в столбик считал). То бишь этим нехитрым правилом дефолтовый шрифт мы сделали в броузере 10 пикселов. Теперь пускай у нас есть подобная страничка: Вот такой вот CSS: #header{font-size:1.1em} #content{font-size:1.3em} Задаст нам по дефолту размеры в 11 и 13 пикселов для текста этих дивов, причем шрифт останется изменяемым и в ИЕ, чего мы собственно и хотели. Все предельно просто, но есть камни. Подводные камни После тех 62.5% весь текст на страничке должен быть якобы размером 10пикселов, но для заголовков и инпут полей это не сработает, не стоит удивляться, нужно отдельно задавать размеры что бы они подействовали: input,select{font-size:1.1em} h1,h2,h3,h4{font-size:2em} Подобные же несуразности возможны и для таблиц. Во вторых если у вас есть сложные многоуровневые конструкции, к примеру вложенный список: то задав #nav li{font-size:1.1em} Вы фактически зададите 1.1em и для #nav li и #nav li li (элементов вложенного списка), и таким образом во вложенном списке размер шрифта будет не 11пикселов, как ожидалось, а 1.1*1.1 ~ 1.2 - то бишь 12 пикселов. Потому что 1.1 для вложенного списка будет считаться от 1.1 для внешнего - и они попросту перемножатся. Потому для вложенного списка нужно задавать 1.1/1.2~0.91em (желаемый размер в емах нужно делить на тот который сейчас получился из-за наследования, для 10 пикселов надо было 1.0/1.2=0.83) Тогда после дописания #nav li li{font-size:.91em} /* 0.91em для 11px, либо 0.83em для 10px */ размеры шрифта в обоих списках будут по 11 пикселов(при дефолтовом размере шрифта в броузере). Об em нужно думать как о процентах 1.1=110%, 1=100%, в принципе в любом месте кода теперь font-size:110% и font-size:1.1em - будут абсолютно эквивалентны. И нужно помнить что проценты умножаются Существуют так же способы в которых для body используется 100%(16px) или 76%(0.76*16~=12) - но в моем способе рассчеты размеров наиболее просты и глюков в нем я пока не заметил, потому остаюсь при своих. Если вы знаете какой либо глюк в нем буду рад услышать и проапдейтить пост. Как перейти с пикселов на ЕМы Таким образом если вы все еще используете пикселы вместо ЕМов, просто вставляете размер в процентах для body, а затем последовательно заменяете все 11px на 1.1em, 12px на 1.2em, 9px на 0.9em и так далее, но с учетом подводных камней описанных выше - избегайте более чем двухразового наследования. Иначе потом становится трудно считать размеры шрифта вложенных элементов. Вдобавок при увеличении шрифта в броузерах размеры могут начать расти заметно быстрее чем хотелось бы. В конце Надеюсь кому то это поможет избавиться от атавизма в виде пиксельных шрифтов . Хотя если бы не ИЕ то они были бы единственно правильным способом задавания шрифтов, ИМХО. Работает во всех современных броузерах, для 5го ИЕ требуется немного лишнего кода(см. ссылки внизу), после которого и он работает корректно. Никаких глюков с данным способом указания шрифтов мною пока не было замечено. Ссылки по теме: How to size text using ems - эта заметка помогла мне забыть про пикселы Легкое изменение техники для корректной работы в IE5/Win Text sizing - тесты множества способов задавания размеров шрифта Последние споры в рунете: pepelsbey & mauzon Пример использования в моей верстке - далек от совершенства, но шрифты сделаны именно так как в посте. Если вы знаете другие способы или какие то уточнения и апгрейды(глюки) к этому методу буду рад услышать! Учиться никогда не поздно. ]]> http://cssing.org.ua/2006/10/16/font-size-em/feed/ http://cssing.org.ua/2006/08/20/styling-br-display-none/ http://cssing.org.ua/2006/08/20/styling-br-display-none/#comments Sun, 20 2006 15:23:24 +0000 akella XHTML/CSS http://cssing.org.ua/2006/08/20/styling-br-display-none/ Для меня такое правило в CSS еще недавно было удивительным, хотя может просто не было задач для него подходящих. Тем не менее, совсем недавно оно помогло решить одну не совсем тривиальную задачу. Проблема и решение… Задача Имеется у нас кусок HTML кода, примерно такого вида(так называемый информер ukr.net) Link
- Название партии14%
- Название партии19% Номер каждого класса c1 c2 … с6 отвечает просто за цвет прослойки. Так как в каждой колонке они в одном порядке - нет ничего проще как в PHPшном цикле его расставлять. Название партии я скрывал через CSS, а позднее и вообще решил убрать из кода - разумеется это не совсем правильно . Но по статистике там не было слепых пользователей и мобильных . Да и SEO была неактуальна в контексте проекта. Вместо этого я добавил центрирование по вертикали. Как вы возможно уже знаете, при указании одинаковой height и line-height - одна строка текста внутри блока центрируется по вертикали ( уже писал ) А у нас как раз одна строка с процентами. Вот и хорошо.
- 14%
- 19 И так как за некоторые партии голосовало слишком мало народу - так что цифры попросту не влезали в эту прослойку - я расставлял через движок класс class=”view” для тех у кого достаточно места для показа процентов, примерно так:
- 14% В результате при отключенных стилях мы бы имели что то вроде десятка списков с названиями партий и их процентами. Для полной доступности стоило конечно добавить туда еще и дату - так как каждая колонка соответствовала дате. Но по некоторым причинам(для тех кто не понял это лень и нехватка времени ) пришлось ограничиться картинкой которую мне любезно предоставил ПМ. На ней уже были даты. Вобщем и целом я думаю маркап довольно хороший, как для такой сложно структурированной инфы. С мобилы читается на ура. CSS Подготовил поле: .b-graph { width:532px; height:297px; background:transparent url(b-graph.gif) no-repeat 0 0; position:relative; /* для позиционирования колонок внутри*/ } Затем стили для колонок и цвета для полосочек .b-graph ul{ position:absolute; bottom:18px; /* что бы низ колонок совпал с рисунком графика*/ width:30px; /* собссно ширина*/ } с i {background:# xxx } /* у меня 6 раз*/ И наконец самое слабое место метода как по мне - позиционирование каждой колонки - так как страница с ограниченной шириной, то в моем случае их кол-во было не очень большим - поэтому я и использовал 13 разных классов для их позиционирования: .e1{left:37px;} .e2{left:72px;} … .e13{left:457px;} Таким образом я их разместил через одинаковое расстояние, точно подгадав под фоновую картинку для графика. Однако это и есть главный недостаток - так как писать такой код довольно неудобно - да и приходится при увеличении колонок его дописывать. Возможно сделаю более универсальную версию… Вот что получилось . К сожалению проблему whitespace между элементами списка в ИЕ 5.0 мне так и не удалось решить. Но ввиду его малого кол-ва, я про него “забыл”. Вообще же можно было отдавать отдельный CSS. Либо использовать какой то немного другой код. Хотя я еще не оставил надежды побороть таки глюк каким нить хаком В остальных же всех броузерах работает отлично Вот такие наскоро склепанные графики получились. Те что ниже и выглядят попроще построены по абсолютно такому же принципу - просто на одно измерение меньше. Буду рад если кому то пригодится. Нет предела фантазии поиграться с фоном колонок . Жаль есть предел времени. Но как по мне получилось довольно занятно, я таких графиков у наших “гуру” еще не видел . Ваши предложения и замечания, комментарии приветствуются! Ссылки Еще про это писали: Мои графики Bar Graphs With Style CSS bar graphs и ссылка на пример CSS For Bar Graph принципы в основном похожие. Так что использовать нужно то, что удобно в данной ситуации. Ничего особо универсального нет. ]]> http://cssing.org.ua/2006/03/07/css-bar-graphs/feed/ http://cssing.org.ua/2006/02/23/image-replacement/ http://cssing.org.ua/2006/02/23/image-replacement/#comments Thu, 23 2006 13:30:56 +0000 akella XHTML/CSS Дизайн http://cssing.org.ua/2006/02/23/image-replacement/ Обзор некоторых способов замены текста картинками. Зачем? Часто хочется что бы заголовки были красивыми, и не хочется себя ограничивать парой тройкой шрифтов пользователя(из тех что есть у всех) - тут и приходят на помощь способы заменить этот текст (оставить его в коде для поисковиков и других юзер агентов) на картинки или флеш. Итак для начала заменяем такой код на картинку:
Link
Link
Такой вот список линков, за разметку конечно меня можно казнить(по хорошему здесь надо использовать UL), но к сожалению, не я занимался этим проектом. Выглядит примерно так: По условию задачи, HTML изменять нельзя - ясно что эти информеры стоят еще на десятках сайтов, и просто так сменить код не получится.(хотя можно было пытаться поизвращаться над серверной частью, но я сторонник вынесения таких вещей в CSS). Итак собственно требование - нужно каким то образом научится менять расстояние по вертикали между линками. То бишь сделать отступы вверх и вниз от каждого линка. Решение Конечно просто сами просятся сюда такие свойства как: a{padding-top:…} a{margin-top:…} Однако, так же очевидно эти свойства не сработают, ибо как известно они задаются для блочных(block) элементов, и на Inline’овые, как наш a , просто не подействуют. Тогда следуя простой логике, что бы наши padding и margin стали работать, дописываем: a{display:block} В результате имеем вот такую картину(без margin и padding): Между линками образовался двойной перенос строки. Однако все логично - каждый линк стал блочным элементом - это один перенос строки + оставшиеся BR - второй перенос строки. В результате имеем гигантское пространство между линками, намного больше чем нам нужно. И вот тут меня и спасло это не совсем стандартное правило: br{display:none} Пока я его писал, я вообще был неуверен что оно сработает, однако после того как оно сработало - переносы строк просто исчезли, теперь уже кажется что по другому просто и быть не могло. Таким образом после написания этого правила, все переносы строк в HTML аннулируются, и задав небольшой margin я заимел то что и хотел: По сути действие br{display:none} очевидно, оно заставляет отображаться страницу так, как будто
там никогда и не было. Конечно было и второе решение этой задачи - вместо убирания br, можно было использовать отрицательный margin по вертикали для ссылок, но решение с br показалось мне намного красивее и, теперь уже, очевидней. Конец Несмотря на очевидность и простоту, я как то раньше не встречался с таким решением, наверное оно достаточно узкоприменимое. Однако по крайней мере знать что так можно, я думаю невредно. Все же лучше использовать семантический HTML нетрубующий таких нестандартных решений. Надеюсь все же кому то оно упростит жизнь когда-нибудь. Живьем это сейчас висит на поиске от ukr.net Всегда рад услышать чужой опыт по этому поводу, или просто мысли! ]]> http://cssing.org.ua/2006/08/20/styling-br-display-none/feed/ http://cssing.org.ua/2006/07/17/otpusk/ http://cssing.org.ua/2006/07/17/otpusk/#comments Mon, 17 2006 22:39:18 +0000 akella Общие http://cssing.org.ua/2006/07/17/otpusk/ Я еще не умер. Но жизнь полна забот, а потому я взял перерыв. Это не оправдание - но на неуверенную отмазку тянет . Во-первых я стал магистром математики, с отличием. Чему я несказанно рад. Наконец-то 6 лет учебы позади и вроде как началось… что-то. А вот что, я придумаю только после отпуска который я взял, и который во-вторых . Далее следуют несколько фотографий с Тарханкута. (это крайний западный мыс Крыма, 100км от Евпатории). Я уже писал об этом - пост “Тарханкут” . Фотки, что называется “под катом”. Надеюсь читатели отнесутся с пониманием к такому большому перерыву на блоге, не каждый день вручают такие дипломы. Так называемая скала Черепаха на закате. Голова справа. ) Она же но сверху. Там где зелена вода глубина метров 7, то есть рядом отвесная подводная скала с пещерами. Ныряли в пещеры без аквалангов? Оно того стоит. Акваланги для слабаков ) Панорама открывавшаяся из палатки(без скал, которые сзади): Закат. Полный штиль. Такое вот там побережье. Увеличенные версии и полная галерея в моём фликере . Просто замечательный уголок - рекомендую, я там уже лет 10 отдыхаю. Лучшего места понырять и уединиться от мира не найти. Выкладывать фотки сьеденных там крабов, рапанов, мидий и рыбы наверно не стоит… проявлю гуманность Искренне желаю всем отличных отпусков! ]]> http://cssing.org.ua/2006/07/17/otpusk/feed/ http://cssing.org.ua/2006/06/08/css-sliding-doors/ http://cssing.org.ua/2006/06/08/css-sliding-doors/#comments Thu, 08 2006 14:54:40 +0000 akella XHTML/CSS http://cssing.org.ua/2006/06/08/css-sliding-doors/ Наверное одна из первых статей про CSS, которая меня захватила, была “ Раздвижные двери CSS ” ( и вторая часть )( оригинал ). Мне понравилось, что для решения некоторых проблем верстки порой нужно хоть и чуть-чуть, но нестандартно мыслить. В результате эта идея(раздвижных дверей) несколько раз сэкономила мне время. Вот пара применений, из которых Вы, я надеюсь, уловите идею и может быть она кому то поможет. И хотя многие наверняка знакомы с ней, тем не менее… Раздвижные двери на ukr.net Когда то давно на сайте укр.нет, еще когда я его первый раз переделывал ( вот тут вариант ) была желтая область для поиска, она задавалась в фоне одной картинкой - вот такой вот большой и выглядело вот так: Однако позднее понадобился редизайн, где эта область начинала занимать две трети колонки. А сейчас она вообще в ширину средней колонки - сами посмотрите : Естественно, когда запахло первым изменением ее ширины мне было лень перерисовывать картинку в нужную ширину. Конечно захотелось сделать это как то более ширино-независимо.(наверно, потому что я знал, что ее ширина еще 10 раз изменится). На помощь пришли “раздвижные двери”. Итак, задача: была область широкая с одной фоновой картинкой. Как, не перерисовывая картинку, сделать область уже, и тоже с круглыми краями? Вот такой там был код HTML(и сейчас такой):
- …
Заголовок - картинка