геометрия css
Привет всем.

Недавно занялся html css - однако затягивает,кое-чего
получается но есть и проблемки-вопросы. В частности
Как с помощью CSS HTML создавать геометрические фигуры?
Нужны в качестве примера, образца
полностью прописанные (от начала и до концато есть не только код css? но и то как он вписывается в html тег)
формулы создания средствами CSS:
круга
ромба
треугольника и др фигур

вот мои коды, (задача вписать текст в геоиетрическую фигуру)
<div style="#square-width:24px;height:24px;background:red;border:2px solid #0a0;"></div> <div style="#rectangle-width: 50px;height:15px;background:red;border:2px solid #0a0;"></div> <div style="#circle-width:50px;height:50px;background:red;border:2px solid #0a0;-moz-border-radius:25px;-webkit-border-radius:25px;border-radius:25px;"></div>


а вот результат
http://derwisch.livejournal.com/25399.html
что в них не так?
ПОДСКАЖИТЕ

(6 Comments |Comment on this)

Нужен человек для идиотских вопросов
Разбираюсь в CSS, вынужденно - "на конкретных примерах". Не все они сделаны аккуратно, прямо скажем.

Нужен человек, которому можно будет задавать более или менее идиотские вопросы. Получать оперативные ответы. За это готов платить какие-то небольшие деньги

(2 Comments |Comment on this)

комменты
Доброе время суток!
хочу спросить уважаемых знатоков. Как сделать различный стиль (фон) для комментариев (четных/нечётных)?
Хочу добавить в свой стиль жж на основе Garden State Style Contest от Liz Lubowitz эту функцию.
Скажите как правильно прописать это в css?
Спасибо.

(6 Comments |Comment on this)

Куда пойти учиться.
Сердечно всех приветствую. 
Друзья, вероятно тут много раз задавался этот вопрос, и, тем не менее, очень прошу помочь.
На данный момент стараюсь освоить html и css сама. Получается пока средне, но что-то где-то выходит. Сейчас есть возможность повысить квалификацию с благословения работодателя :) , пройти курсы, побывать на конференциях. Начальство не против изучения мною верстки, но встал вопрос, куда же лучше пойти учиться. Дело происходит в Москве.
Если кто-то подскажет хорошее место, где учат именно верстать (не дизайн), буду очень благодарна. Если есть возможность, дайте короткое обоснование, почему вы советуете именно это место.
Заранее спасибо и удачи всем.
ksiu

Current Mood: hopeful

(8 Comments |Comment on this)

Народ, спасите! Задачка вроде бы простая, но я мозги сломаю, как ее реализовать без скриптов.

Есть у нас закрашенная панелька 100% ширины и фиксированной высоты (скажем, 100 пикселей), а под нею находится див 100%-й же ширины, верхним краем прилепленный к панельке, а нижним к нижнему краю окна. контента внутри может быть сколько угодно, он должен скроллиться



Пробовал таблицу делать, но главная (нижняя) ячейка растягивается под высоту контента дива.
На див 100%-й высоты накладывать панельку сверху тоже не годится, она будет частично прикрывать скроллбар, а «вырезать» его из панельки не хочется, это костыль.

(20 Comments |Comment on this)

Интерсный способ реализации контентной части.
Недавно посетила идея реализации контентной части, для 2-3-х колоночного макета, без использования скпритового языка. Чем и хотел бы поделиться.

И так, у нас есть стандарный макет из 3-х колонок, левое меню, контентная часть и правая колонка с sбаннерами.
Задача: реализовать практически на чистом css безпрепятственное удаление левой или правой колонки. Без классов.
( Read more...Collapse )

UPD: Пощупать можно на jsfiddle.net

(8 Comments |Comment on this)

page filters?
I've searched around a little and was wondering if there is a way to have a div container appear for X amount of seconds after the page is opened?

(Comment on this)

Меню
Сайт верстала не я, мне дали код и сказали исправить "ошибку". Я уже вдоль и поперек просмотрела CSS, перепробовала разные варианты, но так и не могу справиться с задачей.

Задача: есть трехуровневое меню, реализуемое списком. Но третий уровень вылезает за границы второго. Это не было бы проблемой, если бы не уголочки справа и слева. Надо, чтобы часть меню, где ссылки второго уровня раздвигалась на размер третьего уровня и уменьшалась на размер второго. Т.е. я не могу просто задать высоту под размер третьего уровня. Я не могу сильно модифицировать код или что-то глобально менять.

