I have a little problem I can't seem to solve.
I have an image that I scale with an input range.
I go from 100% width to 150% width.
The problem is that I have on this image
divs in absolute position that have to change position when I scale the image.
How do I do that?
Here's a sandBox to illustrate my problem
https://codesandbox.io/s/brave-bogdan-0149c?file=/src/components/Carte/Carte.js
notice that dot is a child element of a container of img, not of the picture itself. Move width, add position: relative on container. Example: https://codesandbox.io/s/blissful-faraday-qyhmx?file=/src/components/Carte/Carte.js
Also, it's helpful to simplify the problem you're faced with. One dot, no tooltips etc, remove code duplication. Divide and conquer. You'll have much more pleasant time
Related
My current homepage banner scales down to mobile and the image & text shrinks to a size that's unreadable.
How can you make it so that after it scales to a certain point the image stops scaling and it just cuts off the width of the image?
My site: www.riotsociety.com
Example site: sunglass.la
Add this into your CSS files.
This will make your slider 70% of the viewport height. So it will take 70% of any device's height.
this will solve the image problem
.fullwidthbanner-container {
height: 70vh; //please work around this value
}
Now the thing is that the Slider's JS is calculating and giving to each element sizes and styling's.
The buttons content becomes 3px in size on mobiles.
Now I see 2 solutions for this.
Read the documentation of the slider library or plugin if there is any and try to make it not give heights and values for the responsive part of the slider and just do it by your own. You'll need a little bit of CSS.
Or, let it as it is and write on top CSS.
Do you have access to the code? Or it's just a shopify website? I can see that the slider is owl_carrousel
http://www.akaskyness.com/
This is in the early stages of development. I want this "cover" page to be non-scrollable, with the height of the white|black background adjusting to the height of the browser window. At the moment, when reducing the height of the browser window, the headers don't shift up proportionally and a scrollbar appears. I'm not really concerned about browser width at the moment because I haven't added any code for that yet.
I think I see what you mean - you want the <h1> and <h2> elements to shift vertically as the viewport height is resized, so that they don't end up off the screen (when it gets too short) and create a scrollbar.
In your current CSS, you try to do this using margin-top:17% on <header>. This seems like a logical approach, except something curious happens: the margin-top never changes, regardless of how you resize the browser vertically.
I'll be honest, this stumped me for a while, so I did some searching around about margin behaviour and found out this critical piece of information: "The percentage is calculated with respect to the width of the generated box's containing block." So the browser height is completely ignored in the calculation! If you resize the width of your browser, you can actually see how your headers move up and down on your webpage.
Well, that completely invalidates using a percentage margin to attempt to vertically align <header> relative to the viewport height. What now? Vertical alignment of elements is actually something lots of other developers have tackled in various ways. Here's a simple one that uses absolute positioning, by only rewriting the styles for <header>:
header {
margin-top:-3em;
position:absolute;
width:100%;
top:50%;
}
Here's a JSFiddle demonstration of this new CSS. Note that margin-top:-3em; is a bit of a guess on (half of) how tall your headers are, so if you don't want to hard-code that value, you'll probably have to look at a different approach for vertical alignment (this is just one of the easiest). Also, if you don't want it vertically centered, just change top:50%; to a different percentage value.
Hope this helps! Let me know if you have any questions.
Im working on a interactive show room. In this showroom visitors can click on products to get a lichtbox with more info about that product.
See: http://codepen.io/xiniyo/pen/wLoxE
Is it possible to keep the dots always on the same position as the image below when you rescale the browser. Normal width = 1140px minimum width = 960px. Now the imag scales but the dots always stay on their absolute position.
I`ve tried it with % calculations but that didn't work either. The image scales faster than the dots do.
With difficult % calculations? or some Javascript.
Or is it possible to calculate the Absolute position from the canter of the div?
position: fixed;
This should work
I have a UserControl which has a quadratic Image as a Child. This Image is at the bottom of the UserControl, and half of it is clipped (e.g. the Control's Height is 400, Image's height is 200 and it is set to y=300).
Now, When I rotate the Image, it is still clipped like the way it was first. Like when rotating around 90 degrees, I suddenly have an Image which is only 100px wide.
It seems like the original clipping which was made because of the bounds of the UserControl, are applied forever.
How do I solve this problem? I hope I explained my problem understandable ;)
How are you rotating the image? If you are rotating using a RenderTransform, then WPF does not re-render what was already displayed on the screen - it simply rotates the pixels.
Instead, rotate the image using a LayoutTransform; this forces WPF to re-render the control given the new area it occupies, which should eliminate the clipping you see.
You can also call InvalidateMeasure() after applying render transform.
I'm working on a Windows Form in VB.NET 2005 and I would like to have some buttons with images (I'm talking about the plain, vanilla System.Windows.Forms.Button). I have everything set up the way I want it but the images are displaying too low on the button, such that the bottom of the icon is almost right on the bottom of the button and there is a lot of space above the image.
Here is a screenshot:
Button Screenshot http://www.freeimagehosting.net/uploads/b28a5c63b8.jpg
See how the corner of the icon is brushing up against the bottom of the button?
My button is 23 pixels high and the image is a 16 x 16 icon (converted to a bitmap so that it can be assigned to the button's Image property).
I've tried setting the button's Margin.All property to 0, and verified that the Padding.All property is 0. I've also tried changing the button's ImageAlign to TopLeft, MiddleLeft, and BottomLeft, but none of those settings seem to have any affect.
Does anyone know how I can position the image to be of equal distance from the top and bottom edges of the button? I can resize the button or the image if necessary but they are at my preferred size and I would like to keep them that way if possible.
I just encountered a similar problem, which I was able to solve by thinking really hard. (Ain't those situations great?)
The explanation
First it's important to understand that ImageAlign does NOT mean where on the button do you want the image. It means what point (pixel) on the image should be used for positioning. So if you pick "TopLeft", then the top-left-most pixel of the image will be vertically CENTERED on the button.
The problem comes in when you have a button with a centered image, whose ImageAlign is set vertically to "center", and whose dimensions are of an even number of pixels. Your image is 16x16 pixels- 16 is an even number. The middle pixel would theoretically be somewhere between pixel 8 and pixel 9. Since there is no pixel 8.5, VB rounds down to 8, thereby using pixel 8 as your positioning pixel. This the root cause of your unwanted upper margin.
Your button has an odd pixel height (23px) which means it has a true center pixel- pixel 12. VB tries to position the image's center pixel (8) on top of the button's center pixel (12). This puts 8 of the image's pixels BELOW center, and 7 pixels ABOVE center. To even things out, a 1-pixel margin appears above the image.
The solution
Pad the image with 1 extra row of pixels on the bottom. The image now has a height that's odd (17 px), giving the image a true center pixel which can line up perfectly with the button's center pixel.
That's how I solved the problem for myself. However, a simpler possible solution just occurred to me. You could probably achieve the same result by assigning the image a bottom margin of 1px. I have not tested this solution but it seems theoretically equivalent to the first solution.
Additional note: Two objects of EVEN dimensions should theoretically be able to center-align perfectly. But strangely enough, the alignment problem occurs even if the button AND the image BOTH have even dimensions. (Apparently the compiler is not consistent in the way it determines the center pixel of one control vs another.) Nonetheless, in this case, the same solution applies.
Typically, we'll set the following properties (for an image on the right, for example):
ImageAlign: MiddleRight
TextAlign: MiddleLeft
You'll want to align both the text and image in a similar fashion. Outside of that, make sure that you are setting the Image property, not the BackgroundImage property and make sure you are doing the icon to plain bitmap conversion properly. Have you tried a plain bitmap file?
Just a question: are you positive that the bitmap contains no information on the top of the note image? I have had that happen to me more than once where a crop looked right in Photoshop and came out incorrect in the live code... :)
If that were the case your code may be perfect ;)