-1 |
|
hey, daar ben ik weer met m'n gezaag .
ik heb iets gemaakt met behulp van css-p.
resultaat te zien op http://ontani.no-ip.com/wlb/preview.html
de code is:
<div class="previewTotal">
<img src="images/previewLarge_03.gif" class="topMiddlePreview" alt="" />
<img src="images/previewLarge_06.gif" class="centerLeftPreview" alt="" />
<img src="images/previewLarge_07.gif" class="centerRightPreview" alt="" />
<img src="images/previewLarge_11.gif" class="bottomMiddlePreview" alt="" />
<img src="images/previewLarge_01.gif" class="topLeftPreview" alt="" />
<img src="images/previewLarge_02.gif" class="topLeft2Preview" alt="" />
<img src="images/previewLarge_04.gif" class="topRightPreview" alt="" />
<img src="images/previewLarge_05.gif" class="topRight2Preview" alt="" />
<img src="images/previewLarge_09.gif" class="bottomLeftPreview" alt="" />
<img src="images/previewLarge_10.gif" class="bottomLeft2Preview" alt="" />
<img src="images/previewLarge_08.gif" class="bottomRightPreview" alt="" />
<img src="images/previewLarge_12.gif" class="bottomRight2Preview" alt="" />
<div class="centerMiddlePreview">
</div>
</div>
<div class="previewTotal"> <img src="images/previewLarge_03.gif" class="topMiddlePreview" alt="" /> <img src="images/previewLarge_06.gif" class="centerLeftPreview" alt="" /> <img src="images/previewLarge_07.gif" class="centerRightPreview" alt="" /> <img src="images/previewLarge_11.gif" class="bottomMiddlePreview" alt="" /> <img src="images/previewLarge_01.gif" class="topLeftPreview" alt="" /> <img src="images/previewLarge_02.gif" class="topLeft2Preview" alt="" /> <img src="images/previewLarge_04.gif" class="topRightPreview" alt="" /> <img src="images/previewLarge_05.gif" class="topRight2Preview" alt="" /> <img src="images/previewLarge_09.gif" class="bottomLeftPreview" alt="" /> <img src="images/previewLarge_10.gif" class="bottomLeft2Preview" alt="" /> <img src="images/previewLarge_08.gif" class="bottomRightPreview" alt="" /> <img src="images/previewLarge_12.gif" class="bottomRight2Preview" alt="" /> <div class="centerMiddlePreview"> </div> </div>
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: #000000;
}
.previewTotal {
position:relative;
height: 100%;
}
.topLeftPreview, .topLeft2Preview, .topMiddlePreview, .topRightPreview, .topRight2Preview, .centerLeftPreview, .centerMiddlePreview, .centerRightPreview, .bottomLeftPreview, .bottomLeft2Preview, .bottomMiddlePreview, .bottomRightPreview, .bottomRight2Preview {
position:absolute;
}
.topLeftPreview {
top: 0px;
left: 0px;
}
.topLeft2Preview {
top: 0px;
left: 80px;
}
.topMiddlePreview {
top: 0px;
left: 0px;
width: 100%;
height: 60px;
}
.topRightPreview {
right: 80px;
top: 0px;
}
.topRight2Preview {
right: 0px;
top: 0px;
}
.centerLeftPreview {
top: 0px;
left: 0px;
width: 80px;
height: 100%;
}
.centerMiddlePreview {
top: 60px;
left: 80px;
bottom: 60px;
right: 80px;
}
.centerRightPreview {
top: 0px;
right: 0px;
width: 80px;
height: 100%;
}
.bottomLeftPreview {
bottom: 60px;
left: 0px;
}
.bottomLeft2Preview {
bottom: 0px;
left: 0px;
}
.bottomMiddlePreview {
left: 0px;
bottom: 0px;
height: 60px;
width: 100%;
}
.bottomRightPreview {
bottom: 60px;
right: 0px;
}
.bottomRight2Preview {
bottom: 0px;
right: 0px;
}
html, body { margin: 0px; padding: 0px; width: 100%; height: 100%; background-color: #000000; } .previewTotal { position:relative; height: 100%; } .topLeftPreview, .topLeft2Preview, .topMiddlePreview, .topRightPreview, .topRight2Preview, .centerLeftPreview, .centerMiddlePreview, .centerRightPreview, .bottomLeftPreview, .bottomLeft2Preview, .bottomMiddlePreview, .bottomRightPreview, .bottomRight2Preview { position:absolute; } .topLeftPreview { top: 0px; left: 0px; } .topLeft2Preview { top: 0px; left: 80px; } .topMiddlePreview { top: 0px; left: 0px; width: 100%; height: 60px; } .topRightPreview { right: 80px; top: 0px; } .topRight2Preview { right: 0px; top: 0px; } .centerLeftPreview { top: 0px; left: 0px; width: 80px; height: 100%; } .centerMiddlePreview { top: 60px; left: 80px; bottom: 60px; right: 80px; } .centerRightPreview { top: 0px; right: 0px; width: 80px; height: 100%; } .bottomLeftPreview { bottom: 60px; left: 0px; } .bottomLeft2Preview { bottom: 0px; left: 0px; } .bottomMiddlePreview { left: 0px; bottom: 0px; height: 60px; width: 100%; } .bottomRightPreview { bottom: 60px; right: 0px; } .bottomRight2Preview { bottom: 0px; right: 0px; }
het zwarte gebied in het midden is de div: centerMiddlePreview.
nu was het m'n bedoeling om een foto in het middelste gebied te zetten die altijd gecentreerd wordt. zowel horizontaal als verticaal.
iemand een ideetje?
Greetz
|