Background: I'm using a photo shopping-cart that automatically generates a tables-based gallery from php, thus limiting me from too much flexibility. I'm also a novice.
Problem: The gallery puts out table cells that adapt in height to the content. When I have a full row of horizontal thumbnails the table cells are short and wide and when a row contains a vertical thumbnail, the cells are much taller. I want the cells to all be square, with the thumbnail sitting right in the middle.
I have access to input CSS in the style sheet, as well as a small section of HTML input but this HTML is inserted inside the individual thumbnail table cells; I have no access to edit the main table HTML. I have discovered class and ID names for many components using firebug.
What I've tried: I've tried to insert DIVs of a fixed size but the table still eats up any vertical space not occupied by the actual image. I've tried inserting a transparent PNG file, 180px x 180px into a div (which works to force the right size cells) and then put the thumbnail image (which is 150px x 150px) into another div and mess with z-indexing, relative/absolute positioning, etc. but I never got the two divs to stack on top of each other. Absolute positioning always aligned all 50 thumbnails to the top left corner of the page, not the table cell. Right now, the thumbnail div always comes up directly below the PNG div causing the table cell to be way too tall.
I'm stuck because I've tried everything within my skill-set and exhausted my googling. I think what I need is a way to either force the table cells to stay a certain height or find a way to make the thumbnail image overlay on top of the PNG.
Here is my current code, which is putting a 180x180 PNG (to force the table to the correct dimensions) in one div, and the thumbnail image in a second div, below the first div. Please excuse my sloppiness as I'm in no way a professional, just a tinkerer!
HTML inserted into individual table cells
<div id="thumb_frame"><img src="/180x180.png"</div>
<div id="thumb_image">[THUMBNAIL]</div>
And I have access to these additional classes & ids:
<table class="thumbnails_table">
<td class="thumbnails_cells">
I think you can do this with pure CSS, without having to add and HTML (besides the image tag, of course) into the TDs:
td.thumbnails_cells {
width: 180px;
height: 180px;
text-align: center;
}
This is all it takes for me, 'cause my test image was already centred vertically (I think on account of its being inside a TD - default CSS and whatnot).
Hope this helps!
OK, I got this figured out...so simple, but hey when you've never done it before...
Based on good advice in another thread:
<div style="height:180px; width:180px>
<table cellspacing=0>
<tr>
<td style=height:180px; padding:0; vertical-alignment:middle">
[THUMBNAIL]
</td></tr></table>
</div>
Related
I have a table (not a set of divs) representing a "feed" of user posts. The table is in the middle of a page which is itself laid out in tables: a left one, the middle one with the feed, and the right one.
The problem is that sometimes people will add posts which are copy-pasted from an HTML source (e.g. MailChimp) and the source includes tables with their own widths, or wide divs, or large images, and the post is wider than the "feed width" on my page. When this happens, the feed stretches things out, pushing the cells on the right of the page further to the right.
I tried adding things like this around the table, or cells in the table:
<div style="max-width: 395px;">
That did have the effect of stopping the pushing and stretching of columns to the right of the middle feed, but for long posts the content of the middle feed itself now extends and appears on top of the items on the right it was previously pushing.
My question is is it possible to put a div around the middle feed table so (1) it is constrained to 395px width and (2) the content doesn't extend outside the table even if cells inside the table contain other tables, large images or text.
The text can word-wrap and the images can get cut-off if necessary.
If it isn't possible in tables, can I rewrite the whole thing using divs and make it work better than way?
Thanks.
with your explanation and without examples we don't help you so much, but i think i can help you.
with this CSS properties:
my-cell {
box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
}
you can visit the MDN link: box-sizing Mozilla developer's
or you can try with this css property inside your div container or cell overflow: hidden;
hope this help you.
I am trying to implement a variation to how images are displayed for those viewing this website who prefer a tiled viewed over my image existing slider.
The gallery is labeled as follows:
<!-- TILE GALLERY -->
<div id=tileGallery >
<?php for ( $x=0; $x<40; $x++)
{?>
<div class="col-lg-3 col-md-4 col-xs-6">
<img id=img_<?php echo$x;?> data-zoom-image="picsLarge/home-<?php echo $x+1;?>.jpg" class=imgGal src="pics/home-<?php echo $x+1;?>.jpg">
</div><?php
}?>
</div>
<!-- end tile gallery -->
And here is the CSS (not showing bootstrap classes which have not been altered)
#tileGallery
{
width:90%;
height:80%;
margin-left:auto;
margin-right:auto;
}
.imgGal
{
max-width: 100%;
max-height: 100%;
height: auto;
}
The images are displayed in a grid as I expect them to be, however some are 'bumped' or 'shifted' over, and an empty space is held where I would expect and image to be. (example follows in 3 example images of webpage):
Example images/screenshots of issue: http://johnkellyphotos.com/exampleForSO/
As you can see from the three images above, the mid size web browser displays correctly, whereas the large and small shift the images as if their was an empty one in their spot. To be clear, it is not failing to display the image in the blank space, simply no element exist there.
Here is what I have tried:
Ensuring all images are the exact same size before uploading to server
Setting overflow to hidden incase some image was somehow larger and 'bumping' the next image
modifying the padding and margins to most logical values, ranging from 0px/0%, to other smaller values
displaying images as background images rather than image tags, which appears to fix this particular problem, however leads to a whole new world of other problems that creates a LOT more work in redoing most of the javascript, and ultimately not likely to be worth it if this has a simpler solution
Adding another div tag between each image to create padding between images
Adding another div with no overflow surrounding each image that is hard coded to a particular width, and hidden overflow. (This also works but creates a nightmare in making the page dynamic because I have to specify the width exactly.
I would ideally like this to work even if the images are not the exact same size when uploaded, such that they display neatly, centered, and do not 'bump' each other out of position. I was having trouble describing my issue to a search engine and accordingly found it difficult to find anything particularly helpful or specific to my problem.
If any part of this question is unclear, let me know so I can fix it.
Thanks!
When using percentages in CSS like you are, many times the widths and heights are outputted in decimals, which are rounded differently by individual browsers. I've encountered problems like this many times where that rounding is inconstant and results in some containers being 1px larger than the neighbor containers which will result in the 'shifted' images.
Lets take grid:
A B C D E F G H I
As long as all the elements share the exact same height they will be a perfect grid. however, if A get rounded to 1px taller than the other elements your grid will turn into:
A B C D E F G H I
This is because A is 1px taller than B and C, which makes it encroach 1px into the next "row" that the floats are creating. And now D and E are acting like A is to the left of them and they are starting 1 position further to the right.
This can happen in many different ways that result's in different images getting "pushed" in different areas of the grid.
My suggestion to fix this is to use Javascript to set the heights of the containers. So that they are all the exact same height. Don't rely on CSS percentages giving constant sizes.
So my problem is this - I have a div with fixed size of 970px. Inside it I want to create a horizontal menu where the first element will be a link to the home page with the logo of the company and the others will be standard links to different parts of the page.
What I want is to make the link with the logo wider than the other links and let the other links occupy the space left equally. Due to the fact that in near future the width of the container div may be changed even though I know the number of links I would like to use percentages to determine their width so the width of one link will be = (width of the div - width of the logo link)/5 (the number of link I'll have.
I tried with something like this
<div id="main-container">
<div id="logo-container">
</div>
<div id="standard-menu-container">
</div>
</div>
But I couldn't make it work (In fact all this is wrapped in one other div that I haven't shown here). So googling about this I get to the understanding that maybe using some sort of table may solve my problem. To be honest I have never used table this way but I followed an example and I got this result : JSFiddle Example where the red rectangle is meant to be my Logo link and the problem is that everything else is stacking under. In this particular example the logo link is excluded from the <ul> but I played around with that case too and simply trying to set one width in pixels and other - in percentage seems to be not what I need to do.
I would appreciate any help, just bare in mind that I tried a lot of styling with divs and display: inline-block and it breaks other parts of my structure so I would prefer a solution where the normal flow is not disturbed (like using a table for example)
You're on the right lines with the display: table-cell. I've made a few changes where you had extra code that wasn't needed, and set the <ul> to display: table, rather than the container. Adding table-layout: fixed will make items in the list (the cells) occupy an equal width.
Then, float the logo left, don't specify a width for #main-menu-navigation because then it will fill remaining space, and give it margin-left: 150px to cater for width of logo.
So that won't make much sense when read. Take a look here:
http://jsfiddle.net/LREbC/1/
Try resizing, the cells will adapt to the width.
Note: When using table-cell you don't need to define a width, the behaviour is the same as actual table cells.
I have an HTML page with a section across the middle of it. This horizontal section uses a <table> and has a custom background image that needs to repeat horizontally across the entire section. This table has 5 elements in it. These elements are statically sized to 140px.
My problem is, I can't get the image to repeat across the remaining space. It's as if the table doesn't stretch the entire width. However, if I set the table width to 100%, the table cells grow beyond 140px.
What do I do? I want the table to fill the entire space. But I want my cells to remain a constant size, and I want the background image to be used.
Thank you!
A <table> is only as big as the cells inside it. So, if you’ve got 5 cells, each 140 pixels wide, the table will only be 700 pixels wide: it won’t stretch across the full width available to it.
You could wrap the <table> in a <div> and put the repeating background image on the <div>, if the 6th cell solution doesn’t work or isn’t preferable.
The sizes of background images are irrelevant to CSS, no help there. Maybe you can hack something in JavaScript, otherwise you will have to know how large your background image is.
Consider wrapping the middle section in a div and applying the background image to the div. Then set the width of your td elements in the table to 140px.
Here is an example. Clearly, you will need to reference your image instead of flurries.png (which is not part of the fiddle so it does not show).
Add a 6th cell and don't specify any width. This will keep the 5 cells at 140px and the 6th cell will be stretched to the end when table width is set to 100%.
I have been trying to position content within a table row. The row in question in turn contains 2 other tables and 1 small thumbnail image (each within a table cell of course). The row was positioned using valign="top" till now. This worked well getting contents of all the three columns to the top.
However, I wanted to position it using CSS position:relative; vertical-align:text-top;
This positions the cell content well if there is no thumbnail image. However, once the image is included, the other columns are not positioned at all. See the image below.
*Sincere Apologies for the Shoddy Image Formatting.
I want the two tables as well as the thumbnail to be vertically aligned to the top.
Please note that all margins and paddings are set to 0 and the sizes in the image are actuals.
Does somebody know why my browser (Firefox) is behaving this way and how to correct it?
Ok got it! It seems that vertical-align:text-top aligns an element to the top of the parent element's text and not to the top of the parent element! Changing it to vertical-align:top did the trick :)