Kray Storm

Точнее: одна картинка с 7-ю "активными" областями, в этом вся загвоздка. CSS вроде пока не умеет выдирать и из единого изображения фрагмент и масштабировать. Может быть, разве, какие-то экспериментальные CSS3-возможности. Теоретически, если брать только CSS, можно посмотреть в сторону множественных фонов или нескольких областей-блоков и смене значений background/background-size при наведении. И туда еще ссылки нужно делать... Замороченно, как-то. Если использование карт не принципиально, то я бы просто порезал изображение на фрагменты. Засунуть их внутрь <a>, спозиционировать и дать нужную реакцию при :hover не проблема, можно даже красивости через transitional добавить. Бдум! Карты, работа с областями при наведении. Что-то подобное. Но там возни тоже достаточно и это уже не "чистый CSS".

Да, все так и оказалось. Спасибо за решения.

Играюсь с менюшкой со всем известного макета level3 с divhack. Там нужно под каждым пунктом меню разместить треугольный указатель. С фиксированным вариантом все замечательно: генерим через :after блок, поворачиваем, и позиционируем относительно самого пункта меню. Получается что-то такое. Резиновый вариант меню решил сделать на таблице, но тут старый подход ведет себя иначе. По идее, каждый <a> должен генерить по блоку-указателю, который смещаем на 50% от ширины каждого же <a>. Подскажите пожалуйста, тут какой-то нюанс с таблицами, или я просто что-то банально пропустил и не вижу?

Не совсем. Когда-то во времена тотального правления Apple, Adobe и фиксированного разрешения, так и было. И все полиграфисты были рады. Потом пришла Microsoft и прогресс. И наступило "непонятное". Сейчас все зависит от устройства и режима. 1pt - это 1/72 inch, и 1pt=1px будет верно только для вывода в тех же 72dpi. И соответствует это примерно режиму 800x600x14'', что в начале 90-х было неплохо. В среднем разлет между pt и px может достигать 1,3 а в военное время и 2.

Вот так - http://jsfiddle.net/uBv3a/

И где она меняется? http://jsfiddle.net/Spc2Q/

А потом в один прекрасный день разработчики того же Хрома придумают ввести свой тег и атрибут, чудесным образом совпадающий по имени с твоими. Но они будут пониматься не как безвольные строчные элементы к которым "исправляются" все неизвестные теги, а будут "что-то делать". И "...у любых людей, которые захотят это использовать..." в готовых и исправно(?) работающих сайтах начнется веселуха )))

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

Чтоб как-то оценить, нужно сначала определить хоть какие-то требования... А так блок, ну и блок. И решений - валом. Это решение сейчас можно считать несколько устаревшим. И оно, насколько понимаю, вполне стандартное "из учебника". Не значит, что его нельзя использовать (хозяин-барин), но возможности CSS3 позволяют сделать то же самое (или близко к этому) без использования изображений и позиционирования. Используется несколько вложенных блоков. Внутреннему задается вертикальный градиент в фоне, border-radius и box-shadow без размытия. Дальше идет блок с opacity. Дальше - блок с border:dashed. И снова - тень. Учитываем, что прозрачность передается потомкам. Играемся с внутренней/наружной тенью и... готово. Все отступы делаются через padding, без всяких position и overflow. Единственное отличие в итоге может быть в отображении "стежков" - они будут не овальные (или какие там?), а прямоугольные. Но это увидят только дизайнер макета и верстальщик. Ну и по браузерам нужно отдельно посмотреть.

Это как? С неточными размерами? Если элемент блочный и без указания размера - то он на всю ширину родителя. Если блок и размер в %, то дать ему margin:auto или inline-block, а родителю text-align:center;. Если задано позиционирование, то left:50%; и margin-left:-(половина width элемента);

Картинка привязанная к блоку-карте внизу и при этом обтекаемая крупным блоком текста сверху - это, если я правильно понимаю, задача немного противоречивая. Тогда придется делать два текстовых блока: один - основной, который будет над картинкой, а второй - колонкой слева от изображения. Ну и само изображение прибить вниз, естественно. Тут неудобство в том, что нужно будет разбивать единый блок текста и при сжатии может появляться зазор между верхним блоком и картинкой. Читаем, и понимаем, что было несколько оптимистично.PS: Юрист, работающий в... парикмахерской... верстальщиком... Видать, тяжело сейчас юристам

