CSS, PHP, DIV, MYSQL, and Photos

Dev Shed Forums Sponsor:

February 23rd, 2004, 11:37 AM

Nano2e

The Absolute Total Noob!!

Join Date: Feb 2004

Location: Michigan

Posts: 18

Time spent in forums: 1 h 17 m 2 sec
Reputation Power: 0

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.

February 24th, 2004, 01:50 PM

Nano2e

The Absolute Total Noob!!

Join Date: Feb 2004

Location: Michigan

Posts: 18

Time spent in forums: 1 h 17 m 2 sec
Reputation Power: 0

bump?

February 24th, 2004, 05:47 PM

Glide

Contributing User

Join Date: May 2003

Posts: 56

Time spent in forums: < 1 sec
Reputation Power: 6

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.

February 26th, 2004, 11:43 AM

Nano2e

The Absolute Total Noob!!

Join Date: Feb 2004

Location: Michigan

Posts: 18

Time spent in forums: 1 h 17 m 2 sec
Reputation 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?

February 26th, 2004, 11:46 AM

Nano2e

The Absolute Total Noob!!

Join Date: Feb 2004

Location: Michigan

Posts: 18

Time spent in forums: 1 h 17 m 2 sec
Reputation 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)

February 26th, 2004, 03:50 PM

jabba_29

Back in HEL

Join Date: Feb 2002

Location: Finland

Posts: 8,910

Folding Points: 57777 Folding Title: Beginner Folder

Time spent in forums: 3 Months 4 Weeks 1 Day 11 h 6 m 5 sec
Reputation Power: 1693

Send a message via Google Talk to jabba_29

Quote:

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

# mdb4u | mobile movie database] | Please help to test and promote
# skiFFie | Home of the 'accessibility module' for Drupal
# Jamie Burns [me] Accessibility Module [drupal]
# guidelines | search | wap resources | not getting help | fold to cure

__________________

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.

__________________

February 26th, 2004, 04:06 PM

Nano2e

The Absolute Total Noob!!

Join Date: Feb 2004

Location: Michigan

Posts: 18

Time spent in forums: 1 h 17 m 2 sec
Reputation 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.

February 26th, 2004, 04:39 PM

jabba_29

Back in HEL

Join Date: Feb 2002

Location: Finland

Posts: 8,910

Time spent in forums: 3 Months 4 Weeks 1 Day 11 h 6 m 5 sec
Reputation Power: 1693

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

February 27th, 2004, 10:16 AM

Nano2e

The Absolute Total Noob!!

Join Date: Feb 2004

Location: Michigan

Posts: 18

Time spent in forums: 1 h 17 m 2 sec
Reputation Power: 0

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

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: