BetterPHP

Hi,

I am following a tutorial from PHPacademy.org about showing images in a directory; a very simple image gallery. Here is the link to the tutorial: http://www.youtube.com/watch?v=b4JrEYTfm5M

I have a small issue that images overlap with the footer, I asked this on their forum but couldn't get a reply that's why I am asking here.

I want to list images horizontally, not vertically, so that I will have 2 or 3 images in one row on my small screen. I tried to add some style but the gallery overlaps the footer. Here are the codes I am using:

The file where I will display images:

images.php

<?php include 'includes/header.php'; ?>
<div id="title">Images</div>
<div id="content">
        <?php
                $dir = "images/gallery/";
                if ($opendir = opendir($dir)) 
                {
                        while (($file = readdir($opendir)) !== FALSE) 
                        {
                                if ($file!="."&&$file!="..")
                                        echo "<div class='images'><a href='$dir/$file'><img src='$dir/$file' width='100' height='100' alt='' /></a></div>";
                        }
                }
        ?>
</div>
<?php include 'includes/footer.php'; ?>

footer.php

<div id="footer">
        <div class="copy">© <?php echo date('Y'); ?> <a href="index.php"><?php sitename(); ?></a></div>
</div>
</body>
</html>

style.css

body,div,h1,h2,hr{padding:0;margin:0}
body{background-color:#dad3c2}
body{font-family:Tahoma,Arial;font-size:medium;color:#000}
body a{text-decoration:none}
p{margin:0;padding:5px 5px 5px 5px;font-size:small;color:#34220C}
img{border-style:none;vertical-align:middle}
label{padding:5px 0 10px 5px;font-size:small;color:#34220C}
#header{text-align:center}
#logo{margin:5px 5px 5px 5px;padding:5px 0 5px 0;background-color:#b73406;border:5px solid white}
#welcome{margin:0 5px 0 5px;padding:5px 0 5px 0;border:5px solid white;background-color:#382d2b;color:#f2bb00;text-align:center;font-weight:bold;text-shadow:1px 1px #000}
#content{margin:0 5px 0 5px;border:5px solid white;background-color:#cfc8b7}
#title{margin:0 5px 5px 5px;padding:5px 0 5px 5px;border:5px solid white;background-color:#382d2b;font-weight:bold;color:#f2bb00}
#title a{color:#f2bb00}
#footer{margin:5px 5px 5px 5px;padding:5px 5px 5px 5px;background-color:#cfc8b7;color:#624117;text-align:center;font-size:small}
#footer a{color:#624117;text-decoration:none}
#flogos{padding:5px 5px 5px 5px}
.copy{padding:5px 0 5px 0}
.credit{padding:5px 0 5px 0}
.lang{margin:5px 5px 0 5px;padding:5px 0 5px 25px;background-color:#b73406;border:5px solid white}
.langtext{padding:0 0 0 20px;color:#fff;font-weight:bold;text-shadow:1px 1px #000}
.page{padding:10px 0 10px 25px;font-weight:bold;background-color:#b73406;color:#fff;border-bottom:2px solid #cfc8b7}
.pagel{padding:10px 0 10px 25px;font-weight:bold;background-color:#b73406;color:#fff}
.center{text-align:center}
.textbold{font-weight:bold}
.images{padding:10px 10px 0 10px;float:left}

It seems left float on .images doesn't work properly. I can't see what I am doing wrong. Thanks for any help.

Just commenting on the PHP code for now, you really should just use scandir there.

$dirs = scandir('images/');

// gets rid of the . and ..
unset($dirs[0], $dirs[1]);

foreach ( $dirs as $dir ) {
    // echo image
}

I really don't understand why Alex uses such a complicated method in that tutorial :/

If you use

div.images { float:left; }

on the images it should make them go across the screen

then you need to put them in a wrapper div that has a fixed width to get the number in each row right.

Shall I use this one?

$dirs = scandir('gallery/');
		unset($dirs[0], $dirs[1]);
		if ($opendir = opendir($dirs)) 
		{
			while (($file = readdir($opendir)) !== FALSE) 
			{
				foreach ( $dirs as $dir )
					echo "<img src='$dir/$file' width='200' height='200' alt='Melek Apart Hotel Resim' /><br /><br />";
			}
		}

It gives the following warning:

Warning: opendir() expects parameter 1 to be string, array given in C:\Apache2\htdocs\resimler1.php on line 8

I know I cannot see some very obvious things, that's why I am a newbie

Your php was fine, well it uses an outdated method as Tino said, but fine.

You need to change the CSS.

The PHP worked but can be done better using what I did. So basically you'd get rid of what you had and replace it with what I gave.

Or just leave it and be satisfied with it, because it works perfectly fine

But yes, this is a CSS thing. I would do what Jacek did and see what you get.

Tino wrote:The PHP worked but can be done better using what I did. So basically you'd get rid of what you had and replace it with what I gave.

Or just leave it and be satisfied with it, because it works perfectly fine

But yes, this is a CSS thing. I would do what Jacek did and see what you get.

So, I have this code now:

<?php
		$dirs = scandir('gallery/');
		unset($dirs[0], $dirs[1]);
		foreach ( $dirs as $dir ) {
					echo "<img src='$dirs/$file' width='200' height='200' alt='Melek Apart Hotel Resim' /><br />";
			
		}
	?>

Gives this:

Notice: Undefined variable: file in C:\Apache2\htdocs\resimler1.php on line 9

It should be

    <?php
                    $dirs = scandir('gallery/');
                    unset($dirs[0], $dirs[1]);

                    foreach ( $dirs as $files ) {
                             echo "<img src='gallery/$file' width='200' height='200' alt='Melek Apart Hotel Resim' /><br />";
                    }
            ?>

Actually...

foreach ( $dirs as $files ) {

should then be

foreach ( $dirs as $file ) {

jacek wrote:If you use

div.images { float:left; }

on the images it should make them go across the screen

then you need to put them in a wrapper div that has a fixed width to get the number in each row right.

Jacek,

All the code and files I am using are given in the first post. I have .images{padding:10px 10px 0 10px;float:left} in my css file, images do align left but they get overlapped with the footer.

I want to cry

Could you post a screenshot ?

Can you not use use the margin property to make things not overlap ?

Or use

clear: both;

in the footer div?

Tino wrote:Or use

clear: both;

in the footer div?

That one seems to be the part of the solution. I added that to footer and it doesn't overlap anymore. There is a small issue left and I guess I can solve it with CSS. Thank you very much for your ongoing help.