Div에서 겹치는 창 크기 조정

Question

페이지 크기를 조정할 때 탐색 막대 링크와 헤더가 움직이지 않게 할 수 없습니다. 래퍼 div에 모든 것을 넣으려고했지만 작동하지 않는 것 같습니다. 어떤 도움이라도 대단히 감사하겠습니다. http://www.public.asu.edu/~rmtorren/broadway.html

Answer 1

문제는 당신이 탐색이 절대 폭을 링크 제공하고 있다는 것입니다 : 여기

페이지에 대한 링크입니다. 따라서 창이 작아지면 링크가 비례하여 줄어들지 않습니다. 백분율을 사용하거나 media queries을 사용하여 다른 너비를 설정하십시오.

문제를 일으키는 스타일은 다음과 같습니다

는

#navigation ul a:link { 
padding: 5px 5px 15px; 
margin-bottom: 2px; 
display: block; 
width: 100px;   /* CHANGE THIS */ 
text-decoration: none; 
background-color: maroon; 
color: #FFF; 
} 

는 미디어 쿼리의 예는 수 : 화면이 768px 이하로 줄어들 경우

@media(max-width: 768px){ 
    #navigation ul a:link { 
     width: 60px; 
    } 
} 

위의 유일한 60 pixels로의 링크가 변경됩니다