While I developing a div image box with reflection -webkit-box-reflect, I found out that the reflection at bottom not mirroring exactly from the bottom of the image. It depends on how much size available for the reflection.
For better illustration of the problem:
http://jsfiddle.net/mochatony/4B26Q/14/
The 2 images have the different reflection, one from the middle and one from bottom of the image, which I expect reflection is from the bottom. The reflection is somehow depends on how much html height available, it the space allow for full shadow display, it will reflect the image at the bottom (you can adjust the slider of the html panel to adjust the size).
Is there a way to fix the reflection start from the bottom of the image regardless of space available?
Try the same code by removing width and height in box1 and box2 as follows:
#box1{
position:fixed;
margin-left:20%;
margin-top:0%;
-webkit-box-reflect: below;
}
Related
I want to make a carousel-style widget that is built with 3 images and two buttons.
My problem is that this whole thing needs to be responsive and scale up (to some maximum) and down, while keeping the relations between the images.
The shape is as follows:
The pixel sizes of the images are all known upfront, and any relation that is needed can be known upfront (e.g. the amount needed to move the green and blue boxes since they are not vertically centered).
I am not very experienced with HTML/CSS, and I managed to get this shape with flexboxes and translations, but I could never manage to get it to scale correctly with the rest of the page.
I don't quite understand if this is even possible with CSS, since it requires some sort of absolute positioning / translations / etc. that ruin its box model.
The next thing I thought of trying is to use a canvas instead and draw the images myself, while letting the canvas width to stretch as it wills (up to a maximum) while I control the height in JS, since I know the aspect ratio of the widget.
I would really prefer a simpler HTML/CSS solution though.
I suppose I could do the same without a canvas - a container that is controlled by CSS for width, but I control its height, and the images/buttons could all be absolutely positioned in it, but that's kinda weird as well.
Your goal can be accomplished by using percentage-based width values (heights being auto or unset) for the images at different CSS breakpoints (e.g. Bootstrap's listed at https://getbootstrap.com/docs/5.0/layout/breakpoints/). Practically from an aesthetic standpoint, I suggest setting buttons to pixel values (again, differing at breakpoints). Either a container (like a div element) or the body element will be the parent element to which your images and buttons scale.
To accomplish overlapping of images (and horizontal alignment of buttons mentioned in the next paragraph), for all elements you'll need to set z-index, which indeed does require either absolute or fixed positioning. Given your elements will be either absolute or fixed in position, you could modify vertical positioning using the top property.
Give the three images auto left/right margins. Set the buttons to the same z-index as the green image so that they'll rest against the green image. Give the L button a left margin of auto and right margin of 0. Give the R button a left margin of 0 and right margin of auto.
No JS required with this solution, as you'd prefer.
For a while I was stumped my centered background images were not pixel-perfect aligned in their containers. I even got different results within the same browser but different windows
Finally I found out what is happening, but I'm still short of a robust cross-browser solution.
The case: I'm working on a collapsable tree-view in javascript. Everything is functioning alright, but in some cases the collapse/expand buttons are off one pixel to the left.
The images for these buttons are user-definable, as well as the size (width) of the container they appear in. The images are drawn in the center of these containers with background-position: center center;. Now there are cases the image can't be fit exactly in the center of the container (for example, centering a 9px image in a 20px container, there's a 1-pixel difference on either side). This should be no problem, as long as we have consistent behaviour on how the browser handles this.
But here's where it gets messy: I've implemented this tree-view inside a wrapper centered with margin:0 auto; based on the browsers viewport. And here is when I get different results when both the viewport centering and background centering don't fit exactly within the pixel boundaries.
This is probably hard to follow, so I've squeezed the problem into a fiddle: http://jsfiddle.net/3y65wgu8/1/
CSS:
#wrapper1 {
width:400px;
}
#inner1 { /* perfect center */
margin:0 auto;
width:200px;
height:50px;
}
#wrapper2 {
width:399px;
}
#inner2 { /* 1px-offcenter */
margin:0 auto;
width:200px;
height:50px;
}
#container { /* image 1px-offcenter (9px centered in 12px container) */
width:12px;
height:12px;
background:url(data:image/gif;base64,R0lGODlhCQAJALMAANLNve/s58a7rd7Vznuatf////f39wAAALXD1vfz7+fj3tbTxsa6pdbPxt7b0sa2pSH5BAAAAAAALAAAAAAJAAkAAAQoEJFJiSw4l6mxmUYYJgp4nKczJUngKsOkOMOyNMAECALDPAJLhYKIAAA7) no-repeat center center #444;
}
HTML:
<div id="wrapper1">
<div id="inner1">
<div id="container"></div>
</div>
</div>
<div id="wrapper2">
<div id="inner2">
<div id="container"></div>
</div>
</div>
Two different wrappers centering their content, containing two identical containers having a small button drawn as background. Chrome seems to be the only browser that draws the buttons in alignment consistently, but firefox and IE show the problem I described. Try resizing your browser window, and see the buttons bounce from one side to the other.
My question is: how can I get at least identical results, without losing flexibility on button/container/wrapper sizing and styling.
EDIT: Here's a picture that illustrates my use-case:
Example
The area marked in blue is the container that holds the collapse button. This area is always square, but may vary in size. The button can be any image smaller than this container and is placed directly on top where the lines meet. No stretching or scaling should occur on the image. In this example the button is too far to the left. Resizing my browser window makes the image jump in and out of correct alignment, as the fiddle above describes.
There seems to be no way around this than to resize the image container when the image inside can't be centered pixel-perfect, to have consistent cross-browser behaviour on the positioning. Therefore I need to fetch the image meta-data either server-side or client-side.
Server-side (1):
Using getimagesize and getimagesizefromstring and was obviously the way to go. But then I bumped into a problem in my current use-case: the tree is rendered using AJAX, and the relative URL for the image is not relative to the location of the AJAX script.
Issues:
So, for this to work I either have to pass both URL and absolute PATH (or absolute path alone, and have the URL figured out by stripping $_SERVER['DOCUMENT_ROOT'] from it). This approach seems counter-intuitive and restrictive on the developer's part trying to implement this tree module. So I abandoned this idea.
Server-side (2):
Ask for the image dimensions at design time. Plain and simple, place the responsibility at the implementer.
Issues:
Not very elegant, but it works :). (solution 1)
Client-side:
I've but both images inside a hidden DIV, and I fetch the size of the image from the onload event. If by this data the images used inside the containers appear off-center ( image.width%2 != container.width%2 , image.height%2 != container.height%2 ), I loop through these containers and resize them by one pixel in either width or height.
Issues:
I don't like the idea of using hidden elements with triggers for the sole purpose of working around this positioning problem. However, it provides a solid cross-browser solution. The only downside is that there seems to be a slight delay before the images 'snap in position' (at least in FireFox). The obvious solution for this is to have the containers show the images after resizing the container. (solution 2)
This may be worth a quick try. When inspecting the Fiddle, I noticed that #wrapper1 had a width of 400px and #wrapper2 had a width of 399px. I changed the width of #wrapper2 to 400px for consistency.
I added background-size:cover; to the button because the button image appears to be a different size than its container. Give this a try and see what you think.
If you need to keep #wrapper2 at 399px, then change the background position in the code below to background-position:top left; while using background-size:cover;.
Another option for your current code would be to make the background image the same size as its 12px by 12px container, use background-position:top left;, and remove the background color. When creating button backgrounds, its helpful if the background is the same size as its container.
Note: You could also use CSS styles to create the button look on the div, and not use an image.
Here's the JSFiddle
Here's the browser support table from Can I Use for background-size:cover.
#wrapper1 {width:400px;}
#wrapper2 {width:400px;}
#container {
width:12px;
height:12px;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-image:url(data:image/gif;base64,R0lGODlhCQAJALMAANLNve/s58a7rd7Vznuatf////f39wAAALXD1vfz7+fj3tbTxsa6pdbPxt7b0sa2pSH5BAAAAAAALAAAAAAJAAkAAAQoEJFJiSw4l6mxmUYYJgp4nKczJUngKsOkOMOyNMAECALDPAJLhYKIAAA7);
}
CSs for rate box:
.rating-input {
font-size: 25px;
position:relative;
left:101%;
}
Button:
.custom-input-button {
text-align: center;
position:absolute;
left:64.4%;
top:12.1%;
}
image :
<img src="https://graph.facebook.com/<?php echo $user_id; ?>/picture?type=large"
style ="position:relative; top:-46px; left:0px;"/>
It gives different look in chrome and firefox:
Firefox:
In chrome bookmark menu is not open. The change in spacing is due to that?
I am frustrated changing the positions, but problem does not solved.
I agree that your not giving us enough code to really give you a good response to.
If this helps at all, when I do custom form boxes as such, I wrap them in a div to start off with. Then define my widths/heights, and do a left float. This might be a deprecated method, and there may be a better way to do it, but this has always worked for me so I still tend to do it.
That should keep your elements all at the top, then you could do a clear:both, and float your rating system to the right? Just an idea.
Just to sum up conversation in comments.
You could make resizable containers with width in %. That will make your site adjustable to screen resolutions. Make it for minimum resolution of 15" display (1024px in width). Then position elements inside those containers. You can wrap them in another node of wrappers. More wrapper divs - the less can go wrong. But you don't want them too many, ofcourse. It depends on structure of your site. Then you can set margins and size of elements in px inside those containers.
Quick example of what babbling about in upper paragraph
jsfiddle.net/Driveash/qgbLB
You can also make extra css for specific browser.
Are left and margin-left the same?
Left and margin-left could do the same thing but they are not the same. Left is for positioned element (as absolute, relative, fixed). If you don't have positioned element then you want to use margin-left.
add z-index:-999; to the image so it doesn't sit in front of the green banner
I am building a module to display html divs(pages) which are designed to in a later stage be printed out as A4s. The area where these divs are displayed is however to small to display the full width of the divs and thus the pages and their content need to be scaled down to fit within the display-area at hand.
The children of the a4-pages are styled with both set widths/heights and percentages so it would be a nice approach to use the CSS3 Tranform scale to scale the pages down just enough so that they can be displayed but this becomes problematic since the scale is done after rendering and thus creates an white area around the pages.
I'm using jquery to rescale the pages when window is resized and will also implement this when page is loaded.
How do i scale several divs within a common wrapper and also readjust the parent so that the scaled div is showed without any padding around it?
Edit: I've put together a simple fiddle displaying the issue http://jsfiddle.net/96jkU/
#toBeScaled should display over the full width of #displayArea but still be scaled to 0.5
If I understand the question correctly, you want the scaled div to sit in the top left corner of the parent div.
In that case, the problem is that the transform origin is set to 50% 50% by default. This is good for rotations (you typically want to rotate something around its center) but not really for scaling; your div gets shrunk down to the center of where it would originally be.
Solution: all you need to do is add
transform-origin:0 0;
(with the proper prefixes) to the style for #toBeScaled.
See updated fiddle.
jsfiddle link: http://jsfiddle.net/djDWF/84/
The problem is, the inner container (text-padding) margin/width for the text/images is affecting the center background image. The repeated image that touches the footer does not extend to full height, and cuts off so the center and footer images do not match up (it is kind of hard to tell, but if you add or remove text in my jfiddle example you can see the center image change where it meets the footer.).
This is for a school project, and though I did not need to actually do this type of image background, I got this far so might as well continue. I don't want to use javaScript if possible because that is not part of the course yet.
I tried removing the text wrapper and styling each p tag individually but the same effect occurs.
I also tried mathematical combinations using line-height and margins. If I set the line-height to equal the right and bottom margins, and the left margin to equal the height of the footer then the effect works, but because my footer image is so large this is not a workable solution.
Mathematically I tried to keep the same ratios with the footer height but this did not work either (or else I did this wrong. I tried dividing each by the same amount.)
Is there any way to do this using only CSS and and not having to resort to tables?
So in short the problem is: You can see a line showing up at the footer separation because the repeated centre background isn't fully showing it's last repeat as the container isn't big enough.
The solution: If it doesn't need to be variable and you know how much content you will be putting in you can just set a height: Live example - http://jsfiddle.net/djDWF/85.
div#background-center{
background:url(http://i.imgur.com/gsNFa.png) repeat-y;
float:left;
width:700px;
height: 1604px; /* add this */
}
Obviously, pick whatever height is right to fit your final text.
With your current images there is no way to do this automatically without using JavaScript.