Horizontally sequential images with text on top? Is it possible??

[squarkman]

Greetings:

I am displaying sequential thumbnails on a web page with text on top. Right now they follow each other vertically down the page. I want them to follow each other horizontally across the page. Can this be done given that the text has to go on top of the image?

Here's the code fragment that displays the text and image...

echo "$i. $file <br />";
echo "<img src=$path/$file width=100><br />";

Please see attachment if it goes thru.

Thanks for any help with this impossible task.
Rocky

 

[BillyRayPreachersSon]

How is your page coded? If you're using tables for layout, you should have no problem. If you're not, you'd need to use floated containers around each text/image combo, e.g.:

.textWithCaption {
   float: left;
}

...

<div class="textWithCaption">
   <p>The caption</p>
   <img ...>
</div>

<div class="textWithCaption">
   <p>The caption</p>
   <img ...>
</div>

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[squarkman]

Hi and thanks,
It's coded as follows...
Will your technique work with PHP coding below?
--------------
// Open a known directory
$sub = ($_GET['dir']);
$path = 'gallery';
$path = $path . "$sub";
$dh = opendir($path);
$i=1;
while (($file = readdir($dh)) !== false) {
if($file != "." && $file != "..") {
if (substr($file, -4, -3) =="."){
echo "$i. $file <br />"; //filename
echo "<img src=$path/$file width=100><br />";
}else{
echo "$i. <a href='?dir=$sub/$file'>$file</a><br />";
}
$i++;
}
}
closedir($dh);
// End of Open a known directory

---------------------

 

[squarkman]

Here was my attempt at integration your idea...
------------------
// Open a known directory
$sub = ($_GET['dir']);
$path = 'gallery';
$path = $path . "$sub";
$dh = opendir($path);
$i=1;
while (($file = readdir($dh)) !== false) {
if($file != "." && $file != "..") {
if (substr($file, -4, -3) =="."){


echo ".textWithCaption {float: left;}";

echo "<div class='textWithCaption'>";

echo "$i. $file <br />";

echo "<img src=$path/$file width=100><br />";

echo "</div>";

}else{
echo "$i. <a href='?dir=$sub/$file'>$file</a><br />";
}
$i++;
}
}
closedir($dh);
// End of Open a known directory
-------------------

 

[ChrisHunt]

Will your technique work with PHP coding below?

This is an HTML forum. If you write your PHP code to generate HTML like that set out by Dan (and put his bit of CSS into your stylesheet), it should work.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[BillyRayPreachersSon]

Don't forget to clear your floating containers, either... look into the "clear:left" CSS.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]