Я борюсь с двумя непослушными элементами - навигационным меню и фоновой панелью (отдельно для решения проблемы непрозрачности). Их позиции фиксированы, поэтому они остаются видимыми во время свитка. Их ширина, которая должна имитировать их родительскую, установлена на 100%. К сожалению, когда окно растянуто достаточно узко, их ширина распространяется за пределы родителя.
Это диаграмма html:
<html>
<body>
<content>
<nav-bar>
<nav-menu>
...
</content>
</body>
</html>
Показ должен быть проще, чем описывать, поэтому здесь ссылка на страницу: http://www.seanoneill.us/test/index.html
Когда браузер растягивается за максимальную ширину контента, все выглядит отлично. Когда браузер становится узким, правый конец навигационной панели и nav -menu выходит за пределы ширины содержимого. В других суслах правый край "Контакт" должен быть вставлен с правого края содержимого div на 20 пикселей отложения. Лучший способ увидеть это - прокрутить вниз большой, чтобы меню отображало изображение, а полупрозрачная навигационная панель видна. Затем растяните браузер до максимальной ширины содержимого и покачивайте его назад и вперед по этому пороговому значению.
Может ли кто-нибудь сказать мне, как сохранить навигационную панель и -menu внутри содержимого div?
Я удержал листинг какой-либо из css здесь, поскольку есть несколько задействованных элементов, и я понятия не имею, что является критическим. Я надеюсь, что это приемлемо только для публикации ссылки.
Спасибо за прочтение.
У вас есть content { min-width:700px }
, и ваш nav
плавает вправо, он останется там.
Если вы можете удалить min-width
она исправит себя, или вы можете переместить .nav-manu
вне контейнера .content
и, если вы не завернете его чем-то другим, у которого есть min-width
, он будет соблюдать ширину тела/окна
li
с% или использовать медиа-запросы, чтобы предотвратить их переход на другую строку, когда экран становится таким узким.