1 Reply Latest reply on Dec 31, 2013 1:48 AM by es73

    Need help adding more images and hor. line

    Comp. 792 Level 1

      http://www3.telus.net/~jessum/holiday%20pools/residential.html

       

      Hi, at the above website, I want to add more images to the residential gallery page but since the images are different client, I would like a thin line (like the current lines) to separate the images from the existing images. I am stumped as to how to do this as I cannot see the code for the line in the "residential.html" page. I think the line was created in CSS.

       

      <!-- START PRIMARY -->

      <div id="primary" class="sidebar-no">

      <div class="inner group">

      <!-- START CONTENT -->

      <div id="content-page" class="content group">

      <div class="hentry group">

      <div id="portfolio" class="portfolio-filterable">

      <div class="gallery-filters">

      </div>

      <div id="portfolio-gallery" class="internal_page_items internal_page_gallery">

      <ul class="gallery-wrap image-grid group">

      <li data-id="id-1" class="brandidentity logodesign one-fourth">

      <div class="internal_page_item internal_page_item_gallery">

      <div class="overlay_a">

      <img src="images/gallery/residential/asse/thumb/asse_01.jpg" alt="0092" title="0092" />

      <div class="overlay">

      <a class="overlay_img" href="images/gallery/residential/asse/full/asse_01.jpg" rel="lightbox" title=""></a>

                                                                  <span class="overlay_title">Residential</span>

      </div>

      </div>

      </div>

      </li>

      <li data-id="id-2" class="brandidentity one-fourth">

      <div class="internal_page_item internal_page_item_gallery">

      <div class="overlay_a">

      <img src="images/gallery/residential/asse/thumb/asse_02.jpg" alt="0013" title="0013" />

      <div class="overlay">

                                                                   <a class="overlay_img" href="images/gallery/residential/asse/full/asse_02.jpg" rel="lightbox" title=""></a>

                                                              <span class="overlay_title">Residential</span>

      </div>

      </div>

      </div>

      </li>

      <li data-id="id-3" class="brandidentity one-fourth">

      <div class="internal_page_item internal_page_item_gallery">

      <div class="overlay_a">

      <img src="images/gallery/residential/asse/thumb/asse_03.jpg" alt="0029" title="0029" />

      <div class="overlay">

                                                                   <a class="overlay_img" href="images/gallery/residential/asse/full/asse_03.jpg" rel="lightbox" title=""></a>

                                                              <span class="overlay_title">Residential</span>

      </div>

      </div>

      </div>

      </li>

      <li data-id="id-4" class="brandidentity one-fourth last">

      <div class="internal_page_item internal_page_item_gallery">

      <div class="overlay_a">

      <img src="images/gallery/residential/asse/thumb/asse_04.jpg" alt="0038" title="0038" />

      <div class="overlay">

      <a class="overlay_img" href="images/gallery/residential/asse/full/asse_04.jpg" rel="lightbox" title=""></a>

      <span class="overlay_title">Residential</span>

      </div>

      </div>

      </div>

      </li>

      <li data-id="id-5" class="brandidentity one-fourth">

      <div class="internal_page_item internal_page_item_gallery">

      <div class="overlay_a">

      <img src="images/gallery/residential/asse/thumb/asse_05.jpg" alt="0045" title="0045" />

      <div class="overlay">

      <a class="overlay_img" href="images/gallery/residential/asse/full/asse_05.jpg" rel="lightbox" title=""></a>

      <span class="overlay_title">Residential</span>

      </div>

      </div>

      </div>

      </li>

      <li data-id="id-6" class="digitalpainting one-fourth">

      <div class="internal_page_item internal_page_item_gallery">

      <div class="overlay_a">

      <img src="images/gallery/residential/asse/thumb/asse_06.jpg" alt="0054" title="0054" />

      <div class="overlay">

      <a class="overlay_img" href="images/gallery/residential/asse/full/asse_06.jpg" rel="lightbox" title=""></a>

      <span class="overlay_title">Residential</span>

      </div>

      </div>

      </div>

      </li>

      <li data-id="id-7" class="digitalpainting one-fourth">

      <div class="internal_page_item internal_page_item_gallery">

      <div class="overlay_a">

      <img src="images/gallery/residential/asse/thumb/asse_07.jpg" alt="0063" title="0063" />

      <div class="overlay">

      <a class="overlay_img" href="images/gallery/residential/asse/full/asse_07.jpg" rel="lightbox" title=""></a>

      <span class="overlay_title">Residential</span>

      </div>

      </div>

      </div>

      </li>

      <li data-id="id-8" class="logodesign one-fourth last">

      <div class="internal_page_item internal_page_item_gallery">

      <div class="overlay_a">

      <img src="images/gallery/residential/asse/thumb/asse_08.jpg" alt="0073" title="0073" />

      <div class="overlay">

      <a class="overlay_img" href="images/gallery/residential/asse/full/asse_08.jpg" rel="lightbox" title=""></a>

      <span class="overlay_title">Residential</span>

      </div>

      </div>

      </div>

      </li>

       

      </ul>

      <div class="clear"></div>

      </div>

      </div>

      </div>

      <!-- START COMMENTS -->

      <div id="comments">

      </div>

      <!-- END COMMENTS -->

      </div>

      <!-- END CONTENT -->

      <!-- START EXTRA CONTENT -->

      <!-- END EXTRA CONTENT -->

      </div>

      </div>

      <!-- END PRIMARY -->

        • 1. Re: Need help adding more images and hor. line
          es73 Level 2

          The horizontal line is crested by a stylesheet - you will find it in

          the following rule:

           

          .gallery-filters {
              border-bottom: 1px solid #CFCFCF;

              margin-bottom: 20px;

              overflow: hidden;

              padding-bottom: 5px;

          }

           

          the 1px bottom border just creates a horizontal line.

           

          To add a new line you could add the following code

           

          <div class="gallery-filters"> </div>

           


          1 person found this helpful