Может быть кто-то из профессионалов сможет дать полезный совет или какое-либо решение поставленной задачи?



CSS:

/* MENU */ .dmMenu { font-size: 0; line-height: 0; padding:17px 0 0 0; margin: 0; list-style: none; } .dmMenu li { display: inline-block; vertical-align: top; /* width: 80px; margin: 0 10px 0 0 ;*/ padding:0 30px 0 0; font-size: 11px; line-height: 14px; *display: inline; zoom: 1; } .dmMenu li a:hover, .dmMenu li a:active { text-decoration:none; color:#898989; } .dmMenu li a, .dmMenu li a:visited { text-decoration:underline; color:#898989; } .mainMenu { height:43px; font-family:tahoma; font-weight:bold; font-size:10px; background:transparent url('../i/menu/menu_main_bg.png') 0 0 repeat-x; } .mainMenuWrapper { height:43px; background:transparent url('../i/menu/menu_main_l.png') 0 0 no-repeat; } .mainMenu ul { height:44px; margin:0; list-style:none; /* padding:0 0 0 23px;*/ padding:0 0 0 7px; background:transparent url('../i/menu/menu_main_r.png') 100% 0 no-repeat; } .mainMenu li { float:left; display:block; position:relative; height:15px; /* padding:14px 15px 0 0;*/ padding:14px 0 0 15px; } .mainMenu li a { display:block; text-transform:uppercase; text-decoration:none; color:#000; } /*.mainMenu .liActive { padding:0 0 0 15px; }*/ .mainMenu #mainMenuMarva a { color:#ec1e22; } .mainMenu .first { padding:0; } .mainMenuDopWrapp .mainMenuImportant a, .mainMenu .mainMenuImportant a { color:#ed1c24; } .mainMenu .liActive { position:relative; display:block; height:28px; padding:14px 0 0; background-color:#fff; border-color:#dcdcdc; border-style:solid; border-width:1px 0 0; z-index:100; } .mainMenu .active a { padding:0 10px; } .mainMenu em { position:absolute; display:block; top:-1px; width:5px; height:40px; } .mainMenu .aCrnL { left:0; background:transparent url('../i/menu/menu_main_activ_l.png') 0 0 no-repeat; } .mainMenu .first .aCrnL { height:43px; background:transparent url('../i/menu/menu_main_activ_l-2.png') 0 0 no-repeat; } .mainMenu .aCrnR { right:0; background:transparent url('../i/menu/menu_main_activ_r.png') 0 0 no-repeat; } .mainMnDpWrpp { padding:0 7px; } .mainMenuDopWrapp ul a { font-family:tahoma; font-weight:bold; font-size:11px; text-transform:uppercase; text-decoration:none; color:#898989; } .mainMenuDopWrapp { position:relative; border-style:solid; border-color:#dcdcdc; border-width:0 1px 1px 1px; padding:9px 0 7px ; } .mainMenuDop { position:absolute; margin:-2px 0 0 13px; border-color:#dcdcdc; border-style:solid; border-width:1px 0; background-color:#fff; } .mainMenuDopWrapp .active { color:#000; } .mainMenuDop em { position:absolute; display:block; bottom:-1px; width:5px; height:37px; } .mainMenuDopWrapp em { position:absolute; display:block; width:5px; height:5px; bottom:-1px; background-color:transparent; background-position:0 0; background-repeat:no-repeat; } .mainMenuDopWrapp .mmdCrn-r { background-image:url("../i/crn/crn-rent-r-b.gif"); right:-1px; } .mainMenuDopWrapp .mmdCrn-l { background-image:url("../i/crn/crn-rent-l-b.gif"); left:-1px; } .mainMenuDop .mmdCrnWrappR, .mainMenuDop .mmdCrnWrappL { position:relative; display:block; width:5px; height:36px; padding:0; } .mainMenuDop .mmdCrnWrappR { width:6px; } .mainMenuDopWrapp ul { position:relative; margin:0; padding:0; list-style:none; } .mainMenuDopWrapp .menuWithSubM { height:56px; } .mainMenuDopWrapp li { display:inline; height:18px; padding:0 2px 0 15px; } .mainMenuDopWrapp ul ul { position:absolute; height:22px; } *html .mainMenuDopWrapp ul ul { left:15px; } .mainMenuDopWrapp ul ul a { text-transform:lowercase; font-size:11px; font-family:Trebuchet MS,Tahoma,sans-serif; font-weight:normal; text-decoration:underline; } .mainMenuDopWrapp ul ul a.active { font-weight:bold; text-decoration: none; color: #636363; } .mainMenuDopWrapp ul ul strong { text-transform:lowercase; } .mainMenuDopWrapp ul ul a:hover { text-decoration:none; } .mainMenuDopWrapp ul ul li { padding:4px 14px 0 0; } *html .mainMenuDopWrapp ul ul li { padding:24px 14px 0 0; } .seoPc .dmMenu, #wrContent .dmMenu { height:13px; margin:13px 0 0; border-color: #D9D9D9; border-style: solid; border-width: 1px 0 0; } /* END MENU */

HTML:

<!-- top --> <div id="wrHeader"> <div id="wfhDopMenu"> <p class="dmLogo"> <a href=""> <img src="i/logo.png" alt="" /> </a> </p> <div class="dmInfo"> <p class="dmTel"><span class="dmIco"><a href=""><img src="i/ico/ico-home-small.gif" alt="" /></a></span></p> <ul class="dmMenu"> <li> <a href="o-kompanii/">О компании<br />и новости</a> </li> <li> <a href="obuchenie-i-seminary/">Обучение<br />и семинары</a> </li> <li> <a href="karera-i-vakansii/">Карьера<br />и вакансии</a> </li> <li> <a href="evaluation-center/">Оценка<br />стоимости</a> </li> <li> <a href="konsalting-i-marketingovye-issledovaniya/">Маркетинг<br />и консалтинг</a> </li> <li> <a href="klub-pokupatelej/">Клуб<br />покупателей</a> </li> <li> <a href="kontakty/">Наши<br />офисы</a> </li> </ul> <div class="cleaner"><!-- --></div> </div> <div class="cleaner"><!-- --></div> </div> <div class="mainMenu"> <div class="mainMenuWrapper"> <ul> <li><a href="novostroyki/" >Новостройки</a></li> <li><a href="pokupka-nedvizhimosti/" >Жилая</a></li> <li><a href="spbzagorod/" target="_blank">Загородная</a></li> <noindex> <li class="liActive"> <span class="active"><em class="aCrnL"><!-- --></em> <a href="elitnaya-nedvizhimost/" >Элитная</a> <em class="aCrnR"><!-- --></em></span> </li> </noindex> <li><a href="arenda-kvartir-v-sankt-peterburge/" >Аренда</a></li> <noindex> <li><a href="doma-spb_ru/" target="_blank">Коттеджные поселки</a></li> </noindex> <li><a href="kvartira-v-ipoteku/" >Ипотека</a></li> </ul> </div> </div> <div class="mainMnDpWrpp"> <div class="mainMenuDopWrapp"> <ul > <li> <a href="real-estate/elite/buy/" class="active"> Купить </a> <ul> <li> <a href="real-estate/elite/new/" >Новые дома</a> </li> <li> <a href="real-estate/elite/buy/house/" >Жилые дома</a> </li> <li> <a href="real-estate/elite/cotege/" >Коттеджные поселки</a> </li> </ul><!-- end .sub_menu --> </li> <li> <a href="real-estate/elite/buy/arend/"> Арендовать </a> </li> <li> <a href="real-estate/elite/sell/"> Продать/Сдать </a> </li> </ul> <em class="mmdCrn-l"><!-- --></em> <em class="mmdCrn-r"><!-- --></em> </div> </div> <div class="cleaner"><!-- --></div> </div><!-- /wrHeader --> <!-- /top -->

(2 Comments |Comment on this)

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

P.S.: Пробовал нижней линии задавать свойство clear:both что бы отменить обтекание, но тогда она выводится посредине, но уже сильно ниже, под боковыми блоками Left bar и Right bar.

P.P.S.: Пока писал все это придумал - может у меня просто проблема с концепцией? Если вынести Left bar и Right bar за пределы родительского блока - проблема будет решена с использованием clear:both ... но единственное ли это решение?

UPD: В общем да, проблема была в неправильном проектировании :) Сделал как написал в PPS - все получилось с использованием clear:both. Вопрос снят, прошу простит за беспокойство :)

