Question

I write an image gallery and I don’t use any libraries. I upload jpg files from the specific directory. I want assemble uploaded “uniq_image” images into one long horizontal image “moving_image” in order to scroll them together

The css file:

//the common long horizontal image that I want to assemble from uniq_images
#moving_image  {
    background-repeat: no-repeat; 
    position: relative;
    border:1px dashed red;
    width: 420px;
    height: 130px;
    left: 10px;
    overflow:hidden;
}
//the style for each uploaded image from the file
#uniq_image {
    background-repeat: no-repeat;
    border:1px solid blue;
    width: 150px;
    height: 120px;
    overflow:hidden;
}

The html file with php upload code inside it:

....
<td width ="420" height="130" overflow="hidden">
     <div id= "moving_image" >
         <?php
             $img_folder = 'picture';
             $dir = dir($img_folder);
             while (($file = $dir->read()) !== false){
                 echo '<img src="'.$img_folder."/".$file.'" style="uniq_image" >';
             }
            $dir->close();
          ?>
      </div>
<td>

What do I miss here? Thanks.

Answer 1

You’re missing only the basics it seems.

You should define a class style with .uniq_image. #uniq_image is a rule for an ID and you may not have multiple elements with the same ID.

And change style="uniq_image" to class="uniq_image". The style property is for defining inline style rules.

There may be other issues as well, but start with these changes. Also please consider some more reading before going into implementing stuff like this, because you have everything mixed up.