Search the Community

Здравствуйте. Порылся в интернете и обнаружил что на сегодняшний день эта тема тёмный лес. Всё что я нашёл было устаревшей информацией 2008 - 2012 годов. Где бы и как поискать\почитать информацию о том, как же всётаки верстать макеты для мобильных устройств (смартфонов, планшетов). Там же есть разница, например для планшетов другие размеры нежели чем для мобилы, а ещё есть и вертикальное положение устройства и горизонтальное, устройства различных размеров. В общем буду рад если вы поделитесь всем что у вас есть по этой теме

Сделал 2 колонки на 100% длинны страницы, одна фиксированная, НО! Нужно сделать 2х колоночный макет с длинной во всю страницу, причем правая колонка должна быть фиксированой. Почти получилось, но нужно перенести фиксированую колонку слевой стороны на правую. Под конец дня голова уже не варит. Любые советы, ссылки, намеки, решения подойдут. Заранее спасибо! Код HTML: Код CSS: Скрин:

работа в компании mnogo.ru 14 лет на рынке, компания расширяется ,поэтому нужно дополнительные сотрудники резюме просьба направлять на email irizhuk@lavtech.ru Ведущий верстальщик Обязанности: · Создание и администрирование веб-страниц и продуктов, рассылок · Тестирование созданных страниц и продуктов в разных почтовых программах, браузерах, системных настройках · Корректировка\создание контента для размещения на сайте · Участие в разработке, внедрении и поддержке программного обеспечения · Обеспечение качества и скорости вёрстки при запуске проектов · Наполнение информацией и поддержка контента сайтов компании (новости, анонсы, баннеры и др.) Требования: · Опыт работы от 2-х лет · Высшее образование · Опыт кроссбраузерной верстки · Отличное знание HTML, CSS · Опыт работы и знание Drupal · Умение верстать руками без применения средств визуальной разработки обязательно · Работа в команде, соблюдение сроков разработки, трудовая дисциплина · Педантичность в вёрстке и умение работать в сжатые сроки · Организованность, навыки планирования, ответственность и целеустремленность · Базовые понимания SEO · Базовые знания и умения настройки инструментов аналитики: Яндекс Метрика, Google Analytics Желательно: · Английский язык на уровне чтения профильной технической литературы Условия: · Работа в офисе рядом с м. Ленинский проспект · Уровень зарплаты от 50000р, обсуждается по итогам собеседования. · График работы с 10.00 до 19.00 · Молодой адекватный коллектив · Оформление по ТК РФ Адрес Москва, Ленинский проспект, 29с2 ———————————————————————————————-- Руководитель WEB - отдела Обязанности: · Управление отделом (верстальщики, фронтэнд, контент-менеджеры) · Выстраивание рабочих процессов · Участие в разработке и внедрении новых сервисов и продуктов · Обеспечение качества, современности и скорости вёрстки при запуске проектов · обучение сотрудников Требования: · Опыт работы на руководящих должностях или опыт управления проектами · Высшее образование · Опыт кроссбраузерной верстки · Отличное знание HTML, CSS · Педантичность и умение работать в сжатые сроки · Организованность, навыки планирования, ответственность и целеустремленность · Знание принципов SEO · Умение настройки ЯМ, GA Желательно: · Английский язык на уровне чтения профильной технической литературы Условия: · Работа в офисе рядом с м. Ленинский проспект · Зп от 90 000р, обсуждается по итогам собеседования · График работы с 10.00 до 19.00 · Молодой адекватный коллектив · Оформление по ТК РФ Адрес Москва, Ленинский проспект, 29с2

Доброго времени суток. Задался проблемой соблюдения правил для верстки, не ломающейся при масштабировании в разных браузерах. Хотелось бы качестве результата темы получить что-то вроде набора правил, придерживаясь которых верстка не будет ломаться при масштабировании в последних версиях популярных браузеров. Интересно услышать мнение как экспертов, так и тех кто уже сталкивался с такой проблемой и выработал навык оформления стилей, не дающих ломаться верстке при масштабировании страницы.

