이미지 갤러리에 문제가 있습니다.

저는 코딩 작업에 익숙하지 않고 조금만 작업하고 있습니다. 나는 이미지 갤러리를 만들려고 노력하고있다. & css 이미지 위로 마우스를 가져 가면 그 이미지의 더 큰 미리보기가 중간에 나타난다. 내 갤러리의 모습을 보여주는 스크린 샷 링크가 있습니다 : enter image description here 매우 간단합니다. 문제가있는 부분은 다음과 같습니다. 1. 이미지 위치가 동일 할 때이미지 갤러리에 문제가 있습니다.

#forest { display:inline-block; height: 70px; width: 70px; margin-top: 100px; margin-left: 70px; margin-right: -90px; } 

#previewforest { position:absolute; z-index:10; height: 350px; opacity: 0; margin-top: -100px; margin-right: 50px; margin-bottom: 300px; margin-left: 50px; } 

#forest:hover{ opacity:0.4; } 

#forest:hover ~ #previewforest { opacity:1.0; }

는 I 감사 : 지금 내가 무슨 일을하고있어 각 이미지에 대한 기본적이 있기 때문에 2. 내가 CSS에서이 코딩의보다 효율적인 방법이 있는지 알고 싶어 새 브라우저/컴퓨터에서 열 이것이 충분히 명확했으면 좋겠다.

출처

2014-07-25 Zen Turtle

id 대신 클래스를 사용할 수 있습니다. 수업은 여러 번 사용할 수 있습니다.

#image {}

당신이 클래스에 대해이 작업을 수행 : 모든 당신이 이런 식으로이 사진에

.image { }

이제이 클래스를 사용할 수 있습니다

를

당신이 대신 할 CSS에서이를 사용하려면

<div class="image"> 
    Picture here 
</div>

페이지를 모든 브라우저에서 동일하게 보이게하려면 CSS를 재설정 할 수 있습니다.

http://www.cssreset.com/

출처

2014-07-25 22:09:18 Dieter91

고맙습니다. CSS 재설정에 대해 미안하지만 정확하게 무엇입니까? –

모든 CSS 코드가 모든 브라우저에서 동일하게 재설정됩니다. 첫 번째 파일을 가져와 CSS 파일 위에 붙여 넣으십시오. 더 자세한 정보 : http://www.cssreset.com/what-is-a-css-reset/ – Dieter91

당신은 이것을 읽을 수도 있습니다 : http://www.cssreset.com/which-css-reset- 해야합니다 - 사용 / – Dieter91

이미지 갤러리에 문제가 있습니다.

답변

관련 문제