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.
Related
My question is this: in a div (example height 500px, width 500px) if i insert two images of greater width than the div, one of the two is placed in the row below. But if I then insert a third image of reduced dimensions that can fit in the first line instead it is placed after the second image. How can i position the images according to the space available in the div? so that the large images will be placed in another row while the smaller ones will occupy the spaces left free. I should do it without manually changing the order of the images in the html. One last thing, the images must all be merged without spaces. thanks to those who will answer me
This is quite simple in javascript/jquery if its worth the trouble. You can get the width of all the images and then add them up and index them then math >500... jquery target the images loop through them with an each then logic and indexing--image1 width=300 image2=300 image 3 = 100, image4 = 100...
Once theyre all indexed if total < 500 then next kind of thing. If you know jquery and js this should make sense to you, if not, you probably wont be able to write it and maybe should move on.
On my way on implemented my idea, I am trying to put a lot (toy example: 4) images in one slide of the carousel of Bootstrap. However, I am failing big time on resizing them so that all the images have same characteristics in dimensions, regardless of their original ones.
Here is the jsFiddle where I display the issue in slide 1, and here is just one of the many attempts I made:
img.resize{
width:256px;
height: 256px;
}
You see, I would like the images to all have the same dimensions, for visualization purposes. How to do that?
In other words, what I want is every image to be of the same width x height dimensions. Like we were passing them through a neural layer that would trim the dimensions to make them homogenous, like all of them were placed on the same box! The ideal thing would be to get something like what the search engines give you (where the height is the same for all, and the width might differ a bit, but w.r.t. to visualization that doesn't cause any harm).
Now, the black is shorter than the yellow.
use max-width and set the .item class's height... and overflow: hidden:
Fiddle
4 images in 1 slide: Fiddle. Be aware that with just straight images you won't be able to make them the same size. Well, unless you want them squished and squeezed to look horrible.
If you want all 4 images to appear to be the same size, you need additional markup, such as a div wrapping the image tags. This is how things like Google images does it.... they wrap the image tag in a div, then hide any overflow of that div.
You can't resize 4 images in that current markup to be exactly the same size in a single one of those slides. Images themselves can't be cropped or have portions hidden. It's surrounding elements that cause images to appear cropped by hiding any overflow.
I am trying to create a KPI dashboard which has its displays each in their own "tiles", these tiles are of a static width and height (in the examples provided these are 200px). The website that these are being placed has the content in a <div> with the CSS attributes margin:auto and width:80%, this has been done to allow users with widescreens to benefit from an increased width of content. What I am after is the tiles to be left aligned as though contained in a table but to be central aligned within the tile container (which takes up the full width of the 80% width body).
I've created a JSFiddle here, I have previously created solutions which use JQuery taking advantage of the $(window).resize() handler and programmatically setting the width of the tile container however I am hoping that it is possible to do this with pure CSS to reduce the JavaScript required (I'm already using a lot on the page for AJAX and updating displays.
How is it possible to get the required alignment (pictured below) using purely CSS? Additional elements can be added but would prefer to keep the structure as simple as possible.
Update to Clarify requirements:
In my examples there are only 3 children, it is possible that the dashboard could have any number for example if you were to have 5 tiles it could be laid out as follows (depending on screen width available and changing of a page resizes):
5 on single row
4 on the top row 1 on the bottom
3 on the top row 2 on the bottom
2 rows of 2 tiles and a third with one
5 rows of 1 tile
Yes it is possible by explicitly defining the width of each element in pixels, but the width but:
the pageBody element MUST be width:80% (not 800px/600px as is common practice), screen real estate used is to be maximised (to a degree) allowing widescreen users to actually see more rather than only showing 600/800px in the middle of their screen.
the tileContainer MUST be centred within the pageBody and will "resize" according to the width used by the contained tiles (this CANNOT be explicitly defined in the CSS as n pixels as different users of the dashboard have different screen sizes and mobile devices make things even more fun). It is possible to do this by changing the width on page resizing using JQuery as previously stated but I'm looking for a CSS only solution.
the tile elements are to be left aligned within the tileContainer
There are images at the bottom demonstrating required behaviour.
HTML
3 Children:
<div class='pageBody'>
<div class='tileContainer'>
<div class='tile'></div>
<div class='tile'></div>
<div class='tile'></div>
</div>
</div>
CSS
.pageBody{
width: 80%;
margin: auto;
background-color:lightgrey;
}.tileContainer{
text-align:center; /*Removing this doesn't centre the tiles in their container*/
}.tile{
background-color:purple;
display:inline-block;
margin:5px;
width: 200px;
height: 200px;
}
Example: Left aligned within body
Example: Central aligned within body
Example: Required Alignment
TylerH was close.
I just took his jfiddle and modified it slightly. You need to add a width to your second containing div, then you'll be able to use margin auto to center it.
Jsfiddle
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.
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>