2011-10-06 4 views
1

네비게이션 메뉴가 모서리 배너 (이미지)와 충돌합니다. 그러나 탐색 메뉴와 겹칩니다.네비게이션 메뉴와 모서리 배너가 충돌합니다

http://i56.tinypic.com/fkmqn9.png

를 그리고 여기가 1024 (이하)의 해상도와 브라우저에서 어떻게 표시되는지를 보여줍니다 :

http://i51.tinypic.com/1z4abo7.png

다음

은 1024보다 큰 해상도의 모습입니다

내 코드는 다음과 같습니다 (모퉁이 배너 및 탐색 메뉴 용) :

#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; 
} 
+2

창이 두 객체 모두에 대해 충분히 넓지 않으면 무엇을 기대합니까? 이것은 잘못 작성된 게시물입니다 ... 당신은 정말로 질문이나 상태가 원하는 출력을해야하지 않습니다. – Sparky

답변

1

당신은 어떻게 1024보다 작은 해상도로보고 싶습니까? 리의 크기를 더 작게할까요? 또는 가로 스크롤 막대가 나타 납니까?

나의 제안은 같은 그리드 시스템과 결합 고정 폭 디자인을 고려하는 것입니다 :

당신이 그 (것)들에게 측면을 원하는 경우에

편집 옆에서 다음 중 하나를 수행 할 수 있습니다.

대신 마진 오른쪽을 넣어
  • 절대 위치의
    • 플로트 #cornerbanner : UL 인증 번호 탐색 이들의

    모두에 117px 그들을 포함하는 부모가 둘 다 저장하기에 충분히 넓은해야합니다.

  • +0

    저는 리가 모퉁이 배너 아래로 밀어 넣어지기를 원하지 않습니다.하지만 왼쪽으로 밀면 더 작은 해상도로 볼 수 있습니다. – Spencer

    +0

    탐색에 여백을 두거나 둘 수 있습니다. 위의 내 대답을 참조하십시오. –

    +0

    #cornerbanner 부동 제안이 효과적이었습니다. 감사! – Spencer

    관련 문제