I'm trying to put some photos on a web page and I'd like them to sit horizontally in groups of two. Right now they just run vertically down the left side of my content area. Here's the code I'm using for the gallery:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Synergy Music Academy: Media</title>
<meta charset="utf-8">
<link rel="stylesheet" href="project.css">
<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<h1>Synergy Music Academy</h1>
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="content">
<div id="gallery">
<ul>
<li>
<a href="images/jack.jpg"><img src="images/jackthumb.jpg" width="200" height="200"
alt="Jack">
<span><img src="images/jack.jpg" width="400" height="400" alt="Jack"><br>
Singing</span></a>
</li>
<li>
<a href="images/band.jpg"><img src="images/bandthumb.jpg" width="200" height="200"
alt="Band Workshop">
<span><img src="images/band.jpg" width="400" height="400" alt="Band Workshop"><br>
Band Workshop</span></a>
</li>
<li>
<a href="images/synths.jpg"><img src="images/synthsthumb.jpg" width="200" height="200"
alt="Fun with Synths">
<span><img src="images/synths.jpg" width="400" height="400" alt="Fun with Synths"><br>
Fun with Synths</span></a>
</li>
<li>
<a href="images/tallon.jpg"><img src="images/tallonthumb.jpg" width="200" height="200"
alt="Tallon">
<span><img src="images/tallon.jpg" width="400" height="400" alt="Tallon"><br>
Chris & Tallon</span></a>
</li>
</ul>
</div>
</div>
<div class="nav">
<a href="index.html">Home</a>
<a href="services.html">Services</a>
<a href="media.html">Media</a>
<a href="about.html">About</a>
<a href="blog.html">Blog</a>
<a href="contact.html">Contact</a>
</div>
</div>
</body>
</html>
And my CSS looks like this:
body {background-color: #A0A0A0; background-image: url(images/background.jpg);}
#wrapper {margin-left: auto;margin-right: auto;width: 80%; min-width: 960px;box-shadow: inherit;}
h1 { text-align: center;
background-color: #FFFFFF;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
font: 55px/1.4em nimbus-sans-tw01con,sans-serif;
color: #3F3E91;
}
#nav {font-family: anton, sans-serif;font-size: large;padding: 5px; float: left;width:
160px;padding-top: 20px;padding-right: 5px; padding-bottom: 5px;padding-left: 20px;}
#nav a { text-decoration: none; }
#nav a:link{color: #3F3E91;}
#nav a:visited {color: #0066CC;}
#nav a:hover {color: #000000;}
#nav ul { list-style-type: none;margin: 0;padding-left: 0; }
#content{background-color: #FFFFFF;margin-left: 160px;padding-top: 1px;padding-left: 20px;padding-right: 20px;}
#footer {font-size: .70em; font-style: italic; text-align: center;padding: 10px;}
.nav {text-align: center;}
.clear {clear: both;}
.address{text-align: center;}
#mobile { display: none; }
#desktop { display: inline; }
#gallery {
position: relative;
clear: both;
}
#gallery ul {
width: 300px;
list-style-type: none;
}
#gallery img {
border-style: none;
float: none;
padding: 0;
}
#gallery a {
text-decoration: none;
color: #333;
font-style: italic;
}
#gallery span {
display: none;
}
#gallery a:hover span {
display: block;
position: absolute;
top: 10px;
left: 340px;
text-align: center;
}
Any help would be much appreciated. Thanks!
I've checked this code... and you need to change different things...
#nav {
float: left;
font-family: anton, sans-serif;
font-size: large;
padding: 20px 5px 5px 20px;
position: absolute; /* */
width: 160px;
}
#content{
background-color: #FFFFFF;
margin-left: 160px;
padding-left: 20px;
padding-right: 20px;
padding-top: 1px;
}
#gallery {
clear: both;
display: block;
margin: 0;
padding: 0;
position: relative;
top: 0;
}
#gallery ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 410px;
}
#gallery ul li {
display: inline-block; /* To put 2 images in the same line */
}
And a recommendation: Ever use a reset css file. This will help you to see the same thing in all browsers. The basic is
* { margin: 0; padding: 0; }