David David - 3 months ago 18
CSS Question

Navigation Web with anchors

I'm currently working on this web :



body {
margin: 0;
overflow: hidden;
}
.AbsoluteBack {
height: 100vh;
text-align: center;
background-color: #ccc;
}
.AbsoluteBack img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.LinkLeft {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
}
.LinkRight {
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100%;
}

<div id="1" class="AbsoluteBack">
<img src="http://kingofwallpapers.com/images/images-169.jpg">
<a href="#3">
<div class="LinkLeft"></div>
</a>
<a href="#2">
<div class="LinkRight"></div>
</a>
</div>
<div id="2" class="AbsoluteBack">
<img src="http://www.w3schools.com/css/trolltunga.jpg">
<a href="#1">
<div class="LinkLeft"></div>
</a>
<a href="#3">
<div class="LinkRight"></div>
</a>
</div>
<div id="3" class="AbsoluteBack">
<img src="http://www.pnas.org/site/misc/images/15-04709.500.jpg">
<a href="#2">
<div class="LinkLeft"></div>
</a>
<a href="#1">
<div class="LinkRight"></div>
</a>
</div>





And the problem is that if i got left and right to navigate in position absolute, only first image got the links properly.

Any advices?(If its possible better only css)

Answer

Try this

.AbsoluteBack{position:relative;}

Demo

Comments