Блог

У меня есть меню навигации, которое конфликтует с угловым баннером (изображением). Однако он перекрывает меню навигации.

Вот как это выглядит в разрешении, превышающем 1024×768:

И вот как это выглядит в браузере с разрешением 1024×768 (или меньше):

Вот мой код (для углового баннера и меню навигации):

 #cornerbanner {
    background: url("../images/corner_banner.png") no-repeat;
    display: block;
    height: 117px;
    width: 117px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    text-decoration: none;
    margin-top: -1px;
    clear: both;
}

ul#navigation {
    float: right;
    display: inline;
    margin-top: -28px;
}

ul#navigation li {
    list-style:none;
    display: inline;
    margin-left: 80px;
    text-transform: uppercase;
}

ul#navigation li a {
    color: #4C4C4C;
    font-size: 13px;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 1px 1px 1px #fff;
}

ul#navigation li.active {
    border-bottom: 2px solid #C63E24;
    padding-bottom: 3px;
} 
  

Как вы хотите, чтобы он выглядел в разрешениях меньше 1024? Вы хотите, чтобы li изменяли размер себя меньше? Или появится горизонтальная полоса прокрутки?

Мое предложение состояло бы в том, чтобы рассмотреть дизайн фиксированной ширины в сочетании с сеточной системой, такой как:

• Скелет
• 960gs

Редактировать

Если вы хотите, чтобы они были рядом, вы можете либо:

• Плавающий #cornerbanner вместо абсолютной позиции
• Поместите поле справа: 117 пикселей на ul #navigation

Оба из них требуют, чтобы родительский элемент, содержащий их, был достаточно широким, чтобы вместить их оба.