Search the Community

Всем привет, коллеги. Я - начинающий в этом деле, поэтому сильно не разносите) Если кому не сложно - оцените пожалуйста мою работу, укажите ошибки. Жду Вашу критику. Вот свёрстанный макет - https://cleaning-company-001.000webhostapp.com/

Техническое задание. Базовые требования Платформы: Windows, Mac OS X. Браузеры IE8 и выше Chrome последние 2 версии Firefox последнии 2 версии Opera последнии 2 версии (на базе движка Blink) Safari последнии 2 версии В качестве эталонного браузера использовать Chrome или Firefox. Это значит что в одном из них вёрстка должна как можно точнее соотвествовать макету, в остальных не должно быть визуальных отличий. Соответствие макету Вёрстка должна 1:1 соответстввовать дизайну, но допускаются незначительные различия. Данные различия, как правило, возникают из-за шрифтов или при использовании технологии адаптивной разметки. В помощь прийдет инструмет PixelPerfect -- расширение для браузера. Отдельно отмечу что верстка должна быть написана в лучших традисиях graceful degradation. Т.е. всё современные фишки оформления должны быть выполнены средствами CSS. Браузеры которые не поддерживают CSS3 или некторые его свойства должны корректно рендерить страницу без них. Стандарты HTML5/CSS3. HTML - должен проходить валидацию. CSS - не обязательно. В кажестве исходного кода для CSS использовать препроцессор LESS или SASS. Не обязательно, но крайне желательно использовать Grunt для генерирования LESS/SASS в CSS с применением технологии сжатия. Сброс стилей В качестве сброса стилей браузера использовать Normalize.css. Javascript: За основу взять фреймворк jQuery версии 1.11.х или 2.x.x. Для поддержки HTML5 тегов в IE можно использовать код: <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]--> Допускается применение modernizr если потребуется. Ширина сайта Стандартная ширина сайта - 960px. Grid За основу взять любой распрастранненый инструмет для построения макета, например 960.gs или Bootstrap Grid System (требуются знания фреймворка) Изменение/наполнение контентом Блоки могут и будут содержать иной контент, отличный от того что в макете. Контент может занимать как больше так и меньше пространства. При вёрстке следует это учесть что бы в будущем макет не "поехал". Особености макета 1. Шапка 1.1. Меню - Все как видно так и делать. Пунктов меню может быть больше -- это один список который выводится в 2 столбца. Текст пункта меню может быть длинее и распологатся в 2 строки. Обратить внимание на высоту строки в этом блоке, так как пункт в 2 строки будет выглядеть плотнее. 1.2. Учесть, что под ссылкой "Мы на Facebook" появятся в будущем еще несоклько аналогичных ссылок. 1.3. Возможно добавится пару языков. 1.4. Поле поиска 1.4.1. В поле поиска добавить placeholder с текстом "Искать...". 1.4.2. Поле поиска изначально должно быть на 1/3 меньше шириной. Поле прилегает к правому краю. 1.4.3. При клике на поле, средствами CSS оно должно растянутся на ширину, указанную на макете. 2. Слайдер в 4 колонки. Слайдер состоит из 4х колонок в слайде. Прокрутка осуществляется при помощи ползунка под ним. Требуется поддержка для touch-устройств для прокрутки контента. 3. Промо-слайдер 3.1. Табы слайдера -- первый и последний "затухают"с градиентом. Активный - крассный. На макете первый затухающий пункт меню содержит ошибку: градиент должен быть от светло-серого в прочрасный, слева на право (для последнего наоборот) 3.2. Кол-во слайдов может быть больше или меньше, чем на макете. 3.3. С прокруткой каждого слайда так же должны прокручиватся Табы (анимация при этом не обязательна). 3.4. В случае, если размер экрана меньше чем ширина макета, стрелка Предыдущий/Следующий слайд должны быть внутри области слайдера. 3.5. Кнопку управления слайдера должны поддерживать состояние "disabled". В случае если прокрутка далее/назад невозможна, стрелка должна быть не-активной. Визуально достаточно будет применить прозрачность 50% к кнопке. 3.6. Слайдер не влияет на 4 колонки под ним. 4. Контент 4.1. Меню слева. Пукты меню могут быть в несколько строк длиной. 4.2. Центральная колонка 4.2.1. Тут ничего особенного, фотография и статья, набранная контент-менеджером. 5. Футер 5.1. 3 колонки разибы по ширине области. Слева меню может наполнятся. Справа какой-то текст. По-центру виджет от Facebook. 5.2. Оступ снижу дл футера сделать высотой 20px. Дополнительно Кнопка "Отправить письмо", справа от макет -- закреплена всегда на одно расстоянии от верха. WYSIWYG Хочу обратить внимание на то что контент будет набиратся контент-менеджером, который не имеет соотвествующих знаний и навыков в работе с разметкой, а использует только окно редактора и инструменты которые он содержит. Соотвественно весь контент который визуально отвечает таким критериям (статьи, информационные блоки), должен "уметь" корректно выводить результат набранный контент-менеджером в редакторе. В качестве примера такого редактора можно взять TinyMCE Масштабирование страниц Поддержка не обязательна. Пользователь сам на себя берет отвественность за результат отображения страницы применяя к ней любые инструменты которые влияют на её изменение. Если есть желание все таки учесть поддержку масштабируемости, то советую почитать про Эластичные шаблоны, а так же опосля ознакомится с "rem" HTML код Кодировка – utf-8 Структурный, не комментируемый код Семантическая разметка на уровне грамотного использования тегов. Имена классов и идентификаторов – осмысленные, на усмотрение разработчика. Классы служат для привязки оформления, идентификаторы – скриптов. LESS/SASS код Структурный, отбивка табами. Комментариями обозначены начало/конец крупных модулей/блоков разметки. Допускается использование вендорных префиксов. Стили для IE вынесены в отдельные CSS файлы, если они потребуются. Для реализации в IE не поддерживаемых CSS свойств использование javascript хаков, или каких либо других интсрументов, запрещено (выше уже упоминалось про graceful degradation) Перед тем как приступить к работе настоятельно рекомендую ознакомится с темой Типичные ошибки начинающего верстальщика Javascript код Структурный, отбивка табами. Имена переменных осмысленные, на усмотрение разработчика. Снабжен комментариями: описаны назначения методов/классов функций условий. Для объемных задач используется ООП, для простых – обычные функции. Код должен быть без ошибок. При использовании Ajax и не предоставления заказчиком api для взаимодействия с серверной частью, api создается на усмотрение разработчика. Изображения Имена файлов осмысленные, на усмотрение разработчика. Графику следует оптимизацировать в Photoshop (использую инструмент "Save for Web") и ImageOptim (OSX) или OptiPNG (Windows) Малые изображения и иконки объеденить в спрайты. Для полноцветных RGBA картинок можно использовать инструмент Stitches Для векторных изображений иожно использовать IcoMoon Организация структуры файлов и папок HTML файлы лежат в корне. Главная страница – index.html. Остальные – по именам макетов. Стили в папке - /css/ SASS/LESS в соответствующей папке - /sass/ или /less/ Javascript - /js/ Изображения оформления - /images/ Изображения содержания - /thumbs/ или /pic/ Шрифты - /fonts/ Наглядный пример Краткий вариант - только директории: Полный вариант -- директории и файлов: Удачи в обучении Автор макета -- Павел Борисенко предоставил данную работу на благо обучения начинающим За основу ТЗ был взят пример со статьи Техническое задание на верстку сайта design 1 - splat.zip

