|
Hi,
I want to build an image gallery with the ability to write a description beneath each photo.
Initially I was able to place the gallery in a horizontal position. This is how I begun.
The code (in HTML):
<div id=”gallery”>
<ul>
<li> <a target="_blank" href="forest.html"><img src="forest.jpeg" alt="forest" width="110" height="90" /></a>
<li> <a target="_blank" href="sea.html"><img src="sea.jpeg" alt="sea" width="110" height="90" /></a>
<li> <a target="_blank" href="sky.html"><img src="sky.jpeg" alt="sky" width="110" height="90" /></a>
<li> <a target="_blank" href="flowers.html"><img src="flowers.jpeg" alt="flowers" width="110" height="90" /></a>
</ul>
</div>
In CSS:
#gallery {border: 1px solid green}
#gallery li {display: inline}
#gallery a:hover {border: 3px solid red}
However, although the gallery laid out horizontally with the div border around it, the ‘a:hover’ resulted in an unattractive and partly missing border. Moreover I couldn’t control the image border color (as opposed to the ‘a:hover’ border color); blue seemed to be the image border color default. Eventually I resorted to the net and I found the code set out below.
The HTML code I found on the net:
<div class="img">
<a target="_blank" href="link here"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="link here"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="link here"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="link here"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
The CSS from the net:
div.img {margin: 2px; border: 1px solid black; height: auto; width: auto; float: left; text
align: center}
div.img img {display: inline; margin: 8px; border: 1px solid yellow}
div.img a:hover {border: 1px solid #0000ff;}
div.desc { text-align: center; font-weight: normal; width: 120px; margin: 2px;}
The code works. But:
A) I can’t position the gallery where I want on the page
B) When I write a paragraph (<p> </p>) within another div beneath the gallery code, the paragraph sits to the side of the gallery.
So if someone can help me with either:
A) suggestions on how to position the gallery from the net into my middle column so that:
i) the gallery stays in place
ii) the next division holding other information below it will sit in place without moving to the side of the gallery
or
B) suggestions on how to make the ‘a:hover border’ more attractive and complete in the ul and li code that I started with.
Your suggestions will be most appreciated; I’m not quite sure how to resolve this and you have far greater understanding in this than me.
|
