Vulner

http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

Как-то так: http://jsfiddle.net/mh63p/

Не нравиться мне что-то твой вариант с картинками, Хотя бы потому что будет велосипед с кодом, лишние отступы справа, вычислением размеров и позиции, обычно принято верстать каждый элемент, каждый блок отдельно, из-за 1 запроса ничего не будет Не стану особо переубеждать, поскольку не считаю себя достаточно компетентным в данном вопросе..Но все же скажу пару доводов к моим словам. 1) Я говорил в принципе о 3х картинках. Инпуты, сабмит, и ссылка. Можно было бы еще парочку затронуть, но остановимся на этом. 3 картинки = 3 запроса + какой-то объем трафика. Этот объем явно больше чем будут весить правила, описывающие эти элементы без картинок. Возможно вам сейчас кажется что это лишь какие-то несчастные пару килобайт, и каких-то несчастных 3 запроса. И возможно на конкретно данном примере это будет верно. Но представим более громоздкий проект, который итак чем только не напичкан.. Для такой ситуации любая оптимизация принесет заметный плюс. Один запрос, один объем такой картинки может быть критичен для конечного пользователя. Поэтому я лично для себя давно уже решил, что если есть возможность сделать что-то не используя картинку, то почему бы и нет. 2) И в конце то концов..Что увидит пользователь у которого отключены изображения?

<link href="stylesheet.css" media="all" rel="stylesheet" type="text/css"> Type можно убирать. Следует поднапрячься и прикрутить слайдер Их у вас к тому же целых два. Картинка для инпута, картинка для кнопки. Но ведь можно обойтись и без картинок. Меньше картинок - быстрее загрузка. Это же относится к картинке в <a class="new-link" href=""></a> Ссылки в контентной части и в футере себя никак не ведут. Кроме того, что меняется курсор. Но этого мало.. Картинки контентной части, которые относятся к тексту, делаются через img. А если все же делаете через css, то не нужно создавать для этого отдельный элемент, как например у вас: <div class="new-image new-image2"></div> Основному контейнеру тогда и прописывайте background.

В том виде, в каком оно все сейчас, так оно и выходит. Но исходя из того, то нужно его прижать. Ведь если убрать контент, то где окажется футер? Верно, не в низу страницы, где ему и место, а где-то по серединке.

Думаю можно было бы объединить <link href="css/reset.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> в один файл. Одним запросом меньше Создавать для тени отдельные элементы <div class="footer-shadow-top"> </div> <div class="footer-shadow-bottom"> </div> не есть хорошо. Лучше их сделать через footer:after, footer:before. Кстати сам футер неплохо было бы прижать к низу И по поводу кнопки DOWNLOAD NOW. Наверное лучше чтобы это была не картинка. А блочок с заливкой и текстом.

Благодарю за совет! Пока склоняюсь к такому же выходу. Ну так или иначе я собирался попробовать натяжку, узнать что да как. Просто пока никак не дойду до этого..

Все еще интересует данный вопрос.. Суть вкратце: Как правильно учитывать дальнейшее наполнение сайта контентом? При создании из верстки шаблона будет ли учитываться, что в одном месте например параграф нужно вставлять с одним классом, в другом с другим(не знаком просто с процессом верстка->шаблон)? И как следствие - при наполнении необходимый класс будет сам прикручиваться. Или же это может быть грамотный контентщик, который сам прикрутит необходимый класс? Или же стоит как-то создавать стили "по-умолчанию" для популярных тегов: p, img, h1-h6, ul/ol li, a и т.д.?

Идея понятна..Только вот еще такой вопрос. Я с CMS-ками еще не знакомился, и процесс перевоплощения верстки в шаблон не знаю..Это я к чему. Ну вот пишет контентщик абзац какой-то. Этому абзацу прикрепляется заданный стиль(т.е. именно описанный мною), или это просто будет самый обычный абзац? Но это будет весьма не универсально..Возьмем банально заголовок и под ним статья обернутая в p. Задали мы footer'у font-size, color. Но нас не устраивает скорее всего размер шрифта, который вышел в хедере, и мы ему классом, или контекстным селектором(так ведь в плане наполнения будет лучше?), переопределяем этот размер. Или вообще у нас в этом футере еще несколько дивных блоков, и в них разный стиль текста. Думаю понимаете к чему я клоню? Т.е. все равно где-то что-то да прийдется переопределить. Или те же списки..Их может быть несколько, и абсолютно разных, в пределах одного контейнера..Или вообще какие-нибудь span'ы которыми тоже многие вещи делаются.. Т.е. на мой взгляд, тем способом, что вы предложили, универсально не получится.. Тем более наполнять то еще можно, как я уже указывал, изображениями, ссылками.. Тут мне в голову все так же приходит чтото типа footer a..Или я чего-то пока не понимаю Просто дело в том, что я привык всему лепить классы, а тут задумался какие проблемы могут возникнуть при реальном наполнении..Насколько эти классы будут дальше использоваться, будет ли контентщик внимательно смотреть где и за что какой класс отвечает(в чем я абсолютно не уверен).

