Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3

Thread: Gallery

  1. #1
    Junior Member
    Join Date
    Sep 2011
    Posts
    12
    Member #
    29358
    I am working on a photo gallery, but when I link my images, my images are not showing up. I've made sure that my images are linked to the images folder in my main directory and still nothing. I am not too sure if I did something wrong in my CSS or HTML. I know I have some extra <div>, I am going to get rid of them later once I get everything up and running.
    (This is how its showing up)

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!--
    Design by Free CSS Templates
    http://www.freecsstemplates.org
    Released for free under a Creative Commons Attribution 2.5 License
    
    Name      : Beach Sunset
    Description: A two-column, fixed-width design for 1024x768 screen resolutions.
    Version    : 1.0
    Released  : 20090416
    
    -->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Gallery</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    <body>
    <div id="wrapper">
    
        <div id="header">
            <div id="menu">
                <ul>
                    <li class="current_page_item"><a
    
    href="index.html">Home</a></li>
                    <li><a href="contact.html">Contact</a></li>
    
                    <li><a href="guestbook.html">Guestbook</a></li>
    
                </ul>
            </div>
            <!-- end #menu -->
    
        </div>
        <!-- end #header -->
        <div id="logo">
            <h1><a href="index.html">Gallery </a></h1>
        </div>
        <hr />
        <!-- end #logo -->
    <!-- end #header-wrapper -->
    
    <div id="page">
        <div id="content">
            <div class="post">
                <h2 class="title">Portfolio</h2>
                <div class="entry">
    <div class="row">
            <a href="images/gallery_thumbnail_1.gif">
            <img src="images/gallery_thumbnail_1.gif" alt="Klematis" /></a>
            <a href="images/gallery_thumbnail_2.gif">
                <img src="images/gallery_thumbnail_2.gif" alt="Klematis" /></a>
            <a href="images/gallery_thumbnail_3.gif">
                <img src="images/gallery_thumbnail_3.gif" alt="Klematis" /></a>
            <a href="images/gallery_thumbnail_4.gif">
                <img src="images/gallery_thumbnail_4.gif" alt="Klematis" /></a>
                <a href="images/gallery_thumbnail_5.gif">
                <img src="images/gallery_thumbnail_5.gif" alt="Klematis" /></a>
                <a href="images/gallery_thumbnail_1.gif">
                <img src="images/gallery_thumbnail_1.gif" alt="Klematis" /></a>
          </div>
    
    <div class="row">
            <a href="images/gallery_thumbnail_1.gif">
            <img src="images/gallery_thumbnail_1.gif" alt="Klematis" /></a>
            <a href="images/gallery_thumbnail_2.gif">
                <img src="images/gallery_thumbnail_2.gif" alt="Klematis" /></a>
            <a href="images/gallery_thumbnail_3.gif">
                <img src="images/gallery_thumbnail_3.gif" alt="Klematis" /></a>
            <a href="images/gallery_thumbnail_4.gif">
                <img src="images/gallery_thumbnail_4.gif" alt="Klematis" /></a>
                <a href="images/gallery_thumbnail_5.gif">
                <img src="images/gallery_thumbnail_5.gif" alt="Klematis" /></a>
                <a href="images/gallery_thumbnail_1.gif">
                <img src="images/gallery_thumbnail_1.gif" alt="Klematis" /></a>
          </div>
    
    <div class="row">
            <a href="images/gallery_thumbnail_1.gif">
            <img src="images/gallery_thumbnail_1.gif" alt="Klematis" /></a>
            <a href="images/gallery_thumbnail_2.gif">
                <img src="images/gallery_thumbnail_2.gif" alt="Klematis" /></a>
            <a href="images/gallery_thumbnail_3.gif">
                <img src="images/gallery_thumbnail_3.gif" alt="Klematis" /></a>
            <a href="images/gallery_thumbnail_4.gif">
                <img src="images/gallery_thumbnail_4.gif" alt="Klematis" /></a>
                <a href="images/gallery_thumbnail_5.gif">
                <img src="images/gallery_thumbnail_5.gif" alt="Klematis" /></a>
                <a href="images/gallery_thumbnail_1.gif">
                <img src="images/gallery_thumbnail_1.gif" alt="Klematis" /></a>
          </div>
    
    <div class="row">
            <a href="images/gallery_thumbnail_1.gif">
            <img src="images/gallery_thumbnail_1.gif" alt="Klematis" /></a>
            <a href="images/gallery_thumbnail_2.gif">
                <img src="images/gallery_thumbnail_2.gif" alt="Klematis" /></a>
            <a href="images/gallery_thumbnail_3.gif">
                <img src="images/gallery_thumbnail_3.gif" alt="Klematis" /></a>
            <a href="images/gallery_thumbnail_4.gif">
                <img src="images/gallery_thumbnail_4.gif" alt="Klematis" /></a>
                <a href="images/gallery_thumbnail_5.gif">
                <img src="images/gallery_thumbnail_5.gif" alt="Klematis" /></a>
                <a href="images/gallery_thumbnail_1.gif">
                <img src="images/gallery_thumbnail_1.gif" alt="Klematis" /></a>
          </div>
    
    <div class="row">
            <a href="images/gallery_thumbnail_1.gif">
            <img src="images/gallery_thumbnail_1.gif" alt="Klematis" /></a>
            <a href="images/gallery_thumbnail_2.gif">
                <img src="images/gallery_thumbnail_2.gif" alt="Klematis" /></a>
            <a href="images/gallery_thumbnail_3.gif">
                <img src="images/gallery_thumbnail_3.gif" alt="Klematis" /></a>
            <a href="images/gallery_thumbnail_4.gif">
                <img src="images/gallery_thumbnail_4.gif" alt="Klematis" /></a>
                <a href="images/gallery_thumbnail_5.gif">
                <img src="images/gallery_thumbnail_5.gif" alt="Klematis" /></a>
                <a href="images/gallery_thumbnail_1.gif">
                <img src="images/gallery_thumbnail_1.gif" alt="Klematis" /></a>
          </div>
     
    </div>
    <!-- end #page -->
    
    <div id="footer">
        <p>Copyright (c) 2011 Starr. All rights reserved. Design by <a
    
    href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
    </div>
    <!-- end #footer -->
    </div>
    </body>
    </html>
      
    Code:
    /*
    Design by Free CSS Templates
    http://www.freecsstemplates.org
    Released for free under a Creative Commons Attribution 2.5 License
    */
    
    body {
        margin-top: 25px;
        padding: 0;
        background: #000000;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #837669;
    }
    
    h1, h2, h3 {
        margin: 0;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-weight: normal;
        color: #649632;
    }
    
    h1 { font-size: 44px; }
    
    h2 { font-size: 20px; }
    
    h3 { }
    
    p, ul, ol {
        margin-top: 0;
        line-height: 240%;
        text-align: justify;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 11px;
    }
    
    ul, ol { }
    
    blockquote { }
    
    a { color: #CE4113; }
    
    a:hover { text-decoration: none; }
    
    a img {
        border: none;
    }
    
    img.left {
        float: left;
        margin: 7px 30px 0 0;
    }
    
    img.right {
        float: right;
        margin: 7px 0 0 30px;
    }
    
    hr { display: none; }
    
    .list1 {
    }
    
    .list1 li {
        float: left;
        line-height: normal;
    }
    
    .list1 li img {
        margin: 0 30px 30px 0;
    }
    
    .list1 li.alt img {
        margin-right: 0;
    }
    
    #wrapper {
        width: 900px;
        margin: 0 auto;
        background: #110E0F url(images/img02.gif) no-repeat left top;
    }
    
    /* Header */
    
    #header-wrapper {
    }
    
    #header {
        width: 900px;
        height: 50px;
        margin: 0 auto;
        background: url(images/img01.gif) no-repeat left top;
    }
    
    /* Menu */
    
    #menu {
        float: left;
        width: 900px;
        height: 100px;
    }
    
    #menu ul {
        margin: 0;
        padding: 17px 0 0 20px;
        list-style: none;
        line-height: normal;
    }
    
    #menu li {
        display: block;
        float: left;
    }
    
    #menu a {
        display: block;
        float: left;
        margin-right: 5px;
        padding: 0px 15px;
        text-decoration: none;
        font: 14px Georgia, "Times New Roman", Times, serif;
        color: #FFFFFF;
    }
    
    #menu a:hover { text-decoration: underline; }
    
    #menu .current_page_item a {
        color: #FFFFFF;
    }
      
    /* Page */
    
    #page {
        width: 840px;
        margin: 0 auto;
        padding: 30px 30px 0px 30px;
    }
    
    /** LOGO */
    
    #logo {
        width: 900px;
        height: 230px;
        margin: 0 auto;
    }
    
    #logo h1, #logo p {
        margin: 0;
        padding: 0 0 0 30px;
        line-height: normal;
    }
    
    #logo h1 {
        float: left;
        padding-top: 150px;
    }
    
    #logo h1 a {
        text-decoration: none;
        text-transform: lowercase;
        color: #FFFFFF;
    }
    
    #logo h1 a:hover { text-decoration: underline; }
    
    #logo p {
        padding: 170px 0 0 30px;
        font: italic 13px Georgia, "Times New Roman", Times, serif;
        color: #FFFFFF;
    }
    
    #logo p a {
        text-decoration: none;
        color: #FFFFFF;
    }
    
    #logo p a:hover { text-decoration: underline; }
    
    /* Content */
    
    #content {
        float: left;
        width: 570px;
    }
    
    /* Post */
    
    .post {
        margin-bottom: 25px;
    }
    
    .post .title {
        height: 30px;
        margin-bottom: 3px;
        border-bottom: 1px dashed #24130F;
        color: #FFFFFF;
    }
    
    .post .date {
        float: right;
        margin-top: -48px;
        padding: 0 20px;
        border: 1px dashed #24130F;
        background: #24130F;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-weight: normal;
        font-size: 18px;
        color: #F1B566;
    }
    
    .post .meta {
        margin: -30px  0 3px 25px;
        padding: 2px 30px 2px 0px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: normal;
        font-size: 10px;
        color: #B6ACA2;
    }
    
    .post .meta a { color: #B6ACA2; }
    
    .post .entry {
        padding: 20px 0;
    }
    
    .post .links {
        margin: 0 250px 0 0;
        padding: 0 0 0 0px;
    }
    
    .post .links .comments {
    }
    
    .post .links .permalink {
        padding-left: 17px;
    }
     
    /* Footer */
    
    #footer {
        width: 900px;
        margin: 0 auto;
        padding: 0;
        height: 50px;
        background: url(images/img04.gif) no-repeat left top;
    }
    
    #footer p {
        margin: 0;
        padding: 20px 0;
        text-align: center;
        line-height: normal;
        color: #FFFFFF;
    }
    
    #footer a {
    }
    #leftFloat
    {
      float: left;
      width: 100px;
    }
    
    #rightFloat
    {
      float: right;
      width: 100px;
    }

  2.  

  3. #2
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    Everything looks good in the HTML, so it's sorta hard to troubleshoot if you don't put your site up. Meanwhile, try this:
    <img src="../images/gallery_thumbnail_1.gif" alt="Klematis" />
    While you're at it, drop your file into the HTML validator, it will tell you some problems you might have.
    Ronald Roe and m3n0tu18 like this.
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  4. #3
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times

    Gallery

    You spelt 'just' wrong. Someone's not proof reading their spam

    My Web Site:
    brandwebdesign.ca
    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link. Some of us are really insecure and need those likes so that we feel important and smart, so come on, help us out, huh?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:51 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com