Если без скриптов, то можно посмотреть в сторону transition. Но там нужно проверять кроссбраузерность.

Т.е., картинка должна быть (1)прибита к низу внутри параграфа с текстом, (2)уходить вправо и при этом (3)обтекаться текстом, который идет сверху и (4)еще менять размер в зависимости от размеров окна? С 1 и 2 проблем нет - ставишь <img> внутрь <p> и даешь ему float:right и margin-right:-...px; Вот с 3 непонятно, потому как текст обтекает только те float-ы, которые идут выше. Для 4 можно задать <img>-у min/max-width в %. Как говорил один бывший начальник: "Тут дофига работы и все на вчера, но я знаю, что ты легко и быстро это сделаешь - давай, занимайся..." ))

Не знаю, насколько там у меня float-ы в тему к данному случаю, но получилось так: http://jsfiddle.net/ujUwZ/ ... и адским для 0.2%

Прости, но это просто эпичный текст : 1. Тут регулярно появляются вопросы типа "посоны, у миня тут эта сайт на WP, а как у сылки цвет другой сделать?". 2. Многие школьники в сфере IT сейчас намного умнее, чем кажется - в одиночку ломают прошивки и пишут полноценные 3D-игры. Что уж там html... 3. язык программирования HTML Все - пошел программировать... CSS - это тогда язык программирования языка программирования? А Javascript... о нет, я не должен об этом думать. 4. Ты прав - это не предел (мой любимый сайт) )) Я одного не понял - что ты там куришь продаешь и почему такие перекошенные картинки, да еще и с копирайтами? )) P.S.: Все, нашел: "для улучшения скорости загрузки каждой страницы и сайта в целом. В ближайшее время этот дефект будет устранен с помощью специальных программ". Вопросов нет.

Ну... тогда "все пропало". Но есть один древний способ. Тайная техника ниндзя "over9000px" - http://jsfiddle.net/pxaNG/21/

Пожалуйста - http://htmlbook.ru/practical/tak-tiks

#slmenu ul li div .supermenu-left{} задать position:relative; И вставить тот уголок через :after с position:absolute, указав top:0 и bottom:0 для растяжения по высоте. Спозиционировать картинку в фоне вниз на 100%. Ну и закрасить остальной фон в #fff. Добавить z-index:-1;. Ширина же там фиксированная. Теперь уголок будет ездить внизу, независимо от высоты выподающей области. А тот блок, в котором он сейчас - убрать. Он совсем уж не на том месте. В Опере разлет еще больший, чем в FF.

1. Win+R - "Notepad" - Enter 2. Ctrl+S. 3. Путь: твой "/resources/demos/", имя: "style.css". Сохранить. 4. ??????? 5. PROFIT! Еще можно, почитать Самоучитель, но как обычно, это пустая трата времени - лучше сразу "делать сайты 100%".

На счет "поможет" - неизвестно. Но сам сайт, по крайней мере, здорово продляет жизнь всем, кто уже перешел рубеж "самого начинающего" ))

Сильно, конечно... )) А вообще, если это не шутка, то тебе сюда - http://ru.wikipedia.org/wiki/WYSIWYG

Помогаем - http://htmlbook.ru/practical/blok-s-tenyu

А что будет со всеми теми width:60px; height:60px; и left:5px; top:20px; когда изменятся размеры ячейки и самого number? Снова ровнять ручками?

Наличие элемента numberandbuttons не позволит выровнять number по вертикали и подстроиться под изменение размера ячейки. Иначе нужное положение можно задать и простым позиционированием. Поэтому, если он играет лишь роль общего контейнера, то нужно от него отказаться. А в остальном, вроде не так уж все и сложно. Вот, при любых размерах ячеек и центрального элемента все будет на своих местах: http://jsfiddle.net/FrkhJ/ Можно так: http://jsfiddle.net/FrkhJ/1/ Или так: http://jsfiddle.net/FrkhJ/2/

Можно так: http://jsfiddle.net/WHXyN/ Или так: http://jsfiddle.net/WHXyN/1/