Добрый день всем! Я с довольно элементарным вопросом, но я в замешательстве. На определенном этапе обучения перешел с ознакомлением Photoshop для нарезки макета. Почти все нюансы и тонкости понял. Но столкнулся с одной элементарщиной, которую не уловил из видеоуроков, а именно - как мне добыть фоновое изображение(к примеру, не повторяющиеся узоры, а фото... пейзаж) из макета, к примеру, из Header? Просто убрать все наложенные поверх слои и сделать экспорт изображения? Как-то этот нюанс я сам не понял до конца, а в видео, которые я смотрел, работа с фоном заключалась в вырезке как раз куска фона для цвета, или с узором.

Нарооооод я В общем освоил html+css на начальном уровне и вот сварганил первый сайт на дивной верстке вот демка сайта которую копировал http://www.woweb.ru/td1/048/ а вот собственно мои файлы жду так сказать критику что нуб и тд хех ну вродь выглядит неплохо на всех браузерах завтра буду делать что посложнее index.html style.css

есть сверстанный макет. Подкинте ссылки на статьи как его повесить на joomla

Здравствуйте. Недавно появился заказ, который меня немного насторожил тем, что дизайном заведовал дизайнер-маркетолог. На первый взгляд макеты для десктопа неплохие, как обычно. Потом через время предоставили для планшетов и мобильных. Вот с этого момента подробнее: 1. Макеты с одинаковыми блоками для разных страницы отличаются 2. Мобильное меню с непонятно откуда взятыми пунктами, которых не было в десктопной версии. Их то 6 пунктов, а в моб. - 8 (совершенно новых )+вложенности до 2 уровня. 3. Мелочи вроде разных padding по краям, также нижние и верхние отступы разнятся у одинаковых блоков. 4. Немного нелогичное построение блоков - у десктопа одна структура (фото>заголовок>текст>кнопки), для планшетов (заголовок>фото>кнопки>текст), для телефонов (заголовок>фото>текст>кнопки). Также нет состояния при наведении на кнопки и при нажатии. Когда увидела макет, дала список вопросов, составили что-то вроде ТЗ, в котором опять таки ответили не на все вопросы. Например, про наведение так и не определились, но чтоб была рамочка Ну и далее мелкие несовпадения, которых накапливалось очень много и приходилось писать длинные письма дизайнеру-маркетологу, потому что каждый отличающийся отступ, не тот цвет и новая непонятная рамка стоит добавления нового класса. Самый распространенный ответ - а вы как думаете? или на ваше усмотрение. То, что я думаю - дизайн не проработанный (планшетный и мобильный), и чтоб мне решить, надо потратить время на анализ что было и как будет и будет ли оно удобно. В общем, неделю таких переписок - и мне это порядком надоело. Макет они дорабатывать не собираются. Предоплату я отработала, так как есть страницы для всех версий, кроме меню и 2-х форм отправки (которые, кстати, только для десктопа сделаны). Думаю дальше отказаться, потому что это не стоит потраченного времени и того, что осталось мне доплатить, денег не потребую. К чему я это написала. Как распознать на ранней стадии, какие ошибки или несоответствия скрывает в себе макет? Как составить здравое ТЗ, если все нюансы появились в процессе верстки? Если нет ТЗ от заказчика по макету, стоит ли тратить время на его написание с моей стороны или это дело заказчика (это всё потраченное время, которое никто не оплатит, кроме увеличения стоимости верстки ненамного)? Стоит ли прислушиваться к себе и не брать заказы от дизайнера-маркетолога :)? Могу я взять работу в портфолио, так как 90% выполнено мной (брала заказ отчасти потом, что понравились макеты)? P.S. макеты не прикрепляю по не- известным причинам

