Наиболее распространенная ошибка, встречающаяся на дневниках с абсолютно отпозицированным меню - это
а) Скачущие и уплывающие при смене разрешения экрана ссылки. Особенно сильно это заметно в том случае, если пользователь накладывает навигационную панель на фоновое изображение.
В чем проблема?
В том, что большинство позиционирует меню попиксельно сверху и сбоку. Совершенно логично, что при смене разрешения экрана ссылки будут также попиксельно позиционироваться, а блок записей и фоновое изображение будут оставаться в центре страницы.
И что же теперь делать?
Итак, чтобы элемент оставался на нужном месте, мы будем позиционировать его динамически.
#элемент {position:absolute; top:отступ1px; left:50%; margin-left:-отступ2px ;}
По полочкам:
Отступ 1 - это отступ от верхнего края экрана. Его указываем в пикселях, как и привыкли.
Слева или справа мы позиционируем элемент на 50% - т.е., загоняем его в центр.
Отступ 3 позволяет подвинуть элемент попиксельно от центра, а не от края экрана. Он должен быть указан в отрицательном значении. То есть, если вы отпозиционировали меню по левому краю, двигать его будете при помощи margin-left в отрицательном значении. Если по правому, то, соответственно, при помощи margin-right.
б) Вторая ошибка - это позиционирование всех ссылок меню по отдельности. При этом получается, что само меню (#side) остается висеть голеньким в теле дневника. Иногда от него остаются рамки и фон, иногда не остается ничего, но сам элемент находится не на своем месте.
Что делать?
Позиционируйте сначала все меню в эпиграф, а уже затем работайте с отдельными блоками меню.
То бишь, нам нужен код:
#side div.bordered {position:absolute; top:отступ1px; left:50%; margin-left:-отступ3px ;}
Блоков, к слову сказать, намного меньше, чем ссылок, и код получится куда проще, если работать с блоками, а не с каждой ссылкой по отдельности.
а) Скачущие и уплывающие при смене разрешения экрана ссылки. Особенно сильно это заметно в том случае, если пользователь накладывает навигационную панель на фоновое изображение.
В чем проблема?
В том, что большинство позиционирует меню попиксельно сверху и сбоку. Совершенно логично, что при смене разрешения экрана ссылки будут также попиксельно позиционироваться, а блок записей и фоновое изображение будут оставаться в центре страницы.
И что же теперь делать?
Итак, чтобы элемент оставался на нужном месте, мы будем позиционировать его динамически.
#элемент {position:absolute; top:отступ1px; left:50%; margin-left:-отступ2px ;}
По полочкам:
Отступ 1 - это отступ от верхнего края экрана. Его указываем в пикселях, как и привыкли.
Слева или справа мы позиционируем элемент на 50% - т.е., загоняем его в центр.
Отступ 3 позволяет подвинуть элемент попиксельно от центра, а не от края экрана. Он должен быть указан в отрицательном значении. То есть, если вы отпозиционировали меню по левому краю, двигать его будете при помощи margin-left в отрицательном значении. Если по правому, то, соответственно, при помощи margin-right.
б) Вторая ошибка - это позиционирование всех ссылок меню по отдельности. При этом получается, что само меню (#side) остается висеть голеньким в теле дневника. Иногда от него остаются рамки и фон, иногда не остается ничего, но сам элемент находится не на своем месте.
Что делать?
Позиционируйте сначала все меню в эпиграф, а уже затем работайте с отдельными блоками меню.
То бишь, нам нужен код:
#side div.bordered {position:absolute; top:отступ1px; left:50%; margin-left:-отступ3px ;}
Блоков, к слову сказать, намного меньше, чем ссылок, и код получится куда проще, если работать с блоками, а не с каждой ссылкой по отдельности.
-
-
05.05.2009 в 21:55-
-
05.05.2009 в 22:44Так бы вынести это в эпиграф, чтобы вопросы не множились...
-
-
18.11.2009 в 14:09Вашпе!