EasySlider와 CSS가 훌륭하게 재생되지 않습니다.

www2.chrislrobinson.co.uk의 슬라이더가 제대로 작동하지 않는 이유를 말해 줄 수 있는지 궁금합니다. 나는 그들의 예제에서 코드를 해제했습니다. 페이지가 처음로드 될 때 제대로 작동하는 것처럼 보이지만 새로 고침하면 이미지가 페이지 전체에 걸쳐 펼쳐지고 매우 얇습니다 (즉 높이와 너비가 엉망이됩니다).EasySlider와 CSS가 훌륭하게 재생되지 않습니다.

<body> 
<div id="container"> 
... 
<div id="mainContent"> 
... 
    <div id="slider"> 
     <ul>     
      <li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li> 
      <li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li> 
      <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li> 
      <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li> 
      <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>   
     </ul> 
    </div>

과 부연 CSS :

#slider ul, #slider li{ 
margin:0; 
padding:0; 
list-style:none; 
} 

#slider, #slider li{ 
width:696px; 
height:241px; 
overflow:hidden; 
} 

body { 
font: 100% Verdana, Arial, Helvetica, sans-serif; 
background: #000000 url('images/bg.png') no-repeat top center; 
margin: 0; 
padding: 0; 
text-align: center; 
color: #FFFFFF; 
} 

#container { 
width: 804px; /* this will create a container 80% of the browser width */ 
background: transparent; 
margin: 0 auto; 
text-align: left; /* this overrides the text-align: center on the body element. */ 
/*border: 2px solid rgba(255,255,255,1);*/ 
} 

#mainContent { 
background: rgba(60,60,60,0.75) no-repeat top center; 
width: 800px; 
border: 2px solid rgba(184,0,31,1); 
padding: 0px; 
min-height: 600px; 
-moz-border-radius: 10px; 
-khtml-border-radius: 10px; 
-webkit-border-radius: 10px; 
min-height: 400px; 
clear: both; 
} 

span#prevBtn{} 

span#nextBtn{}

감사

여기에 관련 HTML입니다! 크리스

편집 : 당신이 그것을 상쾌하게 유지하는 경우 , 그것은 결국 조금 다시 작동합니다! 이 변경 될 수 있습니다 이유
<div id="slider" style="width: 953px; height: 18px; overflow-x: hidden; overflow-y: hidden; "> 누구나 알고 가 나는 이상하게 표시되면, 이것은 HTML 것을 발견 :하지만 그

편집 2 ... 정말 해결책이 아니다?

출처

2011-05-14 Chris Robinson

추가? – breezy

또는 슬라이더를 #mainContent div의 가운데에 배치 하시겠습니까? 나는 당신의 의도가 무엇인지 알 필요가있는 해결책이 있다고 생각합니다. – breezy

분의 정렬 너무 중요하지 않습니다. 나는 크기가 600x200이되도록 설정했는데, 실행될 때 크기가 임의의 값을 갖기 때문에 왜 궁금합니다. (953x18). 나는 여기에 제안 된대로 JS 파일의 값을 하드 코딩하여 분당 그것을 고쳤습니다. http://forum.jquery.com/topic/easyslider-problems-help –

귀하의 출처를 검토 한 결과 내가 권장하는 첫 번째 점은 Reset Styleshee t 또는 * {margin:0;padding:0}을 사용하면 모든 브라우저에서 모든 CSS 속성이 재설정된다는 것입니다.

다음에 #slider, #slider li에 추가하십시오.

#slider, #slider li {width:600px;height:200px}

이렇게하면 목표를 달성하는 데 도움이됩니다.

편집 : 그리고 당신이 중심하려는 경우 슬라이드 쇼 당신은 당신의 슬라이더가 #mainContent 같은 폭으로 원하는

{margin:0 auto}

출처

2011-05-14 15:36:41 breezy

EasySlider와 CSS가 훌륭하게 재생되지 않습니다.

답변

관련 문제