響應式設計行爲

Question

這是我第一個響應網站。我對此感到滿意，但是有一個非常令人討厭的方面讓我非常難過。原來的網站是www.elitemarquees.com.au我已經改變了主頁：

http://elitemarquees.com.au/test/index.html

的問題是;當我使瀏覽器變小時，所有移動和行爲都與我想要的一樣，除了菜單（#headNav）之外。它跳轉到主要內容（#content）並位於正文文本的第二行下面。然後，當你變小時，它會糾正其自我並跳回到徽標（＃headLogo）和主體文本之間。這裏是我已初步建立了DIV部分：

//this section contains two divs headLogo and headNav 
#header { 
height: 180px; 
} 
#headLogo { 
width: 250px; 
float: left; 
} 
#headNav { 
width: 600px; 
float: right; 
margin-top: 70px; 
padding-right: 40px 
} 
#content { 
width: 500px; 
float: right; 
padding-right: 140px 
} 

的我這樣做這是我認爲發生的不良行爲：

/* for 700px or less */ 
@media screen and (max-width: 700px) { 

#headNav { 
    width: auto; 
    float: none; 
} 
#headLogo { 
    width: auto; 
    float: none; 
} 
#content { 
    width: auto; 
    float: none; 
} 
#sidebar { 
    width: auto; 
    float: none; 
} 

} 

它整流自身時，這是觸發：

/* for 480px or less */ 
@media screen and (max-width: 480px) { 

#header { 
    height: auto; 
} 
#headNav { 
padding-right: 0px; 
margin-top: 0px; 
} 
h1 { 
    font-size: 24px; 
} 
#content { 
    padding-right: 10px 
} 
} 

感謝您的幫助

Answer 1

這裏

/* for 700px or less */ 
@media screen and (max-width: 700px) { 

#headNav { 
    width: auto; 
    float: none; 
} 
#headLogo { 
    width: auto; 
    float: none; 
} 
#content { 
    width: auto; 
    float: none; 
} 
#sidebar { 
    width: auto; 
    float: none; 
} 

} 

你應該補充一點：

#header{ 
     height: auto; 
    }