2014-09-04 33 views
0

的右側保證金的問題是與攝影網站,我已經因某種原因只是對「聯繫」「生物」頁面創建。只有當屏幕被調整大小時,您才需要縮小直到佈局更改。然後,當您將鼠標懸停在菜單標籤「相冊」上,並且出現下拉菜單時,它會稍微拉動它下面的內容。它還會在右側創建一個保證金,在底部創建一個滾動條。我一直在不斷嘗試調整事物,但仍然無法找到解決方案。 該網站是:懸停下拉菜單下,它帶來含量略有上升,並創建

「生物」 http://www.sairjanephotography.co.uk/bio.html

「聯繫」 http://www.sairjanephotography.co.uk/contact/contact.html

而且我只注意到實際接觸頁面上下拉菜單是很難真正得到到使用鼠標在作爲生物一個不是。 任何幫助讚賞

+0

什麼瀏覽器/操作系統是你在用嗎?我可以不在Chrome Win7上覆制問題 – Moob 2014-09-04 20:39:57

+0

它正在使用的Windows 7,Firefox 31.0。 – Jonnii 2014-09-04 20:57:21

+0

我剛剛在Chrome上試過,它對我來說也有同樣的問題。這是當屏幕縮小直到菜單在頂部水平而不是在側面垂直時。然後當你將鼠標懸停在「專輯」上時。 – Jonnii 2014-09-04 21:05:18

回答

0

你可以溝渠的JavaScript的方法,只是使用CSS。 Something like this會工作;只需將left: 100%應用於右側而不是下面。

編輯:對不起,因爲沒有更早的閱讀問題。你的問題是你已經在你的ul元素上定義了width。上線277,您有:

/*Re-centres the nav menu on phones from tablet*/ 
@media screen and (max-width:37em){ 
    .menu ul{ 
    font-size:4em; 
    width:18em; 

    } 
} 

但是,如果你刪除width: 18em,一切都很好,它出現。

爲了澄清這一點,如果你想獲得一個好的移動設計,你不應該設置固定的寬度。相反,嘗試用小把戲,比如text-align: center(加上display: inline-block,和display: block; margin: 0 auto;

我認爲這個問題的另一部分曾與標題的隱藏的事情。如果你還想要你的頭顯示,你既可以改變其z-index比下拉列表中,你可以使用一個ajacent選擇給主要內容的margin-top當下拉激活任何更高

例如:

.menu.open + main { 
    margin-top 3em; 
} 

/* Add some transitions for show possibly */ 
main { 
    transition: 1s ease margin 
} 
+0

菜單只是CSS。 javascript是用於相冊的。 – Jonnii 2014-09-04 20:55:07

+0

謝謝,這似乎已經解決了這兩個問題。我確信有一個原因是我設定了這個寬度,但我不能爲了我的生活記住爲什麼!不過謝謝你! – Jonnii 2014-09-04 23:11:13

+0

如果這是您的答案,請記住註冊。 – user1429980 2014-09-05 17:53:58