#1
  1. No Profile Picture
    The Absolute Total Noob!!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    18
    Rep Power
    0

    Question CSS, PHP, DIV, MYSQL, and Photos


    Ok...so I want to create a photo gallery with dynamic content and layout. The hardest part was formating the page to make a php script that would pull the data from the DB and lay it out in a table. But if I used a standard HTML Table tag then the layout would not be dynamic. I searched around and found this script...

    <style>
    div.float {
    float: left;
    }

    div.float p {
    text-align: center;
    }
    </style>

    <div class="float">
    <img src="image1.gif" width="100" height="100"
    alt="image 1" /><br />
    <p>caption 1</p>
    </div>

    <div class="float">
    <img src="image2.gif" width="100" height="100"
    alt="image 2" /><br />
    <p>caption 2</p>
    </div>

    <div class="float">
    <img src="image3.gif" width="100" height="100"
    alt="image 3" /><br />
    <p>caption 3</p>
    </div>


    This will make the pictures wrap to the next row if there was an overflow. How would I make it so that instead of an image wrap...it would just display the images in X amount of colums?

    I am new to CSS...but not HTML, I understand how the above script works...but I do not know enough code to figure the probem out myself. Thank you for your help.
  2. #2
  3. No Profile Picture
    The Absolute Total Noob!!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    18
    Rep Power
    0
    bump?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    56
    Rep Power
    11

    Need some more info really


    What do you mean by you'd like it to be dynamic?

    Do you have an example layout page you could show us?

    I'm just having trouble understanding exactly what it is you are trying to do.
  6. #4
  7. No Profile Picture
    The Absolute Total Noob!!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    18
    Rep Power
    0
    yeah. I a mean...I want it so that I will code certain rules into the source, and instead of haveing to go in and change my table every time I add a picture, it will simply add it in accourding to the rules. Does it help?
  8. #5
  9. No Profile Picture
    The Absolute Total Noob!!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    18
    Rep Power
    0
    I would just like it in two colums, in the order that I specified (no prob there...I just have to number the pictures in the mySQL table)
  10. #6
  11. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493
    Originally Posted by Nano2e
    I would just like it in two colums, in the order that I specified (no prob there...I just have to number the pictures in the mySQL table)
    Eh?
    Do you mean outputted HTML or actually in the database?

    Cheers,
    Jamie

    >_ skiFFie ? | Twitter

    __________________

    Let the might of your compassion arise to bring a quick end
    to the flowing stream of the blood and tears .....
    Please hear my anguished words of truth.

    __________________
  12. #7
  13. No Profile Picture
    The Absolute Total Noob!!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    18
    Rep Power
    0
    In outputted HTML. The database/php part is going to be easy. I just don't know much CSS code. Here is what I would like to do.

    Put in a while loop in my php code so that when there is more information in the database to retreive it will do so. Then...as it add data (pictures/captions) it will put the first picture and caption in the top left, next picture beside it, next picture below pic #1, and so on. But I would like my colums to be centered, and set up so that I could easily set the space between them.

    Hope that helps.
  14. #8
  15. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493
    This snip is untested, but >I think it should work OK. This outputs in a table, but is should be easy to fiddle around with to get it the way you want. If you want to use CCS, repace the table elements with yoru DIVs, and change the line marked to a <br />. HTH.
    You can see a working example at http://frankie.227net.com/MyPics/ , then select a month.
    PHP Code:
    <?php
    /* I assume you know how to write queries, so I am skipping this */

    // Set the amount of columns you want
    $cols 2;
    // Do your query stuff
    #
    # SELECT * FROM table
    #
    // GET THE TOTAL NUMBER OF ITEMS YOU EXPECT TO OUTPUT
    #
    # SELECT COUNT(id or something) FROM same_table_as_above
    #
    // $total = RESULT OF THE COUNT QUERY

    // DO SOME MATHS :-)
    $calc $total $cols;
    $calcs  $total - (floor($calc) * $cols);
    $cal $cols $calcs;

    // START CHECKING THE ROWS OUTPUTTED
        
    $i 1;
    // ECHO TABLE START
    echo '<table style="text-align: center;">
            <tr>'
    ;
        
    // RETURN YOUR FIRST QUERY

    while (/* QUERY RESULT */):


            echo 
    '<td>'$row['Yourpicture'] .'</td><td>'$row['Your caption'] .'</td>';    
                    if (
    is_int($i $cols)) :
                        echo 
    '</tr><tr>'// Change this line to <br style="clear:both;" />
                    
    endif;    
        
        
    $i++;
    endwhile;    
        
    // MAKE IT HTML COMPLIANT
                        
    $n 1;
        
    $y $cal;
            
    $tidy  =  '';
                while (
    $n <= $y):
                    
    $tidy .=  '<td>&nbsp;</td>';
                        
    $n++;
                endwhile;

    // CLOSE TABLE
    echo '</tr>
        </table>'
    ;    
            
    ?>
    Last edited by jabba_29; February 26th, 2004 at 04:41 PM. Reason: Error in code

    Cheers,
    Jamie

    >_ skiFFie ? | Twitter

    __________________

    Let the might of your compassion arise to bring a quick end
    to the flowing stream of the blood and tears .....
    Please hear my anguished words of truth.

    __________________
  16. #9
  17. No Profile Picture
    The Absolute Total Noob!!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    18
    Rep Power
    0

    Thumbs up


    From whatI've seen I think that may have done it! I will have to look it over and findout how to apply it. Thanks for your help!

    ~Nano2e

IMN logo majestic logo threadwatch logo seochat tools logo