(2 Comments |Comment on this)

Как вам визуализация данных?

«Web-Burlaki-comm.jpg» на Яндекс.Фотках

(2 Comments |Comment on this)

font-size
Привет. Извините за тупой вопрос: мне казалось, что философский смысл font-size:100% - "шрифт как раз того размера, который удобно читать среднезашедшему пользователю". Однако, в популярных проектах, вроде ЖЖ, Google и т.п. font-size в объёмистых текстах практически везде занижен - ну, где-то до 80%. Есть ли какие-то традиции в современном веб-дизайне - шрифтом какого размера что на странице положено отображать?

UPDATE
https://www.ssbbartgroup.com/blog/2009/10/09/font-resizing-guidance/
http://www.webdesignerdepot.com/2009/03/5-simple-ways-to-improve-web-typography/

(23 Comments |Comment on this)

При размещении счетчика пропадает страница.
Для редактирования страниц использую Dreamweaver. На первую страницу сайта с кое-каким скрипом, но два из трех запланированных счетчиков все-таки добавились (посмотреть можно тут: awesomepics.ru).  Не добавился счетчик от Mail'а, который разбивается на две части (при его вставке вместо моей странички отображается полностью чистая страница)
При попытке вставить код счетчика в код других страниц, при просмотре и сам DW и браузер выдает чистую белую страницу. 
Я полный новичек и самоучка как в css, так  и в html, поэтому если разъясните мне мою ошибку, буду очень благодарна.
Так как я не знаю, в чем причина, то не знаю, какую информацию нужно выкладывать. Жду наводящих вопросов. 

