Web Analytics Made Easy -
StatCounter Making a picture gallery - CodingForum

Announcement

Collapse
No announcement yet.

Making a picture gallery

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Making a picture gallery

    Hello

    Im new to coding and want to make a picture gallery. I have followed the link below, but I can't get it centered on the page or move it to where I want it to go:

    CSS Image Gallery

    Please can someone help?

    Thanks

  • #2
    Hi there brunel,

    and a warm welcome to these forums.

    In order to help you, members would need to see your problematic code.


    coothead
    ~ the original bald headed old fart ~

    Comment


    • #3
      Well, like most of the outdated and ineptly slopped together rubbish from W3Fools, it's really going to fight you on that with all the DIV for nothing and broken code methodologies... particularly since said example has its cranium wedged up 1997's rectum with those target="_blank" attributes. (A fair warning sign that whoever wrote that likely has no business telling anyone how to write websites!)

      First step would be to clean it up to use semantic markup and axe all the pointless mindless dumbass "classes for nothing". A gallery is little more than a list of images, so let's put it all in a UL with LI instead of meaningless DIV. I'd also put the description text inside the anchor as a span, so that the entire area is clickable, not just the image.

      Code:
      <ul class="gallery">
      	<li>
      		<a href="fjords.jpg">
      			<img src="fjords.jpg" alt="Fjords" width="180" height="120">
      			<span>Add a description of the image here</span>
      		</a>
      	</li><li>
      		<a href="forest.jpg">
      			<img src="forest.jpg" alt="Forest" width="180" height="120">
      			<span>Add a description of the image here</span>
      		</a>
      	</li><li>
      		<a href="lights.jpg">
      			<img src="lights.jpg" alt="Northern Lights" width="180" height="120">
      			<span>Add a description of the image here</span>
      		</a>
      	</li><li>
      		<a href="mountains.jpg">
      			<img src="mountains.jpg" alt="Mountains" width="180" height="120">
      			<span>Add a description of the image here</span>
      		</a>
      	</li>
      </ul>
      From there, for style we strip bullets off the list, set the LI to display:inline which basically strips styling off them, then set the anchors to inline-block so we can apply margin height-wise and side paddings or dimensions if so desired. With the LI as inline and A as inline-block, you can use text-align to center them -- your final goal.

      Oh, and if we're going to show the images smaller with the CSS AND say width and height in the markup, just say the final width and height in the markup!

      Code:
      .gallery {
      	list-style:none;
      	text-align:center;
      }
      
      .gallery li {
      	display:inline;
      	vertical-align:top;
      }
      
      .gallery a {
      	display:inline-block; 
      	vertical-align:top;
      	width:180px;
      	margin:0 0.4em 0.8em; /* adjust as you like */
      	text-decoration:none;
      	border:1px solid #CCC;
      }
      
      .gallery a:active,
      .gallery a:focus,
      .gallery a:hover {
      	background:#EEE;
      	border-color:#777;
      }
      
      .gallery img {
      	display:block; /* prevents oddball spacing issues */
      }
      
      .gallery span {
      	display:block;
      	padding:1em;
      }
      Would be the appropriate CSS. I used EM instead of pixels so the padding changes with the layout size -- ballparked the values, as the comment says adjust as desired.

      You need to scale it to a certain width or move it someplace with positioning, target the ul.gallery for that.

      Careful with W3Schools, their reference is barely even close to correct, and their tutorials and examples are some of the most misleading, poorly written, and just plain outdated trash out there.
      Last edited by deathshadow; Oct 4, 2016, 05:28 AM.
      Walk the dark path, sleep with angels, call the past for help.
      https://cutcodedown.com
      https://medium.com/@deathshadow

      Comment


      • #4
        Thanks for the help, I managed to get it to work! I put a border around my pictures as well.

        Comment

        Working...
        X