How to organize pictures on website using css? [on hold]
- by user3624023
Here is my website without any CSS: http://www.wmcicompsci.ca/cs20/students/theglowcloud/Bare%20bones%20website/classics_bare.html
I am new to CSS and I would like to organize pictures these pictures in this fashion: http://css-tricks.com/examples/SlideinCaptions/
I would just like this layout for the pictures but I do not need the sliding of the captions(although I would like to but it does not work my browser). I would like the captions to be like titles on top of the pictures. Here is my current html code:
<!DOCTYPE html>
<html>
<head>
<title> My favourite Fantasy books</title>
<meta charset = "utf-8">
<link rel="stylesheet" href="css.css">
</head>
<body>
<nav id="main_nav">
<ul>
<li><a href = " homepage_css.html"> Homepage</a></li>
<li><a href="science_fiction_css.html">Science Fiction</a></li>
<li><a href="classics_css.html">Classics</a></li>
<li><a href="fantasy_css.html">Fantasy</a></li>
</ul>
</nav>
<h1> Fantasy Genre</h1>
<p> Here are my favourites:</p>
<ul>
<li> Goblet of Fire by J.K Rowling (4th book in the Harry Potter Series) </li>
<li><img class= displayed src="pics/fantasy/goblet_of_fire.jpg" width="200" alt="Goblet of Fire book cover"></li>
<li> Graceling by Kristan Cashore </li>
<li><img src="pics/fantasy/graceling.jpg" width="200" alt = " Graceling book cover"></li>
<li> Serpent's Shadow by Rick Riordan (3rd book in the Kane Chronicles) </li>
<li><img src="pics/fantasy/serpents_shadow.jpg" width="200" alt="Serpent's Shadow book cover"></li>
<li> The Hobbit by J.R.R. Tolkein </li>
<li><img src="pics/fantasy/the_hobbit.jpg" width="200" alt="The Hobbit book cover"></li>
<li> The False Prince by Jennifer Neilson (1st book in the Ascendance Triology) </li>
<li><img src="pics/fantasy/the_false_prince.jpg" width="200" alt="The False Prince book cover"></li>
</ul>