(1 Comment |Comment on this)

Планируемые новшества в CSS.
Tab Atkins, член рабочей группы CSS и команды Google Chrome, опубликовал слайды презентации, которую он проводил в прошлую среду.

Эта презентация демонстрирует четыре относительно новых концепта:

Переменные.
Объявляя переменную через конструкцию @var, указав ее имя, значение, и все что-угодно от цвета до длины, вращений и функций, она может быть доступна для всего CSS, используемого на странице.

Поддержка локальных переменных также будет присутствовать, через конструкцию @local.

@var paragraph-size length 12px; @var paragraph-color color rgba(0,0,0,0); p { color: var(paragraph-color); font-size: var(paragraph-size); }</textarea>

Примеси.
Примеси дают возможность расширить правило необходимыми свойствами с возможностью установки значений по умолчанию.

@mixin error { background: #fdd; color: red; font-weight: bold; } div.error { border: thick solid red; padding: .5em; @mixin error; } span.error { text-decoration: underline; @mixin error; }

Вложения правил.
Текущие вложения в CSS, особенно без использования классов или id, являются болезненными. Конструкция @this преставлена для упрощения этого. Она будет применяться к потомкам действующего правила, наследуя его имя. Теперь можно будет сделать более ясной такую структуру:

header { color: red; @this a { color: blue; } }

Модули.
Нет, не те модули, которые составляют CSS 3. Модули — это обычные пространства имен для переменных и примесей. Переменные и примеси могут быть определены через прописание имени модуля в начало собственного имени, либо используя конструкцию @use.

@module foo { @var bar color red; @mixin baz { color: blue; } } .foo { color: var(bar); // Не работает } .bar { @use foo; color: var(bar); // Работает } .baz { @mixin foo|baz; // Работает }

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

(Comment on this)

проблемы со шрифтом Georgia
Их сразу несколько:
1)Столкнулась с тем, что вов сех браузерах размер шрифта одинаковый, но только в Chrome шрифт заметно меньше, хотя значение font-size он считывает верно(проверила на js). В чем тут дело, у вас такое было? Я проверила: во всех браузерах настройки совпадают. Пробовала задавать размер и в px, em, pt ,% и разница все равно есть.Может ли размер зависить от системы?У меня стоит убунту 10.4, а у руководителя проекта MacOs. И у него шрифты меньше. Причем все это распространяется только на шрифт Georgia. Если его заменить на какой-то из другого семейства, то все ок.
2)Cам шрифт отображается несколько иначе. Буквы ф,ш,щ,ц, д. В макетах для шрифта используется Crisp/ Может в этом дело?

(10 Comments |Comment on this)

background-image полностью?
Добрый день. Может, кто-то уже сталкивался с подобной проблемой. каким образом можно принудительно выводить все фоновое изображение? Конкретнот в моей ситуации: есть блок, у которого задано фотоное изображение-полоска(5px высотой). Оно повторяется по y. И нужно, чтобы эта полоска всегда выводилась полностью (даже если контент закончится в момент, когда онат показана на, скажем, 3px, то она бы вывела все свои 5px)Такое можно сделать?

