Displaying images stored in a MySQL Database in a styled list with php and css

Question

I have a couple images stored in a database that I am trying to display in a styled list. The idea is when I call the images from the database the php code will generate the list inside the styled <div> element... unfortunately this is not the case. The list is generating, but it is not following any of my styles and the images are not displaying.

The image is showing it's border on the page with width and height, but there is the missing file icon in the center... When I go to the database, the file is clearly there, named and everything. Even when I type in the file_display.php?id=1 at the end of the URL the image appears...

The images are saved in the Database in a jpeg format, with the table excepting LONGBLOG data

Here is my code to get the images and display them in the list:

    <div class="template_container">
    <h2>Templates</h2>  
    <ul style="margin: 0 50px;">

        <?php   

            // Grab the data 
            $sql = "select * from templates";
            $result = mysql_query($sql) or die ("Could not access DB: " . mysql_error());
            while ($row = mysql_fetch_assoc($result))
            {
                echo "<li>";
                echo "<a class=\"caption" . "href=\"cart.php?id=<?=" . $row['id'] . "&action=add>";

                echo "<img src=\"http://URL-REMOVED.com/file_display.php?id=<?=" . $row['id'] . "\" alt=\"\" /><br />";
                echo "<span>";
                echo "<big>" . $row['name'] . "<br />";
                echo $row['description'];
                echo "</span>";
                echo "</li>";

            }

        ?>
    </ul>
</div>

and here is the css that is supposed to style the list:

.template_container {
    width: 100%;
    height: auto;
    border-top: 1px solid #e8e8e8;
    margin: 75px auto 25px auto;
    padding-top: 25px;
}

.template_container h2 {
    font-family: 'Podkova', serif;
    font-size: 58px;
    line-height: 66px;
    color: #2d9dc8; font-weight: normal;
    text-transform: uppercase;
    letter-spacing: -2px; 
    text-align: center;
    margin-bottom: 50px;
}

.template_container ul li { 
    list-style-type: none; 
    display: inline; 
    text-align: center;
    zoom:1; 
    *display:inline;
}

.template_container ul { vertical-align: inherit; }
.template_container li { margin-left: 25px;}
.template_container img { 
    width: 180px;
    margin-bottom: 50px; 
    box-shadow: 0px 0px 10px #888;
    -moz-box-shadow: 0px 0px 10px #888;
    -webkit-box-shadow: 0px 0px 10px #888;
    -khtml-box-shadow: 0px 0px 10px #888;
}

a.caption { 
    position: relative !important;
}
a.caption span { 
    background: #000; 
    background: rgba(0,0,0,0.8); 
    color: white !important; 
    display: none; 
    padding: 5px 10px !important; 
    text-align: center; 
    position: absolute !important;
    bottom: 0 !important; 
    left: 0 !important; 
}
a.caption:hover {
    text-decoration: none;
}

For those of you wondering about the <a class="caption"> and <span> elements within the list items, I have a javascript that displays those on hover.

UPDATE: I figured out my styling issues, I messed up and forgot to close the link and I accidentally added a <br /> at the end of the image tag, making it so the list wasn't inline.

However I am still unable to see my images... still looking for a solution on that...

Please use PDO or mysqli instead of the old mysql functions. — SomeKittens
– SomeKittens, Commented Aug 23, 2012 at 2:21

Boris Vasilyev · Accepted Answer · 2012-08-23 02:27:29Z

2

I think something is wrong with the image URL generation:

echo "<img src=\"http://URL-REMOVED.com/file_display.php?id=<?=" . $row['id'] . "\" alt=\"\" /><br />";

Why do you need the "< ? =" ? Why not just

echo "<img src=\"http://URL-REMOVED.com/file_display.php?id=" . $row['id'] . " alt=\"\" /><br />";

answered Aug 23, 2012 at 2:27

Boris Vasilyev

2433 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ty Bailey Over a year ago

Thank you for catching that lol, I didn't even mean to put that in there. However, unfortunately removing that did not work. The images are still cannot be see and they are still not styled in the list :(

Boris Vasilyev Over a year ago

Well, all I can say is something is wrong with URL anyway. The CSS doesn't seem to have any effect on image displaying. Maybe try to see the <img> tags generated on the page?

Ty Bailey Over a year ago

Actually, you were 100% correct on this, just not in the correct spot lol. I apologize for the confusion.

Vikram · Accepted Answer · 2012-08-23 02:26:52Z

0

Please refer:

http://en.wikipedia.org/wiki/Data_URI_scheme#Inclusion_in_HTML_or_CSS_using_PHP

answered Aug 23, 2012 at 2:26

Vikram

4,1828 gold badges47 silver badges71 bronze badges

1 Comment

Ty Bailey Over a year ago

Thank you for sharing this, but it did not help my situation.

Collectives™ on Stack Overflow

Displaying images stored in a MySQL Database in a styled list with php and css

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related