I'm trying to display a semitransparent grid of captioned images physically underneath a "lightbox"/overlay with my actual content in it. The font size in the document is generally set using vw units, so the height of the overlay changes depending on the screen resolution.
I want to vertically center whichever happens to be smaller - the background image grid, or my overlay. If the text in the overlay is bigger (font-size-wise), I want the grid to vertically center relative to the overlay, but if the grid is bigger I want the overlay to vertically center relative to the grid.
Initially I tried using position: absolute on the overlay which of course failed epically when I discovered the text in said overlay would overlap the content below the grid if its font-size got too big. I'm currently using Faux Absolute Positioning (demo) which has resolved the overlap problem (the content is pushed down by whichever is bigger, my grid or the my lightbox, but I simply haven't been able to combine this neat trick with any of the float-vertical-centering demos/examples I've found on SO and elsewhere.
The grid is currently a table (which took me quite a while to figure out!), but I could switch to some other method (a very long series of floats, for example) if absolutely necessary. (The grid is very arguably tabular data, in my opinion.)
This is for a non-public document I'm sending somebody which I'm authoring using HTML5/CSS3 for rich layout/styling/formatting, so my rules of "strict semantics" are slightly (okay, quite) relaxed in this situation. (LaTeX->PDF would be impossible - constantly restarting xpdf to reload my PDF would progressively drive me so far up the wall I'd drill a hole in the ceiling with my head - and LibreOffice would probably choke on the ~150+ images I'm dealing with. And besides, the document is full of progressively accrued CSS3 awesomeness I would have to leave behind if I switched to PDF/ODT...)
Related
I'm using a 3x3 image grid with Lightbox (in MDBootstrap).
The images all have a 33% width (including padding).
All images are retrieved from the Instagram Basic Display API.
These images usually have a native resolution of 1440x1440px.
However, sometimes, for some odd reason, an image will have a resolution of 1440x1441 (one pixel wider).
Putting these images that are one pixel higher in a grid, scaling them down to 33% width, will cause them to be slightly larger, which thereby causes 3 images to no longer fit on one row. Please see example below:
As you can see, the images aren't aligned in a 3x3 grid. I found out that this is caused by the second image in the top row, which is actually 156 in width by 156.094px in height(!). This is obviously caused by the image provided by Instagram being 1440x1441 (in stead of 1440x1440):
I have tried using display: inline-table on the image object as someone in another topic suggested (to round down decimal pixels), but this didn't work. Manually resizing the image to 155.891px x 156px (using Inspect Element in Chrome) makes the image fit:
So my question is: without having to check every image's width with javascript and resizing all of them to the same height, how can I make sure the image has an exact 1:1 aspect ratio as opposed to ~1:1.001 to prevent this from happening?
Any help would be greatly appreciated!
EDIT: fixed switching height/width around, thanks #CBroe
For a to-be-developed page I am trying to combine jQuery/jQueryUI functions and plugins ("draggable" and "maphighlight") with image maps and CSS-animated scaling triggered by adding and removing a class via jQuery on click:
It's too much to put in a snippet, so I created a codepen:
http://codepen.io/anon/pen/xqxgrz
I have a draggable area (#container5) inside another container (#container3) which hides any overflow (drag it to see the effect).
Inside #container3 there is one more container (#container4) which contains four images. Those are positioned absolutely, the three smaller ones are on top of one that fills the whole container when loaded. All this nesting of containers is necessary to get the ability for dragging, using an imagemap and scaling.
Now the essential thing: All images are more or less covered by map areas. Those become visible when you hover around (not over) the small images. When clicking the area around the image labeled "SHRINK", all elements downwards from #container4 (i.e. the container itself, 4 images and the map areas) will be scaled down to 60% of their initial size, caused by a CSS class being added by jQuery in combination with CSS animation. When clicking the area around "RESET", everything is reset to original size (but not to original position if it has been dragged before).
My problem is that I can't get the map areas to cover the small images when hovered. I tried this CSS (and other variations of that), but it has no effect, no matter which z-index I use:
#container4 area {
position: absolute;
z-index:10000;
}
But the map areas remain behind the (small) images - clicking the image itself has no effect although it's supposed to be covered by the clickable image map.
My intention later on is to have real images and polygonal map areas that are smaller than the images and only cover parts of those images (the shape of the things they display), so assigning the jQuery addClass function to the images themselves is not an option.
What can i do to get those areas on top of the images when hovered?
So, answering my own question after googling for days and trying everything I could think of:
The only way I could make it work was to put each image in its own div container and create a seperate image map for each image. That requires a lot more code, but it works.
When the content of my slides in a deck.js presentation gets larger than the vertical window, the browsers are shrinking the displayed content.
The more content, the smaller the display gets. The effect seems 'page' wide, as the top left corner of the slide moves further away from the top left corner of the browser window -- as if I were zooming out from the page. I can navigate to the all of content with the mouse, but no scrollbar appears.
What is going on here, and how do I get control of the display size in these situations?
(Apologies for a possibly poor question -- I don't know quite enough CSS to know what additional information I should or could provide here. I'd be glad to add in answer to questions.)
Thanks.
If you want to keep consistent (constant) font size and layout across slides, I would recommend using the "fit" extension from this page http://home.heeere.com/tech-deckjs-ext.html .
On the negative side, this extension currently prevents you from using the horizontal and vertical transition themes. It could be patched to allow these transitions.
On the positive side, this extension will allow you to have a scrollbar on your slide. You can do that by adding the following style in your page:
div.deck-container > .slide {overflow-y: scroll;}
I need some help. I am going to school for graphic design and am building a website as a trade of services.
I designed the template in photoshop and then put it through PSD2CSSOnline.com which spat out the code and spliced images.
I was able to edit the HTML and CSS enough to get the two pink lines across the top to stretch across the browser, but I have no clue how to get the bottom ones to do the same since the text on different pages will vary and I assume the div has to be outside of the wrapper to stretch the 100% width so my problem is how to do that AND STILL MAKE IT RELATIVE to the div inside the wrapper?
Any help is appreciated, I have spent hours trying to figure this out!
For reference I have uploaded it so you can look at the source code and visually see what I am talking about. To view it go here: http://bellairo.com/anytime/
i'm not very familiar with psd-css kinda programs so this is a bit hard to understand... for the top purple lines it seems like you have 2 images: 1 is 960 x 30px Layer-13.png, and then there is the 24 x 30px Layer-12-rx.png that repeats into infinity in both directions underneath that. It seems the simplest to get that same png image - Layer-12-rx .png to do the same thing at the bottom of your page - repeat this image underneath the one that is already there: Layer-7.png.
As far as your question about the lines being relative to your content: I notice that almost all your divs have position:absolute applied to them. Be careful of this because when that attribute is applied, it removes the div from the normal flow of how css positions things and then you have to start specifying everything, instead of divs just following upon each other naturally - which is good for things like having your bottom lines just naturally positioning themselves underneath your content, however much there is. The div in which your footer lines are sitting also has this position: absolute applied to it, which means you are always going to have to tell it exactly where to sit for every page. A start is to change it to position: relative and then play with the left: and top: values until it's in the right place. Then it should position itself underneath the text every time.
Good reference is W3 schools - for positioning info check this out: http://www.w3schools.com/css/css_positioning.asp
I have this website.
The div container contains a background with a grungy look, and the body contains another background that is repeated on the x coordinate.
If you view the site you'll see whitespace on the left and right side. I am wondering how I can set the background images to expand based on the screen resolution. Would it work to set a width based on percentage for each div?
To my knowledge, CSS does not support scaling background images, which is disappointing to say the least. Long story short, you'll probably have to fake it with a fixed-position, z-indexed img tag. That, or what you did: a large image with a background-repeat.
I dont see any issues with what you've got in FF3/IE6/IE7 and chrome. only issue i see is the transparent png in ie6 with the ugly gray behind it.
ie6 I gotta fix but what the customer wants is for the with of the page to size up based on the users computer resolution
Unfortunately, you can't scale the image itself.
What you could do would be remake the div structure so that the inner div contains the center of the grungy background and the sides were tiled through two separate divs. You could then recut the center piece to tile both vertically and horizontally and give it a width that is a percentage of the window size. You could keep it from getting too small via javascript.
This is not an optimal solution, but if the client is set on having it scale with the browser window, this might accomplish it for them.
thanks for all your answers, when i said white space i didnt mean actual white space what i was refering to was that the entire container div wasnt sizing (width wise) towards what the users computer resolution was. and since allot of the divs are set with a background image there is no css code for setting the width on the image but i guess it would work on the divs. but thankfully after talking with the customer he changed his mind and doesnt want it anymore :)