Kray Storm

есть карта изображений (1 большая картинка состоящая из 7)

Точнее: одна картинка с 7-ю "активными" областями, в этом вся загвоздка.

при наведении на каждый кусочек появлялось увеличенное изображение этого кусочка. ...мне поможет код CSS

CSS вроде пока не умеет выдирать и из единого изображения фрагмент и масштабировать. Может быть, разве, какие-то экспериментальные CSS3-возможности. Теоретически, если брать только CSS, можно посмотреть в сторону множественных фонов или нескольких областей-блоков и смене значений background/background-size при наведении. И туда еще ссылки нужно делать... Замороченно, как-то.

Если использование карт не принципиально, то я бы просто порезал изображение на фрагменты. Засунуть их внутрь <a>, спозиционировать и дать нужную реакцию при :hover не проблема, можно даже красивости через transitional добавить.

пинок в правильную сторону

Бдум! Карты, работа с областями при наведении. Что-то подобное. Но там возни тоже достаточно и это уже не "чистый CSS".

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

Играюсь с менюшкой со всем известного макета level3 с divhack.

Там нужно под каждым пунктом меню разместить треугольный указатель.

С фиксированным вариантом все замечательно: генерим через :after блок, поворачиваем, и позиционируем относительно самого пункта меню.

Получается что-то такое.

Резиновый вариант меню решил сделать на таблице, но тут старый подход ведет себя иначе.

По идее, каждый <a> должен генерить по блоку-указателю, который смещаем на 50% от ширины каждого же <a>.

Подскажите пожалуйста, тут какой-то нюанс с таблицами, или я просто что-то банально пропустил и не вижу?

Зачем если pt идентичен px

Не совсем. Когда-то во времена тотального правления 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 в %.

Для тех кто хорошо понимает css/html, там делов-то на раз плюнуть.

Как говорил один бывший начальник: "Тут дофига работы и все на вчера, но я знаю, что ты легко и быстро это сделаешь - давай, занимайся..." ))

границы у элементов не до конца

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

Дизайн д.б. ... ахренительным для 50-60%

... и адским для 0.2%

Прости, но это просто эпичный текст :

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

...Именно поэтому, весь этот сайт создан, не на одном из движков, для сайта. Что-бы любой из Вас, смог посмотреть, какой выходит самый простой сайт на HTML, и это не предел.

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

...а главное Вы ”играясь” изучите язык программирования HTML, который позже, сможете применять в любых других (удобных для Вас) программах, при создании Вашего сайта.

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%".

Поможет ли такой сайт самым начинающим в изучении HTML?

На счет "поможет" - неизвестно.

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

Dreamweaver cs6? Чтобы можно была прописывать код и подключать css, или прописывать стили внутри html

Сильно, конечно... ))

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

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

...

А что будет со всеми теми

width:60px;

height:60px;

и

left:5px;

top:20px;

когда изменятся размеры ячейки и самого number?

Снова ровнять ручками?

Необходимо поставить number вертикально и горизонтально по центру ячейкти, а lefrsqr и rightsqr в нижние углы ячейки таким образом, чтобы ни один элемент не выезжал за границы ячейки и при изменении размеров number скриптом, lefrsqr и rightsqr оставались приклееными к своим углам, а он оставался выровнянным по центру.

Наличие элемента 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/