Друзья, как проще всего сравнить сверстанную страницу и исходный psd ? Искал инфу, но все, что нашел это внедрение скриншота страницы верхним слоем в макет. Как-то муторно имхо. Проще способов нет? Читал также про прозрачные окна на Ubuntu и Win7. У меня Win 10? а там вроде бы прозрачность окон отменили.

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

Здравствуйте, форумчане. Я начинающий верстальщик и хотел бы узнать от более опытных, какие ошибки допущенные в верстке ? Вот ссылка на макет: template-3.esy.es Спасибо за внимание и уделенное время.

Как нарезать такие иконки, если вырезать из без фона, то получиться не то, и с фоном их тоже не вырежешь http://cs610723.vk.me/u252023236/docs/9650dfc1ebfa/dsaasdfdsafmm.png?extra=oCNkf3MfGI-cYh6zq2mFuuM_qlBMdIbejN15hZ2eEJx2b9UxdoWgYaj7OISo52mun2XwbkIG0WTCBT7no4n4DoPVHD4DJJiv

Техническое задание. Базовые требования Платформы: Windows, Mac OS X. Браузеры IE8 и выше Chrome последние 2 версии Firefox последнии 2 версии Opera последнии 2 версии (на базе движка Blink) Safari последнии 2 версии В качестве эталонного браузера использовать Chrome или Firefox. Это значит что в одном из них вёрстка должна как можно точнее соотвествовать макету, в остальных не должно быть визуальных отличий. Соответствие макету Вёрстка должна 1:1 соответстввовать дизайну, но допускаются незначительные различия. Данные различия, как правило, возникают из-за шрифтов или при использовании технологии адаптивной разметки. В помощь прийдет инструмет PixelPerfect -- расширение для браузера. Отдельно отмечу что верстка должна быть написана в лучших традисиях graceful degradation. Т.е. всё современные фишки оформления должны быть выполнены средствами CSS. Браузеры которые не поддерживают CSS3 или некторые его свойства должны корректно рендерить страницу без них. Стандарты HTML5/CSS3. HTML - должен проходить валидацию. CSS - не обязательно. В кажестве исходного кода для CSS использовать препроцессор LESS или SASS. Не обязательно, но крайне желательно использовать Grunt для генерирования LESS/SASS в CSS с применением технологии сжатия. Сброс стилей В качестве сброса стилей браузера использовать Normalize.css. Javascript: За основу взять фреймворк jQuery версии 1.11.х или 2.x.x. Для поддержки HTML5 тегов в IE можно использовать код: <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]--> Допускается применение modernizr если потребуется. Ширина сайта Стандартная ширина сайта - 100%. Изменение/наполнение контентом Блоки могут и будут содержать иной контент, отличный от того что в макете. Контент может занимать как больше так и меньше пространства. При вёрстке следует это учесть что бы в будущем макет не "поехал". Особености макета Главная страница 1. Фоновое изображение должно занимать полностью область окна браузера. По умолчанию картинка имеет значение ширины 100%. 1.1. В случае если ширина окна браузера больше чем высота, ширина картинки 100%, высота "auto". Картинка приклеена к верху и обрезается снизу. 1.2. В случае если ширина окна браузера меньше чем высота, установить значение высоты для картинки 100%, а для ширины "auto". Картинка должна выравниватся по центру, тем самым обрезая края слева и справа. 1.3. Вышеуказанные пункты реализовать при помощи CSS3 2. Меню 2.1. Меню имее отступ сверху фиксированный. 2.2. Высота меню не фиксированна. Количество пунктов может менятся. Текст в пункте меню может быть в несколько строк -- такой пункт должен выглядеть более сжатым по отношении к другим за счет line-height. 2.3. Ширина меню фиксированна. 3. Слайдер 3.1. Блок с текстом всегда должен быть по-центру как вертикально так и горизонтально. Контент внутри может и будет менятся. 3.2. Ширина блока по-центру может занимать все доступное срастранство, но не может "налазить" на меню слева. Так же этот блок не должен "налазить" на индикацию в нижнем правом углу если там будет много слайдов. 3.3. Индикация слайдов размещается в нижнем правом углу. Отступы справа и снизу фиксированные. Элементы индикации могут выстраиваются в несколько строк при сужении экрана (в таком случае возможна ситуация конда индикация ложится поверх блока по-центру). Кликатебельная зона должна быть достаточной что бы в неё можно было тыкнуть пальцем на смартфоне. 3.4. Требуется поддержка touch-устройств. Внутреняя страница 1. Блок с белой рамкой имеет фиксированную высоту, выравнивается по-центру области в которой размещается. Его ширина может достигать ширины всей строки, за вычитом ширины меню. Текст внутри данного блока должен выравниватся вертикально по-центру. Строк может быть как одна так и две. Если контент превышает область -- прятать излишки. 2. Белая область на странице. 2.1. Данная область занимает всё пространство области, при этом имея фиксированный отступ сверху и слева. 2.2. Левая колонка имеет фиксированную ширину 2.3. Правая область, с картой, занимает все доступное пространство. Масштабирование страниц Поддержка не обязательна. Пользователь сам на себя берет отвественность за результат отображения страницы применяя к ней любые инструменты которые влияют на её изменение. Если есть желание все таки учесть поддержку масштабируемости, то советую почитать про Эластичные шаблоны, а так же опосля ознакомится с "rem" HTML код Кодировка – utf-8 Структурный, не комментируемый код Семантическая разметка на уровне грамотного использования тегов. Имена классов и идентификаторов – осмысленные, на усмотрение разработчика. Классы служат для привязки оформления, идентификаторы – скриптов. LESS/SASS код Структурный, отбивка табами. Комментариями обозначены начало/конец крупных модулей/блоков разметки. Допускается использование вендорных префиксов. Стили для IE вынесены в отдельные CSS файлы, если они потребуются. Для реализации в IE не поддерживаемых CSS свойств использование javascript хаков, или каких либо других интсрументов, запрещено (выше уже упоминалось про graceful degradation) Перед тем как приступить к работе настоятельно рекомендую ознакомится с темой Типичные ошибки начинающего верстальщика Javascript код Структурный, отбивка табами. Имена переменных осмысленные, на усмотрение разработчика. Снабжен комментариями: описаны назначения методов/классов функций условий Для объемных задач используется ООП, для простых – обычные функции. Код должен быть без ошибок. При использовании Ajax и не предоставления заказчиком api для взаимодействия с серверной частью, api создается на усмотрение разработчика. Изображения Имена файлов осмысленные, на усмотрение разработчика. Графику следует оптимизацировать в Photoshop (использую инструмент "Save for Web") и ImageOptim (OSX) или OptiPNG (Windows) Малые изображения и иконки объеденить в спрайты. Для полноцветных RGBA картинок можно использовать инструмент Stitches Для векторных изображений иожно использовать IcoMoon Организация структуры файлов и папок HTML файлы лежат в корне. Главная страница – index.html. Остальные – по именам макетов. Стили в папке - /css/ SASS/LESS в соответствующей папке - /sass/ или /less/ Javascript - /js/ Изображения оформления - /images/ Изображения содержания - /thumbs/ или /pic/ Шрифты - /fonts/ Наглядный пример Краткий вариант - только директории: Полный вариант -- директории и файлов: Удачи в обучении Автор макета -- Павел Борисенко предоставил данную работу на благо обучения начинающим За основу ТЗ был взят пример со статьи Техническое задание на верстку сайта design 2 - relax clinic.zip

