0

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>
    &nbsp;
    <a href="services.html">Services</a>
    &nbsp;
    <a href="media.html">Media</a>
    &nbsp;
    <a href="about.html">About</a>
    &nbsp;
    <a href="blog.html">Blog</a>
    &nbsp;
    <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!

Chris
  • 5
  • 2

6 Answers6

0

Try the following CSS:

#gallery {
  font-size:0;
}
#gallery li {
  display:inline-block;
  width:50%;
}
#gallery li img {
  width:100%;
}

This is setting your list items to be inline-block, meaning that they will sit next to each other (in line) but you are also able to declare dimensions for them as if they are block elements.

Then when you set the width at 50%, two list items will fit on every line.

You then have to set the font-size on the container to zero so that the blank white space between the tags doesn't push the list items down on the next line.

And finally setting the images to 100% width means that they will fill up the entire list item, in effect making them exactly half the width of the container.

senectus
  • 409
  • 4
  • 14
0

You can use the display property.

The display property specifies the type of box used for an HTML element.

Try this:

#gallery li {
    display:inline-block;
}

JSFiddle Demo

imbondbaby
  • 6,351
  • 3
  • 21
  • 54
0

You can use the css3 :nth-child selector to help with this. Disclaimer: this won't work in older browsers like IE8 and down.

#gallery li { float: left; }
#gallery li:nth-child(odd) { clear: left; }

If you need this to work for older browser then you will need to add classes to your list items

<li class="odd">...</li>
<li class="even">...</li>

#gallery li { float: left; }
#gallery li.odd { clear: left; }
Lee Wise
  • 902
  • 7
  • 16
0

I've checked this code... and you need to change different things...

Here is the css modified

#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; }
p1errot
  • 41
  • 1
  • 4
0

You can try using the columns property:

#gallery ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; }

You can read more here.

saraluna
  • 36
  • 3
0

I would recommend using divs to construct a 1 row 2 column table. Then place each image in a different column. Bootstrap has actually solved this.

html:

<div class="row">
  <div class="col-md-6">
  <!-- Place Image 1 div here-->
  </div>
  <div class="col-md-6">
  <!-- Place Image 2 div here-->
  </div>
</div>

then you would add the row and col-md-6 classes to your style sheet. Though I would strongly suggest using bootstrap to take advantage of the media queries

CSS:

.row {
margin-left: -15px;
margin-right: -15px;
}

.row:before,
.row:after{
content: " ";
display: table;
}

.row:after{
clear: both;
}

.col-md-6 {
 position: relative;
 min-height: 1px;
 padding-left: 15px;
 padding-right: 15px;
 width: 50%;
}
JMariña
  • 324
  • 2
  • 15