Could you please explain me why the 2nd, 3rd and 4th images in this jsfiddle get smaller and smaller in size?
http://jsfiddle.net/FdhL6/
Here is the HTML from the JSFiddle.
<div id="album">
<table border="1">
<tr>
<td><img src="http://i.imgur.com/dj7aqdo.jpg"/></td>
<td><img src="http://i.imgur.com/dj7aqdo.jpg"/></td>
<td><img src="http://i.imgur.com/dj7aqdo.jpg"/></td>
<td><img src="http://i.imgur.com/dj7aqdo.jpg"/></td>
<td><img src="http://i.imgur.com/dj7aqdo.jpg"/></td>
</tr>
<tr>
<td>Caption 1</td>
<td>Caption 2</td>
<td>Caption 3</td>
<td>Caption 4</td>
<td>Caption 5</td>
</tr>
</table>
</div>
Here is the CSS.
#album {
overflow: auto;
}
#album td {
width: 40%;
}
#album img {
width: 100%;
}
I am trying to make a photo album with a horizontal scrollbar in the #album div. I want each image to be 40% of the width of the page. Now, with this width, only two and a half image would fit in the page. I want a scrollbar to appear for the remaining pictures in the #album div. The #album div should not exceed the width of the page.
Don't use tables for this. They present their own problems.
http://jsfiddle.net/michaelburtonray/FdhL6/2/
HTML
<div id="album">
<ul class="stage">
<li class="image-wrapper">
<img src="http://i.imgur.com/dj7aqdo.jpg"/>
<span>Caption 1</span>
<li class="image-wrapper">
<img src="http://i.imgur.com/dj7aqdo.jpg"/>
<span>Caption 2</span>
<li class="image-wrapper">
<img src="http://i.imgur.com/dj7aqdo.jpg"/>
<span>Caption 3</span>
<li class="image-wrapper">
<img src="http://i.imgur.com/dj7aqdo.jpg"/>
<span>Caption 4</span>
<li class="image-wrapper">
<img src="http://i.imgur.com/dj7aqdo.jpg"/>
<span>Caption 5</span>
</ul>
</div>
CSS
#album {
overflow: auto;
}
ul.stage {
padding-left: 0;
white-space: nowrap;
width: 200%;
}
li.image-wrapper {
display: inline-block;
width: 20%;
}
img {
display: block;
width: 100%;
}
span {
display: block;
}
AS j08691 said, you are using 200% width of 100%, that is what is causing your results to be so wonky. You should only be allocating 100% of your width otherwise your overflow your container, jsFiddle might be compensating for this and causing the images to get smaller.
Related
I'm struggling to set custom widths of div elements inside a table cell. Various questions (e.g.) talk about position and display parameters, and I've tried too many variation to describe without success. I'd greatly appreciate it if someone could either assist to get this minimal example working, or refer me to a specific previous answer that does actually solve this problem. Thanks in advance.
In the example I want to set the divs as horizontal bars to reflect the values. The table is fixed with and all div ancestors set to width: 100%.
.bar-column {
width: 100%;
}
.bar {
/* some other tested parameters.. */
/* position: absolute; */
/* display: block; float: left; */
/* display: table-cell; */
position: relative;
display: inline-block;
height: 100%;
background-color: yellow;
}
tr { width: 100%; }
<table width="600px" style="background-color: #ddd;">
<tr>
<th>Value</th>
<th class="bar-column">Name and bar</th>
</tr>
<tr>
<td>20</td>
<td class="bar-column">
<div width="50%" class="bar"><a class="link" href="#">twenty</a></div>
</td>
</tr>
<tr>
<td>40</td>
<td class="bar-column">
<div width="100%" class="bar"><a class="link" href="#">forty</a></div>
</td>
</tr>
<tr>
<td>10</td>
<td class="bar-column">
<div width="25%" class="bar"><a class="link" href="#">ten</a></div>
</td>
</tr>
</table>
The problem is using width="100%" for div when you need to use style="width:100%"
So for following line:
<div width="100%" class="bar"><a class="link" href="#">twenty</a></div>
Should be:
<div style="width:100%" class="bar"><a class="link" href="#">twenty</a></div>
Apply that for lines for the div containing 50% and 25%
I need to convert this layout or look that is made with a table in html to Divs, I believe. The table's structure is two columns with an image on one side and text associated with the image on the other. When squeezed small enough (like on a mobile device) I need the columns to go from two to stacked or one column. I don't know whether I need to use breakpoints and never have... or if there's any other better responsive solution to replicate the structure I have included below. This needs to be made in the Wordpress Divi theme's text editor.
Right now I am trying to make this work using Materialize (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css) within this codepen. I have no idea if materialize will even work within wordpress...
Codepen
https://codepen.io/robmatthews/pen/qebwor
<table height="557" style="width: 800px; border-color: #ffffff; background-color: #ffffff; height: 702px; margin-left: auto; margin-right: auto;" border="#fff">
<tbody>
<tr>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<h2><img src="http://projectorbach.com/wp-content/uploads/2019/07/clipboard.png" width="174" height="171" alt="" class="wp-image-35671 alignnone size-full" style="display: block; margin-left: auto; margin-right: auto;" /></h2>
<h2 style="text-align: center;"><span>Create Team Rosters</span><span></span></h2>
<div class="col"></div>
</td>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<div class="col">
<div class="col">Easily input new clients and team rosters.</div>
<div class="col"></div>
</div>
</td>
</tr>
<tr>
<td style="width: 373px;"><span>Easy to create and easy to use. Our player evals are done through a grid. We start with templates based on age group and sport. Then, you can customize the skills and stats you want to track.</span></td>
<td style="width: 373px;">
<h2 style="text-align: center;"><span class="blue"><img src="http://projectorbach.com/wp-content/uploads/2019/07/eval.png" width="181" height="167" alt="" class="wp-image-35673 alignnone size-full" /><br /> </span><span class="blue">Evaluate Your Players</span><span></span></h2>
</td>
</tr>
<tr>
<td style="width: 373px;">
<h2 style="text-align: center;"><img src="http://projectorbach.com/wp-content/uploads/2019/07/multisport_player.png" width="174" height="171" alt="" class="wp-image-35689 alignnone size-full" /></h2>
<h2 style="text-align: center;">More Features</h2>
</td>
<td style="width: 426px;">
<div>
<div class="row">
<div class="col">
<p><span class="s1" style="font-size: 15px;"><span class="s3"></span></span>
</p>
<ul class="ul1">
<li class="li1"><span class="s1">Eases communication with parents decreasing ambiguity</span></li>
<li class="li1"><span class="s2"></span><span class="s1">Customizable evaluation criteria</span></li>
<li class="li1"><span class="s2"><span class="Apple-tab-span"> </span></span><span class="s1">Create practice plans and share videos</span></li>
<li class="li2"><span class="s3">Share data and progression with your club</span></li>
</ul>
</div>
</div>
</div>
<div id="lipsum"></div>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p style="text-align: center;">
To change to a non-table layout you just need to structure your divs like a table. I have applied classes that make that clear.
The div with .my-wrapper is taking the place of the table itself. The div(s) with .my-row are serving as the table rows, and the ones with .my-cell are the columns/cells of the "table".
Using flexbox we get a flexible layout that can be controlled very easily and allow you to change the layout where you want. Simply by applying:
display: flex;
...to a div, it becomes a flex container and the immediate child elements (the divs with .my-cell in this case) become flex items. I put several comments in the code below to point out what each line is doing. There are borders added just to make the layout clearer. Run the snippet and view in full page mode so you can adjust the width of your screen and see the responsive change.
Repeat the row layout to build out the rest of the table.
A great resource for more info on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
More info on media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
* {
box-sizing: border-box;
}
.my-wrapper {
max-width: 800px; /* use max-width instead of width to get automatic responsive flexibility */
margin: 0 auto; /* centers the container on the page */
border: 1px solid blue;
}
.my-row {
display: flex; /* direction row by default, the cells will be side by side to start */
}
.my-cell {
width: 50%;
padding: 20px;
display: flex; /* yep, the cells can get flexbox layout too */
flex-direction: column; /* each cell will have its content laid out vertically */
align-items: center; /* centers content horizontally */
justify-content: center; /* centers content vertically */
border: 1px solid red;
}
.my-cell img {
max-width: 100%; /* make the images responsive too */
height: auto;
}
#media (max-width: 500px) { /* change the max-width in the media query to whatever width you want, you can use min-width too if you prefer */
.my-row {
flex-direction: column; /* force the layout to stack the cells vertically */
}
.my-cell {
width: 100%; /* cells should be full width at this point */
}
}
<div class="my-wrapper">
<div class="my-row">
<div class="my-cell">
<img src="https://picsum.photos/200/300" />
</div>
<div class="my-cell">
<h2>Some title text</h2>
<p>Some paragraph text...</p>
<ul>
<li>whatever</li>
<li>you</li>
<li>want</li>
</ul>
</div>
</div>
</div>
Rob,
Adding a class to your table tag (class=responsive_table for this example) and writing a media query will stack the columns one below the other.
#media screen and (max-width: 400px) {
table.responsive_table {
display: block;
}
table.responsive_table td {
width: 100%;
display: block;
}
}
<table height="557" style="width: 800px; border-color: #ffffff; background-color: #ffffff; height: 702px; margin-left: auto; margin-right: auto;" border="#fff" class="responsive_table">
<tbody>
<tr>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<h2><img src="http://projectorbach.com/wp-content/uploads/2019/07/clipboard.png" width="174" height="171" alt="" class="wp-image-35671 alignnone size-full" style="display: block; margin-left: auto; margin-right: auto;" /></h2>
<h2 style="text-align: center;"><span>Create Team Rosters</span><span></span></h2>
<div class="col"></div>
</td>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<div class="col">
<div class="col">Easily input new clients and team rosters.</div>
<div class="col"></div>
</div>
</td>
</tr>
<tr>
<td style="width: 373px;"><span>Easy to create and easy to use. Our player evals are done through a grid. We start with templates based on age group and sport. Then, you can customize the skills and stats you want to track.</span></td>
<td style="width: 373px;">
<h2 style="text-align: center;"><span class="blue"><img src="http://projectorbach.com/wp-content/uploads/2019/07/eval.png" width="181" height="167" alt="" class="wp-image-35673 alignnone size-full" /><br /> </span><span class="blue">Evaluate Your Players</span><span></span></h2>
</td>
</tr>
<tr>
<td style="width: 373px;">
<h2 style="text-align: center;"><img src="http://projectorbach.com/wp-content/uploads/2019/07/multisport_player.png" width="174" height="171" alt="" class="wp-image-35689 alignnone size-full" /></h2>
<h2 style="text-align: center;">More Features</h2>
</td>
<td style="width: 426px;">
<div>
<div class="row">
<div class="col">
<p><span class="s1" style="font-size: 15px;"><span class="s3"></span></span>
</p>
<ul class="ul1">
<li class="li1"><span class="s1">Eases communication with parents decreasing ambiguity</span></li>
<li class="li1"><span class="s2"></span><span class="s1">Customizable evaluation criteria</span></li>
<li class="li1"><span class="s2"><span class="Apple-tab-span"> </span></span><span class="s1">Create practice plans and share videos</span></li>
<li class="li2"><span class="s3">Share data and progression with your club</span></li>
</ul>
</div>
</div>
</div>
<div id="lipsum"></div>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p style="text-align: center;">
You may change the breakpoint in media query where it says max-width
I have a table with a bunch of the same image in a single row. The image has a height of 21px but the cells of the table have a rendered height of 25px (in Chrome, Safari, and Firefox).
There's nothing else in the table, and from what I can tell, there are no margins, borders, or padding. So why is my table taller than it needs to be?
Here's an example:
http://jsfiddle.net/q6zy17dz/
And here's a simple example of the table:
<table>
<tbody>
<tr>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td class="datetime"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
</tr>
</tbody>
</table>
Bonus question: Is there a way to recreate this layout without using a table (and also without using floats)?
By default, an image within a table gets the computed display:table-cell property.
You should set img { display: block; }
You can do it entirely without tables.
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
nav {
background-color: skyblue;
position: relative;
text-align: center;
line-height: 22px;
}
.left, .right {
font-size: 0;
position: absolute;
top: 0;
}
.left { left: 0; }
.right { right: 0; }
<nav>
<div class="left">
<img src="http://i.imgur.com/b2f5t2B.png">
<img src="http://i.imgur.com/b2f5t2B.png">
<img src="http://i.imgur.com/b2f5t2B.png">
</div>
<div class="datetime">foo</div>
<div class="right">
<img src="http://i.imgur.com/b2f5t2B.png">
<img src="http://i.imgur.com/b2f5t2B.png">
<img src="http://i.imgur.com/b2f5t2B.png">
</div>
</nav>
It is the line-height property that makes the height of <td> to be 25px. In your example setting a value of 11px or less will make the cells have 21px.
td { line-height:11px;}
Here is jsfiddle.
Because the <img> tag is rendered like an inline element, similarly to letters. There is space below it is for the descenders.
There are few ways to get rid of that space.
Adjust the vertical alignment:
img {vertical-align:top;} /*or*/ img {vertical-align:middle;}
Or, set it as a block element:
img {display:block;}
Or, float it (works in this case, but not recommended):
img {float:left;}
<style type="text/css">
td { border:solid 1px black; margin:0px; padding:0px; }
</style>
<div>
<table>
<tr>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td class="datetime">foo</td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
</tr>
</table>
</div>
<br>
<div>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span class="datetime" style="float:left;">foo</span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
</div>
I tried pretty hard to find the answer to this on here, on google, and elsewhere, but it seems pretty obscure. I had to do some fancy CSS in order to create a box with a specific aspect ratio inside which a thumbnail would be centered vertically and horizontally. Those are straight-forward ideas that are actually somewhat complicated to implement in CSS. My solution works great everywhere except inside a table in Chrome with an image that has dimensions larger than the container.
Here is code that demonstrates the issue:
/*
sets aspect ratio of container by adding padding that is calculated
according to width of its parent element
*/
.aspect-ratio {
width: 100%;
display: inline-block;
position: relative;
}
.aspect-ratio:after {
padding-top: 76.19%;
display: block;
content: '';
}
/*
parent has no height, this fills the container's space
*/
.fill-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 0;
}
/*
centers image horizontally and vertically
background color
*/
.image-background {
text-align: center;
background-color: #444;
height: 100%;
width: 100%;
}
.image-background::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
img {
display: inline-block;
padding: 5px;
box-sizing: border-box;
vertical-align: middle;
}
/*
Firefox: image height fills the parent element
Chrome:
inside table - image is rendered at its natural height
outside table - image height fills the parent element as expected
*/
.fill-height {
height: 100%;
}
.fill-width {
width: 100%;
}
/* other styles */
h1, h2, h3 {
text-align: center;
}
table {
width: 100%;
}
.thumbnail-viewer {
width: 40%;
margin: 10px auto;
}
<h1>tall image</h1>
<h2>small</h2>
<h3>table</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;">
</div>
</div>
</div>
</div>
<h2>large</h2>
<h3>table (works in firefox and IE, breaks in chrome and safari)</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.landscapeontario.com/thumbnailer.php?image=/assets/1320240573.Twine_wrap_2.JPG&imgWH=500" style="height: 100%;">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.landscapeontario.com/thumbnailer.php?image=/assets/1320240573.Twine_wrap_2.JPG&imgWH=500" style="height: 100%;">
</div>
</div>
</div>
</div>
<h1>wide image</h1>
<h2>small</h2>
<h3>table</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.beach.com/images/activity-photo-county-londonderry-ireland-3-day-lake-district-and-hadrian-s-wall-small-group-tour-from-edinburgh-1.jpg">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.beach.com/images/activity-photo-county-londonderry-ireland-3-day-lake-district-and-hadrian-s-wall-small-group-tour-from-edinburgh-1.jpg">
</div>
</div>
</div>
</div>
<h2>large</h2>
<h3>table</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.craterlaketrust.org/pub/photo/thumb/Crater-Summer_cropto_500x200.JPG">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.craterlaketrust.org/pub/photo/thumb/Crater-Summer_cropto_500x200.JPG">
</div>
</div>
</div>
</div>
Hopefully as you can see, in Chrome (I'm using 43.0.2357.132 64-bit) and Safari (8.0.7) the tall/large image is exceeding the boundaries of its parent and its height is being set to the natural height of the image. The wide images all work as expected, so this appears to only be an issue of height.
My question: What is a simple or straight-forward way to fix this issue in Chrome and Safari? Or is it a bug and should I look for a less-than-ideal work-around that makes it look less terrible? What is causing this issue?
Thanks!
FYI, on smaller screens (screenwidth < 650px), your first image inside the table breaks as well.
To fix it, change your img to use the absolute positioning centering trick:
img {
padding: 5px;
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
This also means you don't need the image-background::before declaration.
Why do you need .fill-container to have absolute positioning? If I remove the lines below from styles then everything looks fine in Chrome (I can't test in Safari):
.fill-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 0;
}
You also haven't closed img tags, you have
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;">
instead of (notice /> at the end of line)
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;" />
My template :
<td class="image">
<img src="">
<div class="align-bottom">
text
</div>
</td>
<td class="image">
<img src="">
<div class="align-bottom">
text
</div>
</td>
<td class="image">
<img src="">
<div class="align-bottom">
text
</div>
</td>
How do I vertical-middle align the image (the images have different sizes...) and vertical-bottom align the text(different sizes.)
The td height is dynamic.
I'm sorry but position:absolute doesn't work ...the images have different sizes.
What you can do is to have 2 rows in the table.
Row 1 with all the images and Row 2 with the text
for each image add
img {
margin:auto;
}
and for text, align:center.
I think that should do the job.
Use this structure : http://jsfiddle.net/vse8cq5y/
From your given HTML and request I'm assuming this is what you will need to get what you want.
The images should automatically do what you are asking, all you need to do is position absolute the text to the bottom of the td.
By adding padding bottom to the each td, you are allowing space for the text to go, meaning that it will never overlap with your image (regardless of image size).
img {
background-color: red;
display: block;
width:5em;
height:2em;
margin: 0 auto;
}
td {
width:10em;
padding-bottom: 1em;
position: relative;
vertical-align: middle; /*should be default*/
}
.container {
background-color: blue;
display:inline-block;
}
.align-bottom {
position: absolute;
bottom: 0;
left:0;
display: inline;
width: 100%;
text-align: center;
}
<table>
<tr>
<td class="image">
<img src="" style="height: 4em">
<div class="align-bottom">
text
</div>
</td>
<td class="image">
<img src="" style="height: 7em">
<div class="align-bottom">
text
</div>
</td>
<td class="image">
<img src="" style="height: 10em">
<div class="align-bottom">
text
</div>
</td>
</tr>
</table>