Results 1 to 5 of 5

Thread: [RESOLVED] Images from left to right inside a table

  1. #1

    Thread Starter
    Frenzied Member
    Join Date
    Jul 2004
    Posts
    1,202

    Resolved [RESOLVED] Images from left to right inside a table

    Hello,

    I was wondering if any of you can give me an example of how to get my image inside a table going from left to right only 5 images per line please.?


    Thanks in adance.
    come back and mark your original post as resoved if your problem is fixed

    Jamie Garland

  2. #2
    Addicted Member
    Join Date
    Sep 2005
    Posts
    150

    Re: Images from left to right inside a table

    Quote Originally Posted by Jamie_Garland View Post
    ...how to get my image inside a table going from left to right only 5 images per line please.?

    You can use some CSS syntax and HTML elements to achieve that. Have you tried it?

  3. #3

    Thread Starter
    Frenzied Member
    Join Date
    Jul 2004
    Posts
    1,202

    Re: Images from left to right inside a table

    I use this to display my record name but i want to show it in a table as im going to have a few categories.



    <?php while($row=mysql_fetch_array($res)) {?>
    <a href="image.php"><?php echo $row['name'] ?></a><br />
    <?php } ?>

    come back and mark your original post as resoved if your problem is fixed

    Jamie Garland

  4. #4

    Thread Starter
    Frenzied Member
    Join Date
    Jul 2004
    Posts
    1,202

    Re: Images from left to right inside a table

    Hello,

    This is my image gallery code:-

    .cf:before,
    .cf:after {
    content: "";
    display: table;
    }

    .cf:after{
    clear: both;
    }

    #full .container{
    max-width: 920px;
    background: #f0f0f0;
    padding: 10px;
    margin: 0 auto;
    }

    #full .gallery {
    width: 100%;
    }

    #full .gallery-item{
    float: left;
    background: #fff;
    width: 19%;
    margin: 1%;
    padding: 2%;
    padding-bottom: 5%;
    box-shadow: 1px 1px 3px rgba(0,0,0,.2);
    }

    #full .gallery-item img{
    width: 100%;
    }
    this is the gallery page

    <?php include('styles/top.php'); ?>

    <div id="full">

    <?php

    if($username){
    error_reporting(0);
    require_once('scripts/connection.php');
    mysql_select_db($database_phpimage, $phpimage);
    $id=$_GET['cid'];
    $qur="Select * from image where cid='$id'";
    $res=mysql_query($qur,$phpimage);


    ?>

    <div class="container">
    <div class="gallery cf">
    <div class="gallery-item">
    <?php while($row=mysql_fetch_array($res)){?>
    <img src="<?php echo $row['path']?>" /></img>
    <?php } ?>
    </div>
    </div>
    </div>


    <?php

    } else {
    echo "<p>You must be logged in to view this page.</p>";
    }

    ?>
    </div>




    <?php include('styles/bottom.php'); ?>



    the image below should be at the side of the other one but its showing below can anyone help please?.

    Name:  Capture.jpg
Views: 89
Size:  16.3 KB
    come back and mark your original post as resoved if your problem is fixed

    Jamie Garland

  5. #5
    Fanatic Member
    Join Date
    Jun 2008
    Posts
    1,023

    Re: Images from left to right inside a table

    you are assigning the float:left; to "#full .gallery-item" (which is, as I interpret the code, the image container), instead of assigning it to the actual image ("#full .gallery-item img")... why?

    As I understand, you may have mixed up #full .gallery-item and #full .gallery-item img

    because, you've given the code of the img to the container, instead of the image... you should change

    Code:
    #full .gallery-item{
    float: left;
    background: #fff;
    width: 19%;
    margin: 1%;
    padding: 2%;
    padding-bottom: 5%;
    box-shadow: 1px 1px 3px rgba(0,0,0,.2);
    }
    
    #full .gallery-item img{
    width: 100%;
    }
    to
    Code:
    #full .gallery-item img{
    float: left;
    background: #fff;
    width: 19%;
    margin: 1%;
    padding: 2%;
    padding-bottom: 5%;
    box-shadow: 1px 1px 3px rgba(0,0,0,.2);
    }
    
    #full .gallery-item{
    width: 100%;
    }
    There is absolutely nothing wrong with your code.

    Also, you should consider adding "clear:both;" after all of the images have been printed out (because you've used float.), otherwise, you may risk that the content coming afterwards may be a bit messed up.


    Alternatively, if I am mistaken... then you should consider that this may be the problem:

    Code:
    <div class="gallery-item">
    <?php while($row=mysql_fetch_array($res)){?>
    <img src="<?php echo $row['path']?>" /></img>
    <?php } ?>
    </div>
    Change to:

    Code:
    <?php while($row=mysql_fetch_array($res)){?>
    <div class="gallery-item">
    <img src="<?php echo $row['path']?>" /></img>
    </div>
    <?php } ?>
    Last edited by Justa Lol; May 21st, 2015 at 12:46 PM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width