CODEWITHSUNDEEP
phpcssimageloopsvideo
ioan
ioan

Reputation: 295

Images loop and videos loop don't line up correctly

The videos don't line up with the images

I have td container where I use php to loop through a set of videos and a set of images. Each image and video are in a div with the same class, but for some reason the videos end up higher than the images. Any idea what causes this?

two PHP loops that output an html div for each image/video:

<td colspan="5" style="max-width: 1000px; overflow-x: auto;">
<?php
$fk = $db_table_row["images_fk"];
$image_row = find_images_by_id($fk);//get images from an sql table
for ($i = 1; $i < count($image_row)+1; $i++) {
    if($image_row[$i] != null){
        echo "<div id='media_wrap'><img src='{$image_row[$i]}' height='200'/>&nbsp</div>";
    }
}

$fk = $db_table_row["videos_fk"];
$video_row = find_videos_by_id($fk);//get videos from an sql table
for ($i = 1; $i < count($video_row)+1; $i++) {
    if($video_row[$i] != null){
        echo "<div id='media_wrap'><video width=\"270\" height=\"200\" controls><source src=\"{$video_row[$i]}\"></video>&nbsp</div>";

    }
}
?>
</td>

The wrap div css:

 #media_wrap{display: inline; white-space: nowrap; max-height: 200px;}

If I make 2 video or 2 image loops they line up perfectly. If I put the videos loop before the image loop then the images end up higher.

They are all set to 200 height, and are in the same id="media_wrap" div, so they should behave the same right?

EDIT: it was caused by having bootstrap in the header:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

I could take it out, but I might really need it for dropdown menus later :(

Upvotes: 0

Views: 88

Answers (2)

ioan
ioan

Reputation: 295

So on jsfiddle it worked with the bootstrap link, but when i copied the exact same code to my project it didn't work. I made sure i'm testing a 100% independent file that I can copy 100% in jsfiddle. even tried to put it in some of my other projects to make sure it's not being affected by anything that's no in jsfiddle.

In the end I just forced it to work with top: 0;

<?php $left = 0; ?>
        <img style="position: absolute; top: 0; left: <?php echo $left; $left+=205; ?>px;" src='http://placehold.it/200x200' height='200'/>
        <img style="position: absolute; top: 0; left: <?php echo $left; $left+=205; ?>px;" src='http://placehold.it/200x200' height='200'/>
        <img style="position: absolute; top: 0; left: <?php echo $left; $left+=205; ?>px;" src='http://placehold.it/200x200' height='200'/>
        <video width='270' height='200' style="position: absolute; top: 0; left: <?php echo $left; $left+=275; ?>px;" controls><source src='http://techslides.com/demos/sample-videos/small.mp4'></video>
        <video width='270' height='200' style="position: absolute; top: 0; left: <?php echo $left; $left+=275; ?>px;" controls><source src='http://techslides.com/demos/sample-videos/small.mp4'></video>
        <video width='270' height='200' style="position: absolute; top: 0; left: <?php echo $left; $left+=275; ?>px;" controls><source src='http://techslides.com/demos/sample-videos/small.mp4'></video>

thanks for the help Obsidian Age :D

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42354

A simple fix :)

You're setting max-height on the parent #media_wrap, when it needs to be applied to the children. You should define it in either #media_wrap img, #media_wrap video or #media_wrap * instead. Then you just need to float the two divs next to each other :) Note that neither display: inline or white-space: nowrap are necessary.

Also note that you're also defining two divs with the same ID, which is very bad practice. Instead, I recommend giving both of your divs a class of media_wrap instead of using it as an ID.

Finally, note that for questions pertaining to CSS, it helps to include a copy of the actual HTML output, rather than the code used to execute the output :)

I've created a fiddle with both images and videos forcibly scaled down in height, displayed next to each other. I also replaced your IDs with classes of the same name, and added a slight offset. The fiddle can be found here.

Hope this helps!

EDIT:

Based on your new comments, images, and code, I've got a slightly better idea of what you're trying to achieve. As such, I've slightly modified the code.

Note that you can't have two divs displayed next to each other in combination with a horizontal scrollbar. As such, I've combined both the images and video into one div.

Also, now white-space: nowrap is required ;)

New code: https://jsfiddle.net/85kd0wma/

Now images and videos have a fixed height, and will display next to each other with a horizontal scrollbar. Hopefully this is what you're after :)

Upvotes: 0

Related Questions