Сайт на горизонтальном экране ноутбука Lenovo выглядит нормально, при повороте экрана вертикально, вёрстка ломается. Причём на мобильных устройствах вертикальный просмотр нормальный... Можно ли удовлетворить и вертикальный вариант просмотра на ноутбуке?

http://ordered.esy.es Ссылка на сайт Верстал две странички,одна Blog,вторая Home,доступ к ним осуществляется через верхнее меню что в header Вот макетики Home https://cloud.mail.r...usQcp1/Home.psd Blog https://cloud.mail.r...FNuMDU/Blog.psd Благодарю заранее! P.S Было переделано после замечаний со стороны форумчан в этой теме

http://ordered.esy.es Ссылка на сайт В макете не верстал оформление видео плеера,так как не умею это +Шрифт не такой как в шаблоне Верстал две странички,одна Blog,вторая Home,доступ к ним осуществляется через верхнее меню что в header Вот макетики Home https://cloud.mail.ru/public/3x7mBwusQcp1/Home.psd Blog https://cloud.mail.ru/public/237ZnSFNuMDU/Blog.psd Благодарю заранее!

Привет всем форумчанам! У меня нарисовалась такая небольшая проблемка: на сайте не отображаются картинки. А если точнее, то только логотип, который имеет расширение .png Я прописываю следующий путь в индексном файле <img src="./images/logo.png">Иерархия файлов следующая: 1. Файл index.html 2. Файл style.css 3. Папка images Я могу предполагать, что я не правильно указал путь (./). Но пробовал уже по-всякому — ничего не получается.

