2013-06-18 2 views
1

빠른 사이트를 만들고 모든 콘텐츠를 한 페이지에 표시하고 앵커 링크가있는 작은 메뉴를 사용하여 최종 사용자가 특정 부분을 더 빠르게 탐색하도록합니다. 두 개의 앵커 링크가 잘 작동합니다 (About Me, My Projects). 그러나 "Contact Me"링크가 "My Projects"섹션의 임의 부분으로 점프합니다.HTML 앵커 ID가 작동하지 않습니다.

사이트의 미리보기가 여기에 있습니다 : http://dev.cuonic.com/cuonic.com/

나는 그들이 대응, ID를 확인하신 후, 어떤 임의의 "접촉 나"ID가 "내 프로젝트"에 주위에 거짓말 섹션이없는, 내가했습니다 아이디가 바뀌 었습니다. 파이어 폭스와 크롬 모두에서 이런 일이 발생했습니다. 무슨 일이야 ? 어떤 도움을 주신 것입니다 :)

+0

일부 HTML 구문 오류는 '<스팬 ID = "접촉 나">'즉시 종료된다. 따라서 – karthikr

+0

contact-me 링크가없는 앵커를 찾으려고합니다. 문의 양식 위에 닻을 놓으려고 했습니까? –

+0

앵커는 거기에 있습니다, 나는 체크하고 두 번 확인했습니다. CSS 문제였습니다. –

답변

3

다음 모든 콘텐츠는 //*[@id="content"]/div[2] 내 왼쪽에 떠 있습니다. 플로팅 요소는 포함하는 블록 수준 요소의 높이에 영향을주지 않습니다. 당신이 추가 할 경우 :

#contact-me { clear:both; }

당신의 CSS에 어딘가의 <span id="contact-me"> 태그는 당신이 실제로 원하는 곳으로 위치를 변경합니다. 귀하의 페이지는 아직 연락처 양식이 맨 위로 (적어도 내 모니터에서는) 충분히 길지는 않지만 페이지 끝까지 계속 스크롤됩니다.

+0

나는 .anchor 클래스에 양쪽 모두를 대신 추가했지만 완벽하게 작동했습니다. 감사합니다. 앵커 문제가 수레와 관련 될 수 있다는 것을 알지 못했고, 페이지가 길지는 않았습니다.하지만 그렇지 않습니다. 문제. –

+0

@Cuonic 녹색 화살표를 클릭하여 답변을 "수락"하는 뻔뻔한 요청? –

+0

그래, 그냥 어떤 이유로 대답을 수락하기 위해 5 분을 기다려야했습니다. 다시 고마워요 :) –

0

변경이 부분의 코드 : 여기에

</div> 
<span class="anchor" id="contact-me"></span> 
<h1>Contact Me</h1> 
<div class="text"> 

:

</div> 
<h1>Contact Me</h1> 
<span class="anchor" id="contact-me"></span> 
<div class="text"> 
+0

그것은 스팬의 목표를 무너 뜨 렸습니다. 앵커 문제를 해결하기위한 것이고 다른 두 가지는 잘 작동하지만 문제는 지금 풀립니다. CSS 플로트와 관련이 있습니다. –

+1

@Cuonic 예, 명확 : 둘 다 훨씬 낫습니다. Ben Harold의 대답을 올바른 것으로 표시하십시오. 감사. – redditor

관련 문제