(6 Comments |Comment on this)

Закруглить углы с помощью CSS.
Недавно столкнулся с проблемой закругления углов в веб-дизайне. Я знаю, что обычно это решается с помощью картинок с уже закруглёнными углами. Но бывают случае когда проблему нужно решить без использования изображений. В такое положение попал я. И сегодня я хочу поделиться с вами методом, который поможет нам закруглить углы только используя CSS.

( ПодробнееCollapse )

(6 Comments |Comment on this)

Internet Explorer неверно отображает элемент. Как исправить?
 


Код сдвинутого прямоугольника
.sidebar_top { position: absolute; margin-left: -1px;}
<img src="grafics/sidebar_top.png" class="sidebar_top"/>

Код надписи "Новости"
.news_top { position: absolute; margin-top: -13px; margin-left: 45px; border: 0;}
<p><img src="grafics/index/news_top.png" alt="Новости" width="115" height="25" class="news_top"/></p>

При создании проверяла весь дизайн на Опере, в конце стала проверять в IE, и вот такая небольшая лажа. Google Chrome тоже отображает все корректно. Подскажите, пожалуйста, как исправить.

(6 Comments |Comment on this)

Найти универсальное решение для разнообразных эпиграфов
Друзья, возникла такая проблема.
Есть много-много статей, почти у каждой есть эпиграф. Все они абсолютно разной ширины (есть и стихи с разной длины строками, есть и прозаические) — соответственно, нельзя задать диву эпиграфа единую ширину.
Длины заголовков статей (под которыми эпиграфы) — тоже все абсолютно разные, и в одну строчку, и в две, и в три — соответственно, нельзя указать диву эпиграфа точное позиционирование (мол, top:2em).
При все при этом, нужно, чтобы див эпиграфа был прилеплен к правому краю родительского дива со статьей. И если я ему говорю float:right, то нижеследующий текст статьи начинает обтекать эпиграф, естественно. Решить это можно бы заключив текст статьи в отдельный див, но, по-моему, это неправильно.
Или единственный выход: отключить float:right и просто каждый раз вручную задавать необходимый отступ?
Не знаю, нужен ли тут скриншот или код, если да — довыложу. Спасибо огромное!

(11 Comments |Comment on this)

Есть такой браузер - "Сафари"
Недавно столкнулся с одной замечательной проблеммой.
Вёрстаю, я значит, шаблоны потихонечку и звонит мне куратор проекта. Говорит: "Уважаемый а что за лажа с фоном?" и кидает мне пару скриншотов где градиен переходит в совершенно левый оттенок необходимого цвета. Я как ошпареный мечусь на сайт(ибо уже боевая версия сайта) и вижу что всё впорядке, отписываю и прикладываю скриншот. В процессе жаркой дискуссии узнаю, что у человека macosx и именно там вот такие проблемы, затем тоже самое обнаружилось у человека с 10.10 убунтой и ФФ. При этом на винде и на моём дебиане всё ок.
Подобная проблема у меня както проскакивала, один цвет смотрелся немного по-разному на 2 мониторах, тогда всё свалил на цветовые профили, но тут проблема была глубже ибо фоновые картинки были одинаковые, а фоновый цвет разный. При этом цвет на бг ставился по пипетке с псдшника. Вобщем куча ругани, но пока решено оставить как есть.

Так вот Уважаемые, есть ли у кого мешочек с советами по данному поводу?

Current Mood: optimistic

(9 Comments |Comment on this)

Вакансия: Москва, Lenta.ru, мягкий фултайм, 55000
Требования
— отличное знание HTML (желательно вплоть до HTML5), CSS, JavaScript (jQuery)
— наличие интерфейсных проектов в портфолио
— отсутствие желания полностью переквалифицироваться из верстальщика в программисты :-)
— семантическая верстка

Обязанности
— верстка интерфейсов бек-энда (сложных и интересных).
Особенности: делаем cms мечты суперудобную для редакторов.

— верстка Ленты.ру и спец-приложений
Особенности: высоконагруженные проекты, необходимость работы верстки в старых броузерах

Условия
— фултайм (с мягким графиком)
— офис на м. Автозаводская
— 55 000 рублей чистыми (полностью белая зарплата)
— коллектив-мечта

Присылайте пару слов о себе и ссылки на вашу верстку
mgurin@gmail.com

(Comment on this)