list images horizontally, not vertically

[nyo]

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.

[Tino]

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 :/

[jacek]

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.

[nyo]

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

[jacek]

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

You need to change the CSS.

[Tino]

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.

[nyo]

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

[jacek]

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 />";
                    }
            ?>

[Tino]

Actually...

foreach ( $dirs as $files ) {

should then be

foreach ( $dirs as $file ) {

[nyo]

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

[jacek]

Could you post a screenshot ?

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

[Tino]

Or use

clear: both;

in the footer div?

[nyo]

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.