Svetlana_P

Проблемы две: с сеткой и слайдер не настроен, поэтому при уменьшении ширины окна справа вылезает лишний отступ. Вы хотите, чтобы сайт имел минимальную ширину 1000px? Или будете дальше делать адаптивным? Если оставляете 1000px, то достаточно прописать для page_wrapper минимальную ширину 1000px и довести до ума слайдер. Сейчас там просто картинка slider.png аж 1248px шириной. Вот она и растягивает общий контейнер. Так выглядит стр. с min-width: 1000px и запретом слайдеру растягивать страницу http://benedetta.ru/project25/Test Frikker2.html Или если полностью адаптивным сайт делать, то здесь вместе с max-width нужно задать правила и для остальных блоков, в том числе через медиа запросы. Тут уже дело не в фоне. PS Кстати, для чего Вы сверстали колонку #page-wrapper через flexbox? В чем преимущества?

Ссылка открылась, вижу. Поясните детальней, что в итоге нужно? Чтобы получилось как на картинке из первого сообщения? Потому что сейчас серый фон шапки и меню растягивается на всю ширину, я не вижу проблемы.

Хорошо бы посмотреть остальной код. Что происходит вокруг и внутри хедера?

Вот так? https://jsfiddle.net/fhuj82tv/2/

Например, так https://www.bootply.com/FIwR95T6nK . Через before. Тогда и с адаптивностью нормально будет, если докрутить. Для телефона вообще можно убрать фотку. Но всё зависит от вашего шаблона для меньших экранов. Так https://www.bootply.com/GQbzZa143t без before, но с адаптивностью плохо. Наверняка еще можно что-то придумать. Смотря какой уже есть код на странице.

Обернуть сетку еще одним контейнером, который будет на всю ширину и с заданным фоном. Почему так не хотите?

Так можно https://jsfiddle.net/ubukmekf/2/ ? Извиняюсь, что влезаю без хорошего знания JS, но любопытно самой)

Здравствуйте! Меня напрягает общее настроение на странице... Не в обиду будет сказано, но впечатление, что мной хотят сманипулировать (например, очень много перечеркнутых "старых" цен, формулировка "90 дней бесплатная техподдержка", хотя по сути техподдержка просто входит в пакет и т.п.) По остальному 1. Меню "гамбургер" даже на большом экране вместо обычного, развернутого... Это неудобно. 2. Круглая рамка вокруг некоторых иконок неровная, "ступенчатая", надо ее сделать ровной. 3. Эти же иконки крутятся при наведении, на мой взгляд, напрасно) 4. В блоке выполненных работ нельзя посмотреть детали проекта. Вроде есть скриншоты, но никаких ссылок и подробностей. Поэтому мало доверия. 5. В блоке "перезвоним за 28 секунд" в поле ввода стоит код города +44 и чужой флаг, неудобно и неопрятно. 6. Тексты надо оттипографить, везде висят предлоги в конце строк. 7. Иконки в блоке "КАК МЫ ДЕЛАЕМ НАШИ LANDING PAGE" не вписываются в общий дизайн. 8. В этом же блоки есть пункты в списке, у которых аж два маркера. 9. Две кнопки "получить консультацию" и "хочу заказать сайт" напрягают: ведь даже если хочу заказать, сначала нужно поговорить. Может, одной достаточно. Но может у Вас есть причины делать две кнопки, не знаю) 10. В текстах много стоп-слов и слишком заманчивых формулировок. Возможно, стоит переписать в инфостиле. 11. Насчет цветов и шрифтов. Я люблю тексты более одного предложения читать в виде: темный текст на светлом фоне. И лаконичный шрифт. Но это субъективно) 12. На первом экране заголовки и подзаголовки спорят друг с другом. не знаешь куда сначала смотреть. Есть еще мелочи, чтобы придраться, но написала основное

Как сделать прямо, как Вы описали — не могу сказать. Возможно, потому что всё это описывают в CSS свойствах, и в таких изощрениях нет нужды. Через атрибуты тега стили, типа bgcolor, сейчас не задают. Но понимаю, что для практики хотите разобраться. Поэтому предлагаю прошерстить свойства тегов table, tr, td, какие бывают. На htmlbook.ru, например, можно найти http://htmlbook.ru/samhtml/tablitsy и другие страницы. Сразу узнаете, что поместить таблицу по центру можно свойством align="center". Убрать отступы между границами ячеек cellspacing="0". Повторите, как правильно объединять ячейки. Потому как я вижу, что у вас справа колбаса из лишних ячеек. Тут http://htmlbook.ru/samhtml/tablitsy/obedinenie-yacheek разбирается эта ошибка. Если бы мне дали такое задание, я бы использовала вложенные таблицы. Потому что нельзя для строки или ячейки без помощи CSS задать свой вид границы. Только для всей таблицы сразу.

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

Уточните, Вы CSS на курсе не проходили, и таблицу нужно сделать только на HTML? Какие темы прошли на двух уроках? И покажите задание, сформулированное на курсах в том виде, как Вы его получили.

Какой-то JS код мешает, потому что с отключенной jQuery библиотекой проблема исчезает. Вам нужна помощь того, кто в этом разбирается.

Больше шансов, что помогут, если выложите код, который у Вас уже получился. Например, тут https://codepen.io/pen/ Покажите людям ссылку. И спросите уже по конкретным моментам, что не получаются, показав, как пытались решить вопрос.

