Цвет фона панели навигации не занимает всю ширину

Question

Цвет фона панели навигации не занимает всю ширину

0

Я разработал веб-сайт: http://newyorkfairandlovely.com/ и он отзывчив. Но когда сайт открывается на компьютере, цвет фона панели навигации не отображается на весь экран. Полный размер изображения - 1950px. Когда экран уменьшен до 1024px или меньше, тогда все в порядке. Это код css:

nav { position: absolute; left: 0; background-color: #9362ae; float: left; width: 100%; margin: 0 auto; max-width: 1950px; font-family: "Source Sans Pro", Helvetica, sans-serif; }

Tushar Khatiwada 20 сен. 2013, в 05:09

Источник

Теги:

html

css

website

responsive-design

3 ответа

1

Это должно помочь:

body { margin : 0; padding : 0; }

Тело имеет собственное расстояние от HTML. Различные браузеры имеют разные настройки, но большинство из них имеют некоторое пространство между краями <html> и <body>,
и обычно используя body { margin: __; } body { margin: __; }

Norguard 19 сен. 2013, в 23:41

0

Какова высота/ширина его родительских элементов? Я считаю, что вы могли бы сделать его закрытым на весь экран, если родители все на 100%. Также попробуйте установить margin-right на 0. (Я также заметил, что у вас есть float:left; в вашем css это может быть частью проблемы.

Doge 20 сен. 2013, в 00:09

Ещё вопросы

Travesty3 · Accepted Answer · 2013-09-20T00-36-00.000Z

1

Лучший ответ

Проверьте свои скобки. Правило, которое вы опубликовали, вложенно в это:

@media 
only screen and (max-width: 1224px),
(min-device-width: 1024px) and (max-device-width: 1824px)  {
    /* your rule is here */
}

Поэтому, когда размер экрана увеличился до 1224px, ваши правила больше не применяются.

Это пример того, почему хорошая идея правильно отложить ваш код.

Travesty3 20 сен. 2013, в 00:36

0

просто посмотрел и увидел проблему, вернулся к посту, а ты меня обставил :)
guydog28 20 сен. 2013, в 02:37
0

@ Travesty3: Каково решение тогда? Должен ли я поставить этот код за его пределами?
Tushar Khatiwada 20 сен. 2013, в 02:40
0

@TusharKhatiwada: Похоже, это так. Если размер навигационной панели не зависит от размера экрана, он должен выходить за ее пределы.
Travesty3 20 сен. 2013, в 03:06
0

@ Travesty3: Нет. Без изменений.
Tushar Khatiwada 20 сен. 2013, в 03:12
0

Если вы внесли изменения, которые он предложил, и они не сработали, рассмотрите возможность создания jsfiddle с вашим новым CSS и вашим HTML. После того, как вы вставите туда свой CSS, вы можете нажать кнопку «Tidy Up», и он будет правильно делать отступы для всего вашего CSS, чтобы вы могли увидеть, где у вас могут быть ошибочные вложения. Если вы не можете найти проблему в jsfiddle, отправьте нам ссылку на нее, и мы поможем.
guydog28 20 сен. 2013, в 03:49
0

@ guydog28: вот ссылка: jsfiddle . И кстати, спасибо за предложение по использованию jsfiddle. Это был первый раз, когда я услышал о jsfiddle, и это, кажется, здорово.
Tushar Khatiwada 20 сен. 2013, в 04:12
0

@TusharKhatiwada Спасибо. Я не уверен, что вижу проблему. Я раздвоенный вашей скрипку в этом , и добавил HTML и нажал бежать, и результат выглядел идеально , даже когда я изменил размер результата очень широк.
guydog28 20 сен. 2013, в 04:41
0

@TusharKhatiwada Как примечание, когда я говорю, что это работает, я имею в виду Firefox и Chrome. Ваши отзывчивые MQ, похоже, не влияют на IE.
guydog28 20 сен. 2013, в 05:04
0

@ guydog28: О! да. TQ. Я тоже этого не заметил. Какие-либо предложения??? Просто для любопытства, нужно ли реагировать на IE, так как большинство смартфонов не используют IE?
Tushar Khatiwada 20 сен. 2013, в 05:17
0

@TusharKhatiwada Я имею в виду, лучше всего поддерживать все браузеры. Есть виндовс телефоны и планшеты. Но чтобы сделать ваш CSS лучше, я бы посоветовал просто подумать о различных медиа-запросах, которые вам нужно поддерживать, поместить их на верхний уровень, а затем их стили внутри них, вместо того, чтобы вкладывать мультимедийные запросы в несколько слоев. Это поможет вам понять, что происходит, и исправить ваши проблемы. В любом случае, рад, что его разобрались.
guydog28 20 сен. 2013, в 13:18

Показать ещё 8 комментариев