antonKar

У нас есть YouTube Iframe API (используется он потому что YouTube Javascript API не работает на iPad и прочих мобильных устройствах и браузерах). http://jsfiddle.net/KjD37/3/ В FF по клику на ClickMe всё отлично, видео встаёт на место и начинает воспроизводиться, а вот Safari 5 на WinXP глючит и не работает: видео встаёт куда надо, но воспроизведение не начинается. Но если нажать на ClickMe ещё раз, то воспроизведение начинается. Что за чертовщина?

По-моему это никак не сделать, по крайней мере при работе с YouTube Iframe API. Там либо информационная полоса сверху появляющаяся, либо логотип YouTube в правом нижнем углу. А без того и того никак.

Обязан.

Космополитан? Помню мне как-то предлагали работу верстальщиком на американском порносайте. Знание английского оказалось, к сожалению, недостаточным

а через псевдоэлементы делаем без картинок

img жи, inline

Нашли где искать примеры, у меня бабушка бегает быстрее, чем господа из w3c меняют стандарты, а тем более примеры. Нагляднее, удобнее и легче в вёрстке и применении стилей связка nav + a. Всё. div у нас просто для оформления. 1) связка nav+div+a короче, чем связка nav+ul+li+a 2) не надо сбрасывать стили для списков (если конечно у нас не юзается normalize.css, по крайней мере у меня в кастомной редакции маркеры сброшены)

Хотя бы тем, что это будет более контролируемо и быстрее написано, чем на JS.

Либо <section class="content"><div><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><!----><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><!----><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><!----><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><!----><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><!----><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><!----><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><!----><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><!----><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><!----><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><!----><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><!----><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><!----><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><!----><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><!----><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><!----><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><!----><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><!----><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><!----><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a><!----><a href="#"><img class="separate1" src="img/1.png" onmouseover="this.src='img/izo.png'" onmouseout="this.src='img/1.png'" border="0"></a></div></section>

Через псевдоэлементы

1) в шапке красный не по макету 2) картинку в шапке нельзя тянуть; надо было в макете посмотреть нет ли продолжения у картинки; если нет, то просто чёрным залить по бокам 3) Шрифты не те везде 4) Логотип не в том месте. Во-первых отступ сверху не тот, во вторых было сказано, что ширина контентной части 940 пикселей. Вот внутри них и надо всё пихать. 5) У блока с Just do it высота неправильная 6) Текст вообще говно в вёрстке по содержанию. Рыба в макете конечно тоже говно, но можно набрать текста из Википедии английской. 7) Картинки тоже надо делать не на "а насрать", а взять из макета все 3 картинки 8) У серой центральной части отступ снизу не по макету 9) Подвал к низу не прибит 10) что за белый фон по краям у серого блока центрального? 11) высота шапки с чёрной картинкой неправильная 12) У подвала цвет и высота неправильные 13) Всплытие Just do it можно сделать на css 14) Меню верстается связкой nav+div+a (если кто будет говорить, что списками - это старая схема; навигация и списки - это совершенно разные по логике вещи, для которых есть совершенно разные теги) *прогнозирую уход от обсуждения макета и переход на обсуждение этой штуки*

Если обернуть в 2 div, то можно через эмулировать border через псевдоэлементы.

А не факт, что сработает при таком методе подключения. 1) Цепляем видео <div id="dropdownVideo__video"> Для просмотра видео необходимо установить Flash player и активировать JavaScript.</div><script type="text/javascript"> var ytplayer; var videoBox; var videoWidth = 1280; var videoHeight = 720; function onYouTubePlayerAPIReady() { videoBox = document.getElementById('dropdownVideo__video'); videoBox.ytplayer = new YT.Player(videoBox, { videoId: 'GlGBUPT6XKw', playerVars: { wmode: "transparent" }, height: videoHeight, width: videoWidth }); } </script><!-- да-да, не удивляйся, мой юный друг, library от YouTube надо вставлять после, спасибо Opera 12 --> <script type="text/javascript" src="//www.youtube.com/iframe_api"></script>2) Получившемуся iframe делаем position: absolute; left: -9999px; top: -9999px (родительскому div, ясно дело, делаем position: relative). 3) Затем при клике на картинку скрываем её, а для iframe делаем в ноль левый и верхний отступы; затем ytplayer = document.getElementById("dropdownVideo__video"); //хз нужно ли это, но пускай будет, с этим API от YouTube с горя офигеешьvideoBox.ytplayer.playVideo();И делаем setInterval, скажем, в 100 миллисекунд, в котором проверяем состояние воспроизведения видео videoBox.ytplayer.getPlayerState() (не помню какое числовое значение соответсвует окончанию воспроизведения, посмотрите документацию). Как только воспроизведение закончилось, то скрываем iframe, показываем картинку, останавливаем setInterval.

fadeIn() ? show() ? slideDown() ? Чего надо-то конкретно?

А в чём конкретно сложность? «ВКонтакте» «Facebook» Плюс рекомендую почитать статью и комментарии http://habrahabr.ru/post/156185/

#content{ height:300px; border: 1px solid; background:red; overflow: hidden;} http://htmlbook.ru/css/box-sizing

А про ресайз Пушкин думать будет?

Ну всё правильно он прижимает к левому краю. Вы сожмите у себя десктопный браузер до 1000 пикселей и посмотрите что будет.

как вариант http://jquery.page2page.ru/index.php5/Off

Если нужен полупрозрачный градиент, то PIE v2 beta вроде как умеет делать градиенты с прозрачностью, но только для двух цветов.

Если разница в толщине контуров букв пара пикселей, то никак. Это не проблема.

У них на сайте картинка сделана не фоном для body. Там после открытия body идёт дивка с абсолютным позиционированием и высотой и шириной в 100%. А внутри дивки уже сама картинка с фиксированным позиционированием, шириной в 100% и высотой auto. Так что не надо, мягко говоря, лукавить, что вы смотрели в веб-инспектор.

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

Ну дня 2 я над ним посижу как минимум. Потому что макет ололо, и с первого захода может не получиться. А мы картинку выпрямим. Кстати, посмотрел, у IE есть какие-то фильтры для matrix-трансформации. Мой вам совет: найдите в интернетах как минимум 3 самых сложных, на ваш взгляд, макета, сверстайте их и показывайте их, когда отправляете резюме (ну и предварительно тут на форуме в специальном разделе попросить окинуть вашу вёрстку взглядом и спросить что не так). Если будут говорить вам выполнить тестовое задание на вёрстку, то говорите, что вы не будете верстать целый макет с нуля, спросите в чём именно у них возник вопрос по вёрстке, попросите дать задание именно по тому моменту, где у них возник вопрос. Отказываются идти навстречу - фак офф, stupid company, найдём ту, где люди работают поадекватнее. Я тоже поначалу делал какие-то макеты тестовые, потом порядком подзадолбался и потом уже просто показывал свёрстанные макеты. Киньте в личку.