2015-01-14 2 views
0

편집jQuery를로드 레이아웃

내 원래의 헤더 레이아웃을 재정의 내 index.css했다 망쳐 놨어요. 신분증과 수업을보세요!

내 웹 사이트 머리글과 바닥 글 섹션을로드 할 수 jQuery를 사용하고

편집 할 수 있습니다. 그런 다음 내 색인 & 다른 페이지에 표시하십시오. 그러나, 그것을로드하려고 할 때마다 내 머리글 크기를 조정할 것으로 보인다. 누구든지 그 이유에 대한 단서가 있습니까? 나는이 문제에 대한 연구를했지만 도움이되는 것을 찾지 못했습니다.

다음은 영향을받는 웹 사이트입니다.

INDEX

HEADER

여기 헤더

JSFiddle for Header

내가 전화 했어 어떻게 내 인덱스 코드 헤더 거기에 내 코드가있는 JSFiddle있어

<html> 
    <head> 
     <title>HobbsBear Studios</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
     <link href='http://fonts.googleapis.com/css?family=Exo' rel='stylesheet' type='text/css'> 
     <link rel="stylesheet" href="_css/index.css" type="text/css" /> 
     <link rel="stylesheet" href="_css/photobanner.css" type="text/css" /> 
     <script type ="text/javascript" src="_javascript/photobanner.js"></script> 
     <link rel="icon" href="../favicon.ico" type="image/x-icon"> 
     <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
     <script> 
      $(function(){ 
       $("#header").load("header.html"); 
       $("#footer").load("footer.html"); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="header"></div> 
     <!-- A buncha stuff in the middle --!> 
     <div id="footer"></div> 
    </body> 
</html> 

그래서 올바른 레이아웃이 아닌 모든 요소가 표시됩니다. 어떤 아이디어?

답변

1

근본적인 원인은 사용중인 '슬라이딩 컨테이너'가 헤더에서 사용중인 클래스 이름을 무시하기 때문입니다. 이 클래스 이름을 변경해야 할 수도 있습니다. 2 분 안에 다음 2 개의 클래스가 index.css 페이지에서 나왔다는 것을 알게되었습니다.

#menu { 
position: absolute; 
top: 80%; 
left: 25%; 
width: 50%; 
font-family: 'Exo', sans-serif; 
font-weight: bold; 
} 
#logo { 
display: block; 
margin-left: auto; 
margin-right: auto; 
width: 550px; 
} 

것은 당신이 변화해야 할 것입니다 ID의 어느 내용 또는 페이지에서 동일한 ID가 하나 이상인를 가진 것은 그것의 원인을 오류를 발생합니다 좋은 연습과 일부 브라우저에이 아니기 때문에 헤더 '유효한'html 구조가 아닙니다. ID는 한 번에 여러 요소를 타겟팅하는 데 클래스가 사용되는 페이지의 정확한 특정 요소를 타겟팅하는 데 사용됩니다.

이 문제를 해결하면 도움이됩니다.

+0

네, #header와 같은 id를 많이 가지고 있습니다. 나는 SlidyCSS를 위해 필요한 것을 제외하고 기본적으로 CSS를 지워 버리기 위해 색인에 있던 헤더를 완전히 바꾸고 싶었습니다. –

관련 문제