0 Replies - 1704 Views - Last Post: 22 July 2009 - 03:46 AM

#1 jasonbd  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 30-January 08

CSS Gallery

Posted 22 July 2009 - 03:46 AM

Description: instuctions belowCSS gallery with mouse over interact. This is easy and simple but works good
/* This first part will go into your separate CSS flie */

#gallery ul li{
    display:inline;
}

#gallery ul li a{
    float:left;
    height:35px;
    margin:0;
    padding:0px;
    width:200px;
}

/* The Height and width below, you may need to change if you want more in a row on the page */

#gallery a:link, #gallery a:visited{
    height:151px;
    margin:0 5px 10px 0;
    padding:0;
    width:200px;
    border: 4px inset #0000ff;
}

#gallery a:hover, #gallery a:active{
    border: 4px inset #fff;
}

/* This second part below here will go into your HTML flie. */
/* Placed where you want to gallery to go */

/* The height and width oh each image will need to change to the height and width oh the #gallery a:link, #gallery a:visited{ commanad, if changed */
  
  <div id="gallery">
    <ul>
      <li><a title="image-name" href="image.html"><img src="image.jpg" border="0" width="200" height="151"></a></li>
      <li><a title="image-name" href="image.html"><img src="image.jpg" border="0" width="200" height="151"></a></li>
      <li><a title="image-name" href="image.html"><img src="image.jpg" border="0" width="200" height="151"></a></li>
      <li><a title="image-name" href="image.html"><img src="image.jpg" border="0" width="200" height="151"></a></li>
    </ul>
  </div>


Is This A Good Question/Topic? 0
  • +

Replies To: CSS Gallery

#2 jasonbd  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 30-January 08

Re: CSS Gallery

Posted 22 July 2009 - 03:46 AM

Description: instuctions below and in code snippet

Edit: Forgot to say you need to make a new HTML up for each image there is. To make it easy to keep track of them you put them into a gallery folder. I will put the HTML code that can be used for each image right at the bottom of the snippet.

This gallery is setup so the border will change color when your mouse is over each image and when you click on the the image it will go to another page where you will have the image at full size (you dont need to make a small and big image this will do it for you)CSS gallery with mouse over interact. This is easy and simple but works good
/* This first part will go into your separate CSS flie */

#gallery ul li{
    display:inline;
}

#gallery ul li a{
    float:left;
    height:35px;
    margin:0;
    padding:0px;
    width:200px;
}

/* The Height and width below, you may need to change if you want more in a row on the page */

#gallery a:link, #gallery a:visited{
    height:151px;
    margin:0 5px 10px 0;
    padding:0;
    width:200px;
    border: 4px inset #0000ff;
}

#gallery a:hover, #gallery a:active{
    border: 4px inset #fff;
}

/* This second part below here will go into your HTML flie. */
/* Placed where you want to gallery to go */

/* The height and width oh each image will need to change to the height and width oh the #gallery a:link, #gallery a:visited{ commanad, if changed */
  
  <div id="gallery">
    <ul>
      <li><a title="image-name" href="image.html"><img src="image.jpg" border="0" width="200" height="151"></a></li>
      <li><a title="image-name" href="image.html"><img src="image.jpg" border="0" width="200" height="151"></a></li>
      <li><a title="image-name" href="image.html"><img src="image.jpg" border="0" width="200" height="151"></a></li>
      <li><a title="image-name" href="image.html"><img src="image.jpg" border="0" width="200" height="151"></a></li>
    </ul>
  </div>

/* below is the page HTML for each image you have in your gallery */

<html>
  <head>
    <title>Gallery</title>
  </head>

<body>
  <img src="image.jpg">
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1