Всем привет. Сделал макет, прошу оценить и дать объективную оценку. https://www.dropbox.com/s/o877hcuhtxinqkb/LandingPage.png?dl=0

Привет друзья. Использую модуль jquery.cross-slide.js для плавной замены фона но изображения скачут по размеру, вызывая скролл и отступ от верха и левого края на 30 px В чем может быть дело вот html <head> <meta charset="windows-1251"> <title>ghjghj</title> <meta name="description" content="567567"> <!-- <link rel="stylesheet" href="demo.css"> --> <link rel="stylesheet" href="cross.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="js/jquery.cross-slide.js"></script></head><body><div class="bg_slider" align="center"> <div class="slider_wrapp"> <div id="placeholder" align="center"> </div> </div> </div> <script>$(function() {$('#placeholder').crossSlide({ sleep: 3, fade: 5}, [ { src: 'work/1.jpg' }, { src: 'work/2.jpg' }, { src: 'work/3.jpg' }, { src: 'work/4.jpg' }, { src: 'work/5.jpg' }]);});</script> </body></html>вот css #bg_image { width:100%; position:absolute; } .bg_slider { width:100%; position:absolute; } #placeholder { height:650px; }

Пару недель повисел на сайте, почитал статьи. Решил попробовать сверстать несложный сайт.Не всё так просто, как казалось. вот макет сайта https://googledrive.com/host/0B8AjTYm85ggoOWIzVGFwYTMtbFE/. Шапку с грехом пополам сверстал вроде. А дальше дело не особо пошло. В частности не могу понять почему не добавляются поля padding класса .wrapper. Думал сделаю обёртку чтобы текст не прилипал к границе слоя, но что-то не выходит. Вроде использую верное решение с сайта http://htmlbook.ru/samlayout/tipovye-makety/rezinovyi-dvukhkolonochnyi-maket. Вот моя недоделка https://googledrive.com/host/0B8AjTYm85ggoSjgyX29HOEJIYzQ/maket.html . Пытался сам понять что не так, в итоге сделал тестовую страничкуhttps://googledrive.com/host/0B8AjTYm85ggoSjgyX29HOEJIYzQ/test.html на которой тот же принцип срабатывает, а у меня нет. В тесте блоку <div class="s6"> соответствует мой wrapper. Кто увидит грубейшие ошибки и тыкнет носом заранее спасибо. P.S. Если тема не в том разделе или я неясно выражаюсь что не работает, то дайте знать. Заранее спасибо.

