-2
저는이 부분에서 꽤 새로운데, 원하는 방식으로 이미지를 배치하는 데 문제가 있습니다. 이 내가 원하는 무엇인가 :다이아몬드 모양의 삼각형 이미지
a:link:
a:visited:
a:hover
.thumbnail {
border: 0 none;
box-shadow: none;
}
/*
Element width position calculated with:
(((1-((229/2)*x+(20*y))/1080)/2)+((229/2+20)/1080)*z)*100
x = number of triangles in row
y = number of spaces between triangles
z = triangle number from starting postion left -1
Vertical:
(((1-(844/1080))/2)+((196+20)/1080)*z)*100
*/
body {
background: url(Resources/forside_baggrund.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.Diamond {
width: 1080px;
height: 1080px;
margin: 0 auto;
position: relative;
background-color:transparent;
}
.Diamond img {
width: 229px;
height: 196px;
position:absolute;
}
.room {
width: 114.5px;
height: 131px;
position:absolute;
background-color:transparent;
left: 50%;
top: 36%;
}
.info {
width: 114.5px;
height: 131px;
position:absolute;
background-color:transparent;
left: 37.3%;
top: 56%;
}
.language {
width: 114.5px;
height: 131px;
position:absolute;
background-color:transparent;
left: 50%;
top: 51%;
}
.kursus {
width: 114.5px;
height: 131px;
position:absolute;
background-color:transparent;
left: 62.2%;
top: 56%;
}
/* Top Row */
.Diamond>:first-child {
left: 32.2453703704%;
top: 10.9259259259%;
}
.Diamond>:nth-child(2) {
left: 44.6990740741%;
top: 10.9259259259%;
}
.Diamond>:nth-child(3) {
left: 57.1527777778%;
top: 10.9259259259%;
}
/* Second Row */
.Diamond>:nth-child(4) {
left: 19.7916666667%;
top: 30.9259259259%;
}
.Diamond>:nth-child(5) {
left: 32.2453703704%;
top: 30.9259259259%;
}
.Diamond>:nth-child(6) {
left: 44.6990740741%;
top: 30.9259259259%;
}
.Diamond>:nth-child(7) {
left: 57.1527777778%;
top: 30.9259259259%;
}
.Diamond>:nth-child(8) {
left: 69.6064814815%;
top: 30.9259259259%;
}
/* Third Row */
.Diamond>:nth-child(9) {
left: 7.33796296296%;
top: 50.9259259259%;
}
.Diamond>:nth-child(10) {
left: 19.7916666667%;
top: 50.9259259259%;
}
.Diamond>:nth-child(11) {
left: 32.2453703704%;
top: 50.9259259259%;
}
.Diamond>:nth-child(12) {
left: 44.6990740741%;
top: 50.9259259259%;
}
.Diamond>:nth-child(13) {
left: 57.1527777778%;
top: 50.9259259259%;
}
.Diamond>:nth-child(14) {
left: 69.6064814815%;
top: 50.9259259259%;
}
.Diamond>:nth-child(15) {
left: 82.0601851852%;
top: 50.9259259259%;
}
/* Fourth Row */
.Diamond>:nth-child(16) {
left: 7.33796296296%;
top: 70.9259259259%;
}
.Diamond>:nth-child(17) {
left: 19.7916666667%;
top: 70.9259259259%;
}
.Diamond>:nth-child(18) {
left: 32.2453703704%;
top: 70.9259259259%;
}
.Diamond>:nth-child(19) {
left: 44.6990740741%;
top: 70.9259259259%;
}
.Diamond>:nth-child(20) {
left: 57.1527777778%;
top: 70.9259259259%;
}
.Diamond>:nth-child(21) {
left: 69.6064814815%;
top: 70.9259259259%;
}
.Diamond>:nth-child(22) {
left: 82.0601851852%;
top: 70.9259259259%;
}<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>www.klejstruplund.dk/Forside</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="Diamond">
\t <img src="Resources/Triangles/Koekken.png">
\t <img src="Resources/Triangles/Kongelys.png">
\t <img src="Resources/Triangles/Hoene.png">
\t <img src="Resources/Triangles/Gaardvindue.png">
\t <img src="Resources/Triangles/Sorttomat.png">
\t <img src="Resources/Buttons/Vearelser.png">
\t <img src="Resources/Triangles/View.png">
\t <img src="Resources/Triangles/Besser_Rev.png">
\t <img src="Resources/Triangles/Fidus.png">
\t <img src="Resources/Triangles/Demon.png">
\t <img src="Resources/Buttons/Kursus.png">
\t <img src="Resources/Buttons/Union_Jack.png">
\t <img src="Resources/Buttons/Om_stedet.png">
\t <img src="Resources/Triangles/Drivhus.png">
\t <img src="Resources/Triangles/Indenfor.png">
\t <img src="Resources/Triangles/Mereindenfor.png">
\t <img src="Resources/Triangles/Huset.png">
\t <img src="Resources/Triangles/fidusiovn.png">
\t <img src="Resources/Triangles/Apples.png">
\t <img src="Resources/Triangles/Cabbage.png">
\t <img src="Resources/Triangles/Pond.png">
\t <img src="Resources/Triangles/Filtsommerfugl.png">
\t <a href="#"><div class="room" alt="Leje af Vaerelse"></div></a>
\t <a href="#"><div class="info" alt="Information om stedet"></div></a>
\t <a href="#"><div class="language" alt="Change Language to English"></div></a>
\t <a href="#"><div class="kursus" alt="Information om kurser"></div></a>
</div> \t \t \t
</body>
</html>나는 다른 솔루션을 따르려고 노력했지만, 모두가 모든 이미지의 결과 최신 배치되고, 지금까지 실패 수직으로. 패턴을 이미지로 만들어서 쉽게 만들 수 있지만이 과정은 저를위한 학습 과정이므로 CSS 도구를 사용하여 패턴을 만들고 싶습니다. 검색 및 실험 조금 후에
는 I 비교적 DIV 위치에서 절대 위치 이미지를 결정 :등 모두 22 정삼각형이다.
위의 삼각형 타워가 생겨서 인내심을 표시하기 전에 도움을 받기로 결정했습니다. 내가 뭘 놓치고 있니? 문제가 이제 해결되기 때문에, 내가 말할 수있는 내가 지금 내가 원하는 결과를 얻을 수 있다는 것입니다, 약간 불필요한 보이지만
업데이트 나는, HTML과 CSS에 대한 전체 코드를 추가.
내가 알기에 문제는 내가 선택기를 뒤로 얻었습니다. 사고 : 다이아몬드 : nth-child (2)는 컨테이너 div 클래스 Diamond의 두 번째 자식이 선택되었음을 의미합니다. 나는 이제 .Diamond와 : nth-child (x)/: first-child 사이에 ">"을 추가했습니다. 어리석은 실수.
마크 업과 함께 작업 예제를 게시해야합니다. –
귀하의 문제를 이해하지 못합니다. 더 많은 코드를 게시해야합니다. 그러나, 나는 모든 너비에 대한 너비 설정 : 229px가 중복된다는 것을 말할 수 있습니다. 또한 높이 196px – vals