轉角橫幅與導航菜單衝突

我有一個與轉角橫幅（圖像）衝突的導航菜單。但是，它與導航菜單重疊。轉角橫幅與導航菜單衝突

這裏是什麼樣子的分辨率低於1024x768更大：

這裏就是它看起來像在瀏覽器中使用的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; 
}

來源

2011-10-06 Spencer

說真的，當窗口對於兩個對象都不夠寬時，您會發生什麼？這是一篇寫得不好的文章......你並沒有真正提出問題或陳述期望的輸出應該是什麼。 – Sparky

你怎麼樣想要它看起來在分辨率小於1024？你想讓李自己調小自己嗎？或者出現水平滾動條？

我的建議是考慮一個固定的寬度設計，網格系統等組合：

編輯

如果你希望他們邊一方面，您可以：

浮法#cornerbanner，而不是把保證金右絕對
位置：117px在UL＃導航

這些都需要包含它們的父的寬度足以容納他們。

來源

2011-10-06 01:31:43

我不希望li被推到角落的橫幅下，而是推到左邊，以便在較小的分辨率下仍然可見。 – Spencer

您可以在導航上浮動或放置餘量。請參閱上面我讚揚的答案。 –

您的浮動＃cornerbanner工作的建議。謝謝！ – Spencer

轉角橫幅與導航菜單衝突

回答

相關問題