BorysSokolov Posted February 4, 2013 Share Posted February 4, 2013 I have several images in a directory, which I would like to output(in an organized way) to the page. I've tried reading all the directory contents, and loading their names into an array to display the images using HTML, but I can't for the life of me figure out how to then position the pictures correctly in CSS. Here's the code: <?php $dirLoc = 'myWebsite/galleryPics'; $handle = opendir($dirLoc); while($readDir = readdir($handle)){ if($readDir != '.' && $readDir != '..'){ $pic[] = $readDir; } } foreach($pic as $k){ echo "<div class = \"picsDiv\">"; echo "<img src = \"$dirLoc/$k\" height = \"100px\" width = \"100px\"/></div>"; } ?> <html> <head> <style type = "text/css"> .picsDiv {width:150px; height:150px; border:1px solid red; background-color:grey;} img {position:relative; top:50%; left:50%; margin-top:-50px; margin-left:-50px;} </style> </head> </html> Thank you in advance for any feedback. Quote Link to comment https://forums.phpfreaks.com/topic/274030-displaying-images-from-array-using-phphtml/ Share on other sites More sharing options...
requinix Posted February 4, 2013 Share Posted February 4, 2013 What is "correctly" supposed to be? How does it look now and how do you want it to look? Quote Link to comment https://forums.phpfreaks.com/topic/274030-displaying-images-from-array-using-phphtml/#findComment-1410126 Share on other sites More sharing options...
BorysSokolov Posted February 5, 2013 Author Share Posted February 5, 2013 What is "correctly" supposed to be? How does it look now and how do you want it to look? At the moment the images are positioned in a single, straight, vertical column, with no spaces in between them. I'd like them, however, to run left to right, skipping to the next line once there's no more space, with some space separating them; like a typical grid layout. Quote Link to comment https://forums.phpfreaks.com/topic/274030-displaying-images-from-array-using-phphtml/#findComment-1410130 Share on other sites More sharing options...
Christian F. Posted February 5, 2013 Share Posted February 5, 2013 Float: left would do that for you, on the div class. Quote Link to comment https://forums.phpfreaks.com/topic/274030-displaying-images-from-array-using-phphtml/#findComment-1410134 Share on other sites More sharing options...
BorysSokolov Posted February 5, 2013 Author Share Posted February 5, 2013 Float: left would do that for you, on the div class. Thanks, worked like a charm . Quote Link to comment https://forums.phpfreaks.com/topic/274030-displaying-images-from-array-using-phphtml/#findComment-1410146 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.