Как правильно при верстке учитывать дальнейшее наполнение сайта контентом? Интересует именно вопрос в плане визуального оформления, т.е. то, что контейнер должен растягиваться по высоте, и вместе со своим содержимым никуда не наползать/не вылезать это понятно. Приведу пример. Допустим у меня есть параграфы в сайдбаре, контентной части, футере. В каждой из этих частей по макету они выглядят по-разному: размер/цвет/выравнивание и т.д. Для этого я ввожу к примеру такие классы для параграфов: aside-text, content-text, footer-text. И каждому понятно свои стили. Но скорее ведь всего контент-мастер(или как он там) не будет этого учитывать, и будет просто через тег p вписывать необходимый текст, и получится в итоге ерунда. Так как быть? Использовать контекстные селекторы? А-ля footer p, aside p, section p и т.д.? Вроде не хотелось бы опираться на контекст, с другой стороны нужно? И как быть с другими элементами? Заголовки, списки, изображения..

Можно позаморачиваться, или подробить мозги как сказано выше, и получить что-то похожее: http://jsfiddle.net/nMpnh/5/

Не совсем так. Это правило прописывается для элемента span, находящегося в контейнере a, на который(контейнер) наводят мышкой

Речь идет о предварительной загрузке изображений? Или это все же не совсем то?

Что по поводу этого метода?

-Ссылки никак себя не ведут при наведение. Абсолютно.. <ul id="menu_list"> <li class="first"> -Зачем для этого отдельный класс? Воспользуйтесь псевдоклассом first-child к примеру. -Вы фанат таблиц? Очень многое сделано с их помощью..Но стоит ли оно того? Точнее даже нужны ли? #resort_search input#input_first { -ID уникален, зачем тогда контекстный селектор? -Хорошим тоном считается прижатие футера к низу. -В футере можно было разделитель меню выровнять и точнее /* @import url(reset.css); */ * {margin:0; padding:0; border:0; outline: 0;} -Лучше бы закомментировали 2ю строчку

Нет, я про картинку которую вы подключаете в #banner. В ней есть текст, которому неплохо бы быть текстом, и кнопка, которой неплохо было бы быть кнопкой Кстати по поводу той картинки, что вы показали..Можно такую вещичку сделать и без картинки. Скажем вот так: http://jsfiddle.net/XBPrz/3/

CSS3 Но тут правда нужно еще порой забывать не забывать про стареньких осликов, когда картинки могут и прийти на помощь.

При быстром просмотре могу выделить следующее: Постоянное использование <div class="clear"></div> не есть хорошо..Или пользуйтесь в основных блоках overflow:hidden, или очищайте поток через псевдоэлементы. А это после футера зачем? <br> <br> <br> <br> Так понимаю для отступа? Почему бы не прописать просто padding для footer'a? Ссылки себя никак не ведут при наведении(кроме навигации). Это: меню в футере, продукция в сайдабаре, категории в том же сайдбаре и т.д..Кстати логотип тоже должен быть ссылкой. И почтовый адрес в хедере видимо все же тоже. Картинка под меню..Прилеплена через background, к тому же с текстом и кнопкой..Это я к тому, что текст лучше делать текстом..И кнопка должна быть юзабельна. Кстати по поводу кнопок. Нужно еще выровнять кнопку поиска.

Залить body градиентом : http://jsfiddle.net/ZbXYw/

Благодарю за подборку! Многое из этого я уже знал, однако все равно не мог додуматься. Но более внимательно изучив весь подобранный вами материал проблему решил

Такая задачка: имеется хедер, контентная часть и футер. Высота ни одного из этих блоков заранее неизвестна. Необходимо получить макет в котором футер, как ему и положено, прижат к низу, контентная часть при этом растягивается на всю доступную ей высоту(т.е. 100%-высота футера-высота хедера). При этом содержимое этих блоков никуда не наезжает, т.е. блоки толкают друг друга. Я примерно представляю как это можно реализовать через Javascript(правда там кажется будет проблемка при изменении высоты окна браузера, поскольку макет по идее не перестроится до перезагрузки страницы, но не пробовал еще), но можно ли еще это как-то реализовать? Кто что посоветует?

Я где-то читал что связка градиента через фильтр+круглые уголки для старых IE не работает. Т.е. предлагают или выбрать что-то одно, или делать градиент/уголки через картинки.. Если кто-то предложит более правильное разьяснение проблемы и ее решение, то сам был бы рад узнать, поскольку в последнее время неоднократно сталкивался с этой проблемой.

Можно, а точнее нужно, обойтись без второго инпута и соответственно стилей к нему. Просто прописываем background к тому что у нас имеется А-ля: http://jsfiddle.net/nMrGv/ .

Почитайте здесь. Там есть аналогичные примеры

Именно. Видите, для интересующего вас блока прописано left: 146.6px; Поскольку не указан родитель, то это значение просто отсчитывается от body, что в общем-то и видно на 1й картинке.