Приемлемые отрицательные края?

Я создал веб-сайт, используя Скелетный шаблон так, чтобы это было отзывчиво и доступно мобильным пользователям, у всех страниц кроме страницы контакта есть полное фоновое изображение ширины , но не набор как фоновое изображение это - тег img , и я дал содержание, которое накладывает его отрицательный край .

Причины этого:

  1. мне нужен он, чтобы быть полной шириной и содержанием; у Скелетного шаблона есть левые и правые края так, чтобы остановил меня устанавливающий фоновое изображение на содержании.
  2. мне также нужно изображение, содержащее отделение, чтобы всегда быть полной высотой изображения, но высота изображения не размер набора, это отвечает на ширину браузера и поддерживает ее форматное соотношение.
  3. изображение содержится в другом отделении, у которого есть прозрачный плиточный фон, который накладывает изображение с диагональными строками развертки, это необходимо для дизайна, и я не хочу использовать многократные фоновые изображения CSS3 просто все же, потому что я хочу поддержать некоторые более старые браузеры.
  4. я хотел бы, чтобы изображение было больше, чем необходимый (я понимаю прямо сейчас, что это немного слишком большое) так, чтобы это было приемлемое качество даже на более крупных мониторах резолюции.

Now I'd rather not use negative margins, I know they are valid code but I've had problems width them in the past and was wondering is there any other way of achieving the same result without them?

Я попытался использовать абсолютное расположение на img второстепенный элемент, и Firefox по некоторой неизвестной причине добавляет большой пустой кусок пространства в начале документа, снижающего целую страницу, возможно, 200 пкс.

Веб-сайт - www.f3racing.co.uk

0
nl ja de
У вас есть стили для вашей абсолютной попытки положения? Если вы не обеспокоены об изображении, завивающемся вас, мог бы попробовать положение, зафиксированное более низким z-индексом
добавлено автор Pete, источник
Я всегда нахожу глупые ошибки, где край затрагивает другие элементы также, в этом случае я обертываю его в другое отделение и дополнение использования на родительском отделении вместо края
добавлено автор Pete, источник
Не уверенный, если я понял правильно, но вы могли бы просто сделать отделение с набором фонового изображения (или просто другой тег изображения) тогда абсолютно помещают его в вершину и оставленный и дают ему z-индекс ниже, чем остальная часть содержания.
добавлено автор Andy, источник
Я wouldn' t говорят, что это - причина не использовать это решение, это кажется лучшим способом сделать это. Поиск неисправностей той проблемы, вероятно, лучше, чем попытка получить работу, sub решение для паритета
добавлено автор Andy, источник
Я haven' t сталкиваются с проблемой так я can' t говорят наверняка, но FireFox обычно ведет себя относительно хорошо, и это может быть ошибка в вашем коде, для которого нужны фиксация или улучшение, вместо того, чтобы использовать кишащее клопами хакерское проникновение.
добавлено автор Andy, источник
Спасибо @Andy за ответ, я как раз собирался отредактировать свой вопрос добавить, что я попробовал это, но по некоторым причинам в Firefox с этим методом я получаю крупное пустое место в начале документа, I' ve отправил на нескольких форумах Firefox, спрашивающих, почему это просто еще не всего лишь никакая твердость.
добавлено автор number8pie, источник
Вы могли бы быть правы, что это может быть единственным выбором I' m столкновение с, если я don' t хотят использовать отрицательные края. Но причина I' m колеблющееся использование это - потому что мне кажется, что будет подобная техника (как в действительном, но не хорошем чистом коде это isn' t осужденный) к отрицательным краям раньше заставлял его работать в Firefox.
добавлено автор number8pie, источник
@Pete я думаю, что должно быть достаточно легко сделать в Поджигателе в изменении Firefox ".newsbanner img {положение: родственник;}" к "позиции: абсолютный" и ".hentry:first-ребенок {вершина края:-450px;}" к "{вершина края: 200 пкс;}". Набор края на .hentry:firstchild выдвигал не только себя ниже на 200 пкс, но и все остальное слишком по некоторым причинам. Мне действительно нужно изображение, чтобы завиться, спасибо за ответ все же.
добавлено автор number8pie, источник
Превосходная идея @Pete, я просто дал ему движение и есть все еще некоторое пустое место в начале документа, я, может казаться, не вижу, почему, ни у каких других элементов, кажется, нет верхнего поля, которое затронуло бы это. Другая странная вещь, которую я заметил, состоит в том, что ".container .column, .container .columns" пущен в ход оставленный и если я удаляю это плавание, пространство исчезает, но плавание - часть шаблона так что-то мы can' t действительно изменяются. Просто мысль I' d упоминают его в случае, если это зажгло идею с кем-то.
добавлено автор number8pie, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)