В общем, учусь верстать. Итак, проблема вот в чем, я сделал шапку для сайта, но при увеличении страницы(ctrl+scroll мышки), шапка съезжает, она уже не по центру страницы, а по абзацам. Я смотрел на другие сайты и у них шапка остается на месте, как и в общем все, а у меня шапка съезжает, уже не в строчку остается. Плохо объясняю я. В общем, этот код введите, и увеличьте страницу и думаю поймете в чем моя проблема. P.S. чем отличается id от class и как лучше верстать страницы, таблицами или слоями. <!DOCTYPE HTML><html><head><meta charset="utf-8"><title>Заголовок</title><link rel="stylesheet" type="text/css" href="2.css"></head><body><header><div id="" class="center"> <ul> <li><a href="">Главная</a></li> <li><a href="">Список серверов</a></li> <li><a href="">Контакты</a></li> <li><a href="">Бугагашенька</a></li> </ul></div></div></header><footer>Днище сайта</footer></body></html><!--Атрибут "title" делает мини подсказку при наведении на текст--><!--Атрибут "align" выравнивает текст--><!--Тег "br" убирает отступы--><!--Тег "p" новый абзац--><!--Атрибут "src" задает путь к файлу--><!--Тег "hr" создает линии-->*{ margin: 1; padding: 0; outline: none;}.center { text-align: center;} a { background: #404040; text-decoration: none; /* Отменяем подчеркивание у ссылки */ color: #FFF; /* Цвет ссылок */ display: inline-block; /* Блочный элемент */ padding: 20px 50px; /* Поля вокруг текста */ border-right: solid 1px #EDE5F4; transition-property: background; transition-duration: 1s; transition-timing-function: ease; } a:hover { background: #DB073D; } li { color: #FFF; display: inline-block; /* Строчно-блочные элементы */ background: #CA181A; /* Цвет фона */ margin-right: -4px; /* Расстояние между пунктами меню */ padding: 1 5px; } header { display: block; opacity: 1; } body { background: #8EC7D2; } footer { position: relative; text-align: center; font-size: 20px; padding-top: 750px; }

Народ помогите пожалуйста! Суть дела вот в чём. Есть сайт vitalsone.ru. Задумка такова, что "каркас" сайта должен иметь лёгкую тень по бокам. Раз у меня подвал должен прижиматься к низу, соответственно есть блок с контентом и подвалом, обоим я задал тень. Проблема в том, что при уменьшении окна браузера по-высоте, тени пересекаются, а по-бокам накладываются друг-на-друга.....как быть?

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

Добрый день. Уважаемые товарищи, только недавно начал осваивать веб-технологии. На данном этапе нахожусь на стадии изучения HTML и CSS. Попробывал сверстать страницу из PDF, пожалуйста, кому не лень, посмотрите и укажите на мои ошибки, да и в целом кто что может выразить (без учета резины и адаптивности для разных устройств, так как еще в стадии обучения ). Заранее большое спасибо. http://dropmefiles.com/zDURR

Всем привет. Нужно расположить изображение, как на рисунке. Справа внизу. Проблема в том, что контент может быть разной высоты, внутрь меню тоже не засунуть, меню фиксированной высоты. Position: relative создаёт полосу в контенте. Float: left располагает изображение поверх контента слева от меню. Есть идеи? Заранее спасибо.

1. Собственно встал вот такой вопрос. Допустим у вас появляется клиент, который не говорит вам свой бюджет и сам спрашивает сколько будет стоить ваша работа (в нашем случае верстка). Как в таком случае лично вы производите подсчет и оглашение конечной цены работы? Считаете как-то примерно по количеству элементов в макете, или по количеству страниц, или же прикидываете сколько это работа займет часов и просто умножаете на свой доллар/час. 2. Если умножаете на доллар/час, то с чего вы берете эту стоимость? Например у вас имеется 3 года опыта, верстка + js + прочие библиотеки, и в принципе не важно нужен ли в макете клиенту js или нет, ставка у вас всегда одна, или же не одна? По идее вы ведь не будете, имея приличный опыт, верстать страницу за 10 баксов, только потому что она столько и стоит не смотря на то, что любой нуб ее тоже сможет сверстать за те же 10 баксов? 3. Ваше личное мнение - когда верстальщик может поднимать свой доллар/час выше среднерыночного, какие навыки и объем опыта, или размер портфолио по-вашему он должен иметь? (говорим о российском рынке / или украинском, белорусском , но тогда указывайте )

Здравствуйте, уважаемые эксперты! Вот есть код и сайт dollarforukraine.com Подскажите, пожалуйста, как сделать бирюзовую кнопку в виде кнопки которая ниже (маленькая кнопка Donate в рамке) и чтобы она открывалась в новой вкладке. Огромное спасибо заранее! P.s. маленькая кнопка Donate уже была в шаблоне и ссылалась на "Read more"...

Помогите, что не так? Где искать? сайт http://www.terra-dzr.ru/, col-md-5, а проще контент, должен встать посередине, но никак....(

Добрый день уважаемые форумчане. Помогите пожалуйста мне сверстать очень маленький код на html5. Буду очень благодарен. Ширина должна быть фиксированной - 1000px (ну это я смогу изменить самостоятельно ); Сама проблема состоит в том, чтобы высота sidebar зависела от высоты блока content (в котором собственно и будет располагаться контент) Сам попробовал - не получается, текст почему-то отображается под sidebar Воспользовался генератором, он генерирует говнокод какой-то. Помогите пожалуйста, буду очень благодарен.

Здравствуйте! Возникла небольшая проблема с вёрсткой. Есть html: <div class="best"> <div class="slider"> <img src="img/food.png"> </div> </div> Есть css: .slider:active > img { background-image: url("../img/block.png") } Моя цель, чтобы на картинку, которая из html загружался сферху фон из css (block.png) по клику. Но выходит так, что фон (block.png) загружается за картинкой из html (food.png) и ощущение, что ничего не происходит.

Столкнулся с проблемой во время самообучения, в мануалах описываются различные способы позиционирования элементов на странице. Но как правильно и оптимально это делать непонятно. При создании шаблона jsbin.com/rezukela/4/edit подсознательно понимаю, что делаю неправильно, но как по другому не знаю. Прошу если можно, исправить код, либо переписать, либо сказать основные ошибки которые я допускаю. P.S. Так же хотелось бы понять, как доработать сайт под любое разрешение и изменение масштаба.

Всем привет , как вы догадались я рукожопый новичек. Обычно я всегда сначала убьую пару часов на решение проблемы своими силами, чаще всего мне этого времени хватает и у меня все получается, но в этот раз вышло совсем не так. В общем решил я склепать что то типа макета отправленного сообщения, чисто div с названиями , сначала я столкнулся с тем что при изменении масштаба моя верстка разваливается как карточный домик, перепробовав тыщу способов я избавился от border и оставил все сзаливкой что бы понимать где что как. Далее когда я уже все вместе более ли менее собрал решил я проверить как будет выглядеть текст, вставил где что надо и бац, у меня из за текста покосился весь шаблон, взде появились какие то отсупы которые я пытался убрать, текст высото в 9пикселей никак не хотел лезть в див размером 12 , он все время сползал вниз, не спасло даже выравнение текста по середине Вот style.css div.comment{ width: 300px; border-style: groove; height: 121px; border-width: 1px; } div.comment-head{ width: 300px; background: #ff1111; height: 13px; position:relative; padding-bottom: 4px; text-align: center; border: 1px #000; } div.comment-right{ width: 240px; background: #ffffff; height: 108px; float:left; } div.comment-left{ width: 60px; background: #111111; height: 108px; float:left; } div.comment-photo{ width: 50px; background: #1111ff; height: 50px; margin-top: 5px; margin-left: 5px; } div.comment-name{ width: 100px; margin-top: 0.5px; background: #11ff11; height: 9px; margin-left: 60px; float:left; } div.comment-number{ width: 40px; margin-left: 10px; background: #11ff61; height: 8px; margin-top: 10px; float:left; text-align: center; }А это сам код <html> <head> <title>test</title> <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon"><!-- картинка в вкладке --> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /><!-- кодировка --> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="comment"> <div class="comment-head"> <p style=" line-height: 0.00001;">ДЕнис Роллов</p> </div> <div class="comment-left"> <div class="comment-photo"></div> <div class="comment-number"><p style=" font-size:3px;">15:12</p></div> <div class="comment-number"><p style=" font-size:3px;">03.12.2012</p></div> </div> <div class="comment-right"><p>Здесь будет комментарий о нашем сайте.Здесь будет комментарий о нашем сайте.Здесь будет комментарий о нашем сайте.Здесь будет комментарий о нашем сайте.Здесь будет комментарий о нашем сайте.Здесь будет комментарий о нашем сайте.</p></div> </div></body></html>Я знаю что все написано ужасно криво и вообще не по правилам, но это мой первый проэкт, так что прошу помочь

Здравствуйте, столкнулся с такой задачей: до наведения курсора http://joxi.ru/wYSTU_3JTJA9Y33ZX5U после наведения курсора http://joxi.ru/-4OTU_3JTJA1Y21ipcQ не могу придумать как это реализовать. а именно чтобы была внутри граница прозрачная и при этом поддерживал ie8.

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

Привет всем! У меня очередная проблема. Сразу хочу сказать, что я не профи, но в html и css разбираюсь. Однако суть в следующем. Мне нужно создать макет, как показано на картинке. Но у меня выходит просто какая-то ерунда. Эту ерунду можно посмотреть по этой ссылке http://testshop.mcdir.ru/. Не могу понять, что я делаю не так. Header уменя весь расползается. Помогите решить эту задачу. Вполне возможно (а я почему-то в этом уверен), что проблема с позиционированием. Исходный код прилагаю. index.html: <!DOCTYPE html><html><head><title>interior</title><link href="style.css" rel="stylesheet" /><meta charset="utf-8" /></head><body><header><img src="images/slide1.jpg" width="1920" height="515" /><div class="length"><div class="logo"><h1>Interior</h1><h2>A wide<br /> selection<br /> of fine<br /> furniture!</h2></div><!--<nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><ul><li><a href="#">Living rooms</a></li><li><a href="#">Bedrooms</a></li><ul><li><a href="#">Loremipsum</a></li><li><a href="#">Dolorsed</a></li><li><a href="#">Aditorias</a></li></ul><li><a href="#">Kitchens</a></li></ul><li><a href="#">Blog</a></li><li><a href="#">Gallery</a></li><li><a href="#">Contacts</a></li></ul></nav>--></div></header></body></html>css: * {margin: 0;padding: 0;}body {width: 1920px;}p {font: italic 13px "Droid Serif";color: #737373;}a {font: italic 13px "Droid Serif";color: #ff4343;text-decoration: none;}h1 {font: bold 18px "Lato Black";color: #000;}/*header*/header {width: 100%;margin: 0;}header .length {width: 100%;height: 75px;background: #000;opacity: .5;position: relative;}header .length .logo {position: absolute;top: 0;left: 0;}header .length .logo h1 {font: normal 30px "Lato Black";color: #fff;text-transform: uppercase;position: absolute;top: 28px;left: 489px;}header .length .logo h2 {font: normal 48px "Lato Black";color: #fff;line-height: .95;text-transform: uppercase;position: absolute;top: 270px;left: 489px;}/*end header*/Заранее всем огромное спасибо!

Скажите пожалуйста как лучше сверстать ? http://itmages.ru/image/view/1690784/f7f0f63c Таблицей или дивами ?

Для справки: я первые шаги делаю... В общем делаю сайт... Простой, банальщина... Но не суть... Сам сайт http://powerkaz.kz/ Вот http://powerkaz.kz/catalog.html на этой странице... Есть мнооого ссылок. С "тюнингом"... При нажатии должно выходить модальное окно (он выходит)... А ссылок много т.е. содержимое каждого окна разное... Вооот... Вообще когда я нашел этот пример модального окна в инете там писалось, что он будет подгружаемым как бы... Так и было... НО У МЕНЯ БЛИН СОВСЕМ НЕ ТАК ВЫШЛО. Не могу понять что не так... А ресурс где я нашел этот скрипт, - потерял... придется теперь разбираться (наверное к лучшему)... ХЕЛПАНИТЕ ))) Содержимое модального окна я залил страницами в один каталог datalist кажись назвал... Ну так вот при нажатии на ссылку должен грузится файл который указан... P.S. для интереса попробуйте обновлять страницу и нажимать на другие последующие ссылки... Кстати, там один портак, не обращайте внимание, это я как то со злости дублировал контейнер... Пока рука не доходит... Да и доступа нет...

Я - начинающий верстальщик, принимаю заказы на верстку сайтов и лендингов. Верстаю кроссбраузерно (IE8+), валидно (в разумных пределах, конечно), адаптивность, умею JavaScript + jQuery (не профи, но на базовом уровне), Bootstrap 3, натягиваю на Wordpress. Космических скоростей выполнения не гарантирую (по понятным причинам). Зато буду брать пунктуальностью и внимательностью к деталям. Контакты: Skype: zenwarr E-mail: zenw@yandex.ru ICQ (для ретроградов): 437999463

Понравился сайт на HTML5 и решил в нем покопаться, но т.к учусь верстать недавно, сайт вызвал восторг, но у меня не получается следующее. — на слайд шоу надпись "BRUSHED", не могу найти где её изменить — не могу настроить контактную форму _______ Если кому не трудно помогите, два дня уже копаюсь. Так же прикладываю архив с сайтом. http://yadi.sk/d/Rjz34RsmPFVVv

Всем привет! У меня такая проблема: не могу отформатировать горизонтальное меню. Пример можете посмотреть здесь http://testshop.mcdir.ru/ Скачал его на rudebox но у меня оно почему то не работает. помогите, плиз!!!

Всем добрый день! Получила первый заказ на коммерческую верстку и вот что у меня получилось http://www.kenguru-taxi.com.ua/ Заказчик верстку принял, но хочу услышать конструктивную критику. Все страницы сайта верстала сама, js и jQuery для слайдера, заказа звонка и страницы вакансии делала сама.