I got the 'effect' I needed doing this:
<div id="boards">
<a href="about.html"><img src="Images/board_about.png" class="about" width="140" height="196" alt="chalk board image link, Read ABOUT US" title="Link to About us" border="0" /></a>
<a href="drink.html"><img src="Images/board_ale.png" class="drink" width="140" height="195" alt="chalk board image link, REAL ALE link" title="Link, find out about our selection of drinks" border="0" /></a>
<a href="food.html"><img src="Images/board_food.png" class="food" width="140" height="195" alt="Chalk board image link, FOOD" title="Link to see what we can offer from our menu" border="0" /></a>
<a href="about.html"><img src="Images/board_function.png" class="function" width="140" height="196" alt="Chalk board image link, to read about events and function bookings" title="Link, Need to book a function? Learn about events." border="0" /></a>
<a href="contact.html"><img src="Images/board_intouch.png" class="contact" width="140" height="196" alt="Chalk board image link, GET IN TOUCH" title="Contact your hosts" border="0" /></a>
<a href="about.html"><img src="Images/board_music.png" class="music" width="140" height="196" alt="Chalk board image link, LIVE MUSIC, QUIZES etc." title="Find out about events at the Thatchers" border="0" /></a>
</div> <!--end boards div-->
<hr width="100%" size="3" color="#008000" />
and the CSS:
#boards {
margin-left: 57px;
margin-top: -25px;
margin-bottom: 50px;
}
.about {
margin-right: 20px;
box-shadow: 10px 10px 15px #000;
-webkit-box-shadow: 10px 10px 15px #000;
-moz-box-shadow: 10px 10px 15px #000;
}
.drink{
margin-right: 20px;
box-shadow: 10px 10px 15px #000;
-webkit-box-shadow: 10px 10px 15px #000;
-moz-box-shadow: 10px 10px 15px #000;
}
.food {
margin-right: 20px;
box-shadow: 10px 10px 15px #000;
-webkit-box-shadow: 10px 10px 15px #000;
-moz-box-shadow: 10px 10px 15px #000;
}
.function {
margin-right: 20px;
box-shadow: 10px 10px 15px #000;
-webkit-box-shadow: 10px 10px 15px #000;
-moz-box-shadow: 10px 10px 15px #000;
}
.contact {
margin-right: 20px;
box-shadow: 10px 10px 15px #000;
-webkit-box-shadow: 10px 10px 15px #000;
-moz-box-shadow: 10px 10px 15px #000;
}
.music {
margin-right: 20px;
box-shadow: 10px 10px 15px #000;
-webkit-box-shadow: 10px 10px 15px #000;
-moz-box-shadow: 10px 10px 15px #000;
}
This has achieved an in-line row of "PUB CHALK BOARDS" image links, complete with drop-shadows. But I accept it is not semantically correct, and may not be validated. For a start, there is not a <nav></nav> tag in sight. So, I am probably all very wrong.