Ну вот не поддается стилизации option, и всё. Та же история с радио-кнопками и чекбоксами. Не знаю, надо спросить разработчиков браузеров, почему так. Поэтому либо плагин нужно использовать для стилизации подобных элементов форм, либо имитировать их другой разметкой, забив на "родную" и более правильную семантически. Но я сложные формы не верстала года два. Может, за это время что-то изменилось.

Мила, попробуйте просто вставить код, который ниже. Разметка HTML и свойства CSS должны быть такими. Ранее Вы добавляли либо только разметку, либо свойства, но в этом нет смысла. Должно быть и то, и другое. Попробуйте. Если не будет работать, я посмотрю, что не так. <style> input[type="checkbox"] { position: absolute; left: -999em; } label { display: block; margin: 1em 0; text-decoration: underline; cursor: pointer; color: blue; } #hidden { max-height:0; overflow: hidden; } #cb:checked~#hidden { max-height:100%; } #cb:checked~#hidden { max-height:100%; } </style> <p>Женщина всегда стремится быть красивой. Женщина счастлива, когда она нравится. Женщина может быть красивой не зависимо от возраста. Можно вспомнить фильм «Москва слезам не верит». В нем главная героиня сказала: «Жизнь после сорока только начинается».</p> <p>Женщина, если она настоящая женщина, — хочет быть красивой и нравиться всегда, везде, и всем.</p> <input id="cb" type="checkbox"> <label for="cb"> Подробнее </label> <div id="hidden"> <p>Однако, многие женщины относятся с предубеждением к декоративной косметике. Одни, не зная всех тонкостей нанесения косметики и не стремясь их изучить, в лучшем случае ограничиваются губной помадой и пудрой. Другие доказывают, что у них нет на всю эту ерунду времени. Есть также дамы, которые впадают в другую крайность: они раскрашивают себе лицо, не считаясь ни с правилами макияжа, ни с собственной внешностью.</p>... <p>Любое женское лицо, в той или иной мере, нуждается в косметике. Чем тщательнее, тоньше и естественнее наложен макияж, тем больше эффект. Умелый мягкий грим подчеркивает естественную красоту лица и помогает скрыть его дефекты. Иногда нескольких штрихов помогают сделать лицо привлекательным, а малейшая ошибка может все испортить. Для этого, надо знать, что и как делать и чего делать нельзя. По этому поводу психотерапевт Диля Еникеева, говорит «Косметика за двадцать минут сделает вас красивой. Но чтобы красота выглядела естественной, вам потребуется не менее двух часов». Если женщина усвоила правила нанесения декоративной косметики, она не допустит ошибок.</p> </div>

Я бы прописала для селекта через медиа запрос width: 100% вместо max-width: 100% для малой ширины окна. И все, форма нормальная становится. Другое дело, в раскрывающемся списке сами пункты полностью не помещаются на экран. Но, насколько я понимаю, тут без JS ничего не поделаешь. PS не претендую на самое правильное решение

http://imbim.ru/css/site.css эту ссылку не нужно ставить. Пока забудем про это. Попробуем по-другому. В HTML коде на той же странице добавьте тег style со стилями. Вот так: <style> input[type="checkbox"] { position: absolute; left: -999em; } label { display: block; margin: 1em 0; text-decoration: underline; cursor: pointer; color: blue; } #hidden { max-height:0; overflow: hidden; } #cb:checked~#hidden { max-height:100%; } #cb:checked~#hidden { max-height:100%; } </style> Чтобы стилизация кнопки "Подробнее" заработала. И отпишитесь тут.

На мой взгляд, оптимальнее всего добавить в конец файла http://imbim.ru/css/site.css . Тогда Вы сможете применять такую конструкцию для скрытого блока на других страницах тоже. Если не знаете, как добраться до файла, опишите подробней, как редактируете сайт и какая CMS стоит (если стоит). Вообще, про способы добавления стилей на страницу можно почитать здесь http://htmlbook.ru/samcss/sposoby-dobavleniya-stiley-na-stranitsu

Спасибо, но у меня нет сайта. Написала просто интереса ради

Я посмотрела страницу http://imbim.ru/Визаж-и-макияж/ Вижу, Вы перенесли разметку HTML. Но код CSS тоже нужно перенести к себе на сайт. Вы умеете это делать?

Можно на CSS через хак с чекбоксом. Пример разметки https://jsfiddle.net/2cg5y6xg/

Теперь понятно, но тогда как используют экспорт в svg из растрового файла? Получается, в этом нет смысла?

Какой путь к папке, которую показываете на скриншоте? Это же не корень, а папка с шаблонами. Но на скрине не виден путь к ней. Сейчас браузер пытается вытащить картинку из корня. Поправьте адрес, указав путь к папке.

Прикрепляю svg со своего экспорта, если пригодится. Хотя не понятно, зачем Вас так попросили. Может стоит объяснить заказчику/руководителю, что так не стоит делать pic.svg

О как, не знала. Пошла читать про все это подробней) Mary, насчет экспорта, может баг какой в более старом Фотошопе. У меня при настройках по умолчанию без проблем сохранил. А вообще согласна с Wwt, что просто для изменения размера фото здесь нет смысла svg делать. Можете показать конкретную задачу, тут Вам посоветуют более оптимальный способ.