Увидел макет, скачал, заценил уровень криворукости и полнейшей пофиговости того кто его рисовал, и решил провести пару дней садо-мазо над собой. Какой плюс может дать верстка ужасного и кривого макета? Как мне кажется - опыт работы с криворукими дизами и закалка мозга от неожиданного батхерта. Если все время верстать хорошие макеты, где каждый слой лежит в своей папочке, и каждая такая папочка еще и раскрашена, где все сделано по сеточке пиксель в пиксель, где нету одинаковых абзацев текста, у которых разные отступы интерлиньяжы и тому подобное, где 2 подряд идущих абзаца не имеют разных отступов со любых сторон, где почти все значения целые или хотя бы четные, а не что-то типа 173, 169, 19.5, в таком случае это похоже на шоколадную жизнь. А такого, как мы знаем, не бывает. Верстка полностью фиксированная под ие8+, но и на ие7 все довольно не плохо. Также пытался сохранить все извращения диза, потому в коде полным полно сдвигов с садо-мазо числами. То что на глаз кажется одинаковым, например черточка нижнего подчеркивания одинаково отступает у заголовков, на самом же деле там разброс в 1-3 пикселя. Если все прижимается к левой стороне, все равно находится блок, который вылазит на 3-4 пикселя за границы. В общем весело было. Лого специально верстал, а не вырезал. Менюшку также извращал градиентами, но голова опухла раньше чем удалось более точно добиться совпадения (3 градиента это перебор 0_o ), решил оставить как есть и не заменять картинкой. Всяких ховер стейтов и прочих нифига нету, потому все оставлено как есть, без своих добавлений. Если кто-то подскажет/выскажет замечания, в основном интересуют по коду, буду очень благодарен. картинка макета - http://webdevelop.zz.mu/business-1/business-1.jpg сайт - http://webdevelop.zz.mu/business-1/

Здравствуйте! Посидев на сайте htmlbook.ru в разделе макеты, попробывал сделать получилось,но у меня есть проблема,заключается она в том,что я хочу сделать резиновый макет с тремя колонками,там он есть но он не резиновый и поэтому хотел узнать как мне такой сделать,я новичок если кто сможет объяснить или просто совет дать буду рад выслушать).И ещё кое что,там в макетах есть 1 резиновый макет с двумя колонками вот вопрос, сделав макет и сделав два блока меню слева использую float у меня получилось,сделал 3ий блок хотел сделать меню справа,но блок почему то оказался на уровне нижнего блока слева пытался поднять его на верх не получилось!Если кто может помогите мне с этими 2умя вопросами(понимаю они далеко не корректные,но я в этих делах пока не силён,надеюсь на вашу помощь) заранее огромное спасибо)!

Почему при добавлении контента нижний отступ пропадает? Ожидаю вот такое поведение http://s1.ipicture.ru/uploads/20130918/7dzP0zRW.png а получаю http://prodpak.ru/site3/ Подскажите пожалуйста, в чем ошибка.

как сделать макет как на изображении ниже: ? Жду ответа.

Подскажите. Я новичок в верстке и только осваиваю шаблоны. В сети нашел такой готовый макет - своего рода скелет для будущего шаблона. http://jsfiddle.net/...tPCz8CJv/66Eh2/ У меня вопрос по поводу footer. Я просмотрел код и меня смущает краткость тех строк, с помощью которых подвал прижимается книзу сайта. Действительно ли такой способ является рабочим? Если так, то он мне нравиться больше, чем "классический", с отрицательным margin-top для footer. Конечно, я его протестировал немного - вроде все работает. Но хотел спросить и уточнить у людей, которые больше меня знают в верстке.

Добрый день! Через три недели защита диплома по фирменному стилю, один из разделов - верстка сайта собственного дизайна. Дизайн-то сделала, но как реализовать некоторые моменты - способностей не хватает. Подскажите, пожалуйста. Нужно, чтобы было вот так. Картинка(-и) "вылетают" за границы блока. Как такое сделать?