Как сохранить текст за рисунком

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

Maximized View

Вот как это выглядит, когда окно браузера становится меньше:

Smalller Screen Example

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

Любые идеи? Сайт Inhishands.com

Спасибо!

источник

2014-01-31 user3258145

Можете ли вы предоставить нам некоторый код? или jsfiddle? Мы не можем помочь вам без какого-либо кода. –

измените z-индекс строки меню на большее число, чем изображение. – Zeeba

Вы можете стать умнее, если вам достаточно удобно, и у вас есть CSS, используя тип/размер видового экрана, чтобы определить, чтобы показать полное меню или свернутую версию, которая падает, а не перемещается вправо. Я могу дать больше информации об этом, если вам нужно – Askanison4

Ваша проблема заключается в том, что в меню (<ul id="display">) есть свойство CSS float:right, поэтому оно всегда будет располагаться относительно правой части экрана. Когда экран становится меньше, правая сторона движется ближе к левому, поэтому меню также перемещается влево (и перекрывает логотип).

Если вы хотите, чтобы меню всегда начиналось с правой стороны логотипа (а не накладывалось на него), вы могли бы дать ему свойство float:left и добавить маржу в ее левую сторону (например, margin-left:370px) , Существуют и другие способы позиционирования (например, использование абсолютного позиционирования), но это выполнит свою работу.

источник

2014-01-31 17:03:43 ASGM

Если его проблема заключается в разбиении элементов, я думаю, что более вероятно, что это проблема с z-индексом. Особенно, если страница должна масштабироваться - может потребоваться плавающее право. – Askanison4

OP сказал, что когда страница сделана меньше, они хотят, чтобы меню «двигалось и расширялось вправо», что подразумевает, что они хотят, чтобы он оставался справа от логотипа, а не перекрывал его. Я думаю, что это проблема позиционирования, а не проблема z-index (хотя я согласен, что название сообщения подразумевает противоположное). – ASGM

ОК, это немного сбивает с толку все в порядке lol ... отредактируйте свой пост немного, и я сниму нижний план. – Askanison4

Используйте Z-указатель в навигации. В CSS установите z-индекс изображения рук ниже, чем у вашей навигации, и вы увидите навигацию сверху, а не сзади.

Вот некоторая информация о Z-Index в случае, если это необходимо: http://www.w3schools.com/cssref/pr_pos_z-index.asp

источник

2014-01-31 17:04:21 Askanison4

приятный дизайн.

Прежде всего, вам необходимо исправить минимальную ширину верхнего меню HEADER в вашем CSS. Закрепить заголовок мин-ширина в соответствии с решением вам нужно:

#Header{ 
min-width: 1237px; 
}

или непосредственно в HTML

<div id="Header" style="min-width: 1237px">

источник

2014-01-31 17:11:31 Kursion

Как сохранить текст за рисунком

ответ

Смежные вопросы