CSS layout problem. I tried positioning variations still not working
I have wrote a code for an image gallery.
Code:
ul.gallery li {
float: left;
margin: 0 10px;
padding: 10px;
border: 1px solid #ddd;
list-style: none;
margin-bottom:10px;
}
ul.gallery li a img {
float: left;
width: 200px;
}and here’s the html code-
HTML Code:
<a href="#">Page 1</a> | <a href="#">Page 2</a> | <a href="#">Page 3</a>
<ul class="gallery">
<li><a href="#"><img src="img/z.jpg" /></a></li>
<li><a href="#"><img src="img/x.jpg" /></a></li>
<li><a href="#"><img src="img/y.jpg" /></a></li>
<li><a href="#"><img src="img/a.jpg" /></a></li>
<li><a href="#"><img src="img/u.jpg" /></a></li>
<li><a href="#"><img src="img/w.jpg" /></a></li>
</ul> and here is the actual preview-
Now what i want is when user clicks on page 1 link two of images should vanish or go invisible.
i’ve written a javascript code to do that and it works perfectly.
my problem is, when any two images go invisible others occupy the black space cause by this. But i want them to be on same position as they were before it. I can’t figure out correct positioning attribute and where to place it in css.
can somebody explain me.
View full post on Tycoon Talk
layout, Positioning, Problem, still, tried, variations, working
RSS Site Feed