2015-01-16 234 views
-2

我在這方面很新穎,而且我按照自己想要的方式定位某些圖像時遇到了一些問題。 這就是我想要的:鑽石形狀的三角形圖像

enter image description here

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工具來完成此操作。

有點搜索和實驗後,我決定在絕對定位的圖像,在一個相對定位的div:

等共22個正三角形。

這導致了上述的三角形塔,我決定在我列出我的耐心之前得到一些幫助。我錯過了什麼?

更新 我加入了完整代碼的HTML和CSS,但因爲這個問題現在已經解決了,它似乎顯得有些多餘,所有我能說的是,我現在得到我想要的結果。

我被告知的問題是,我已經把選擇器落後了;思考。鑽石:第二個孩子(2)意味着容器分類鑽石的第二個孩子將被選中。我現在在.Diamond和:n-child(x)/:first-child之間添加了一個「>」。 愚蠢的錯誤。

+5

你需要用你的標記發佈一個工作示例。 –

+0

我不明白你的問題是什麼,你需要發佈更多的代碼。但是,我確實可以告訴你,每個子號碼的設置寬度:229px是多餘的。也是高度196px – vals

回答

0

我打算假設.Diamond是您的貨櫃

所以,你要.Diamond>:first-child獲得的.Diamond的第一個孩子 - 否則,你會得到.Diamond容器的第一個孩子。

所以基本上,沒有你的風格被應用。

快速提示:

.Diamond>div { 
    width:229px; 
    height:196px; 
} 

中複製,對於所有的三角形沒有任何意義。

+0

是的,就像你說的那樣,它解決了這個問題,我選擇了後退。 –

+0

我實際上使用過http://www.w3schools.com/cssref/css_selectors.asp作爲參考,但儘管使用了幾個選擇器,但我忽略了「>」。 Diamond類div確實是圖像的容器。非常感謝你。 –