I need to have a curve-shaped stretchy footer fixed at the bottom of the browser window, where the curve is an image. I've mocked up a live example.
To minimize the loss of "clickable" real-estate in lower layers through the transparent part of the footer image, my instinct is to cut the image into several segments (red boxes in the example) and position them next to each other like so:
#arc-segment-1,
#arc-segment-2 {
position: fixed;
z-index: 2;
bottom: 0px;
}
#arc-segment-1 {
width: 5%; /* where this */
height: 82px;
left: 0;
background-image: url(...);
}
#arc-segment-2 {
width: 5%;
height: 72px;
left: 5%; /* matches this */
background-image: url(...);
}
In most major browsers (not IE and FF), hairline fractures come and go between boxes as the window is resized, which is unacceptable.
Floating the image segments would solve the problem, but I have not found a way of implementing it that still fixes the footer to the bottom and preserve the mentioned "clickability". Is there a better approach to this problem than mine, or can it somehow be remedied?
Note regarding the example given: The curve image itself in the example has not yet been cut, it is still a single image. Also, the blue boxes are not a concern, they will not stretch so they are not affected by the problem.
I'd be interested in both the reasons of this behavior and any workable solution. Thanks.
you can add pointer-events: none; so you can click below
I stumbled over a somewhat workable solution myself while reading at the W3C:
If the width-property of the segments is taken out and both left and right properties are given, say for a 10% wide segment in the middle of the screen:
#arc-segment-3 {
left: 45%;
right: 45%;
}
It will behave like originally intended, although some browsers now seem to overlap the segments with a hairline instead. In my case, this is a much smaller problem as the texture of the arc is weak enough not to be much noticeable. Anyone with a pixel-perfect approach?
Related
I am creating a slider with custom "prev/next" navigation-arrows.
All the animations works fine. I use the transform: scale() to scale up the arrows when hovering and it all works fine. I just have one problem..
I want to prevent the arrow images to scale too.
I think I have tried everything: I've used somekind of :before/:after (see below) and it worked pretty good. But not in Safari (No transition when hover).
http://jsfiddle.net/XF4Qj/5/
Then I tried something else: Putting a span inside the arrow container, and when the arrow container was scaled up, the span was scaled down, but it didn't looked good at all (See below).
http://jsfiddle.net/Ajngc/1/
I have tried for hours, but I cannot get it to work in all major browsers.
So the question is: How to I prevent the arrow-images from scaling too, and just preserve their original dimensions?
It's only the white circle that schould be scaled up, and not the background image.
I've created a third fiddle, which has all the working code from my slider-arrow-functions:
http://jsfiddle.net/Ajngc/2/
Could be really great if someone could help me with this.
Thank you very much
- Jesper
Instead of transform()ing those elements, why not just change the size? See this updated fiddle.
.arrow:hover {
width: 50px;
height: 50px;
top: -5px;
bottom: -5px;
}
.prev:hover {
left: 35px;
}
.next:hover {
right: 35px;
}
Summary: Responsively-scaled sprites sliding and occasionally displaying incorrect sprite.
Background:
I've googled and perused SO for answers to this -- and found a few, such as this one -- but they haven't told me anything I haven't already been over time and time again. I've been working on this over the past week, and I'm feeling extremely frustrated. :(
Problem:
I'm trying to responsively scale chip and card sprites for use in a poker game. I have the scaling working perfectly (and in-game everything repositions and scales perfectly according to table size), but the sprites appear to "slide" during its resizing, and occasionally showing the incorrect card. While endeavoring to discover a solution to this most unseemly behavior, I've encountered numerous sites using scaled sprites correctly, but I cannot for the life of me determine what I'm doing wrong with mine.
Example:
I've prepared a jsfiddle with only the relevant portions displaying the issue, here: http://jsfiddle.net/VsfZD/2/
Applicable CSS: (to satisfy the jsfiddle+code requirement):
/* Cards are 47x64 (spritesheet is 53 cards wide, so 2491x64 px) */
/* Spacer is 47x64 */
.card {
position: absolute;
width: 4%;
max-width: 47px;
z-index: 306;
overflow: hidden;
}
.card img.card_spacer {
display: block;
height: auto;
width: 100%;
}
.card img.card_img {
position: absolute;
top: 0px;
left: 0px;
max-width: none;
max-height: 100%;
}
.two-clubs img.card_img { left: -200%; }
.six-diamonds img.card_img { left: -1600%; }
.ace-diamonds img.card_img { left: -4900%; }
.card_back img.card_img { right: -5200%; }
Please, if you can help me fix this I'll be greatly in your debt!
Additional req's: css only. no frameworks, no bootstrap, no js. must work in IE8
Webkit's penchant for rounding decimals to whole numbers of pixels causes the sliding of sprites. Unfortunately, no amount of css can alter this behavior, rendering my above question impossible.
That said, there is still a way to use scaled sprites within webkit, though by necessity it uses javascript.
As you must ensure that the scaled sprite sizes are always in whole pixels, you should pick a sprite size ratio (such as 3:4) with as frequent (whole-number) multiples as possible, and then only update the displayed sprites' sizes when your scaling results in one of these. It isn't perfectly smooth, and definitely not passive, but it does allow for working, cross-browser scaling.
I've resized our sprites to 66*88, and using this I finally have scaling cards working. At the start of window resizing, javascript hides all of the sprites (cards, chips, etc.) and updates their sizes and locations upon completion. This effectively hides any jittering from the user during resizing, and greatly simplifies animation handling.
I am making my website on SquareSpace and I am beyond frustrated.
I like to have a background (which squarespace offers user to do without code) and like to have some sort of semi-transparent cover on the portion of the background where the text is. I think it's called overlay(?).
Squarespace allowed user to add CSS code. I have no idea what to do. I tried to google, youtube and etc. but I can't seem to find how to do this. Can someone help me? I would really appreciate it. I spent so much time trying to figure this out. What I am trying to do is something like this (http://blog.squarespace.com). There's background, and there's semi-transparent on the top that covers portion of the background.
Add a div, set it to position: fixed, have all of it's location values (top, bottom, left and right) at 0, and give it an rgba() background.
Note that this will make anything under it unclickable (unless you also give it pointer-events: none).
Here is a jsFiddle example of the concept.
Madara Uchiha's answer will cover the entire visible window, not just part of it. It won't work on certain mobile devices, either (iirc, Android WebKit doesn't support position: fixed).
A better suggestion would be to do something like the following...
HTML:
<div class="wrapper">
text
<div class="overlay"></div>
</div>
CSS:
.wrapper
{
position: relative;
display: inline-block; /* You could alternatively float the div, this is just to get it to fit the text width */
z-index: 0; /* Not strictly necessary, but establishes its own stacking context to make it easier to handle compound/multiple overlays */
}
.overlay
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 255, 0.5);
z-index: -1;
}
JSFiddle showing previous version, with which the text is affected by the overlay, and current version, with which the text is not (and usage of pointer-events: none is unnecessary): http://jsfiddle.net/LGq8f/1/
Of course, if you don't want as fine control over the overlay area that the inner div gives you, you could instead just use display: inline-block or float: left/float: right, plus the alpha-valued background color, on the text-wrapping div and skip the overlay div.
I have a div which i want vertically aligned to 50% of the height of the browser window at all times.
I don't know what the height of the browser window is going to be at all times, should the user scale this window. If placing it within another element is necessary, great, but as just specified, I have no idea how tall the viewport is going to be at any one time.
I'm not going to be using javascript either.
I have read through the site, i have gone hunting for a solution, but I really want to throw this out there (again) as I have yet to find a solution that does exactly this, either by hook or by crook.
Thanks.
You don't specify if the has a fixed height or not? If so then you can do this with one element, just add the following example CSS:
.centered {
height: 100px;
width: 100%;
background: red;
position: absolute;
top: 50%;
left: 0;
margin-top: -50px; /* half the height of the element */
}
You could use a number of techniques, depends on how you exactly want to implement it. Some (older) but still relevant reading here.
First, I wonder if anyone can even say that question title ten times fast.
This should be pretty easy. I've been googling around, and while there are a lot of tutorials on it, I'm having trouble grasping the idea overall. I've even looked at some other SO questions that seem related but I've not been able to make them work.
I have 3 layers. header, menu, body. The real application is much more complicated, of course. But for the sake of this question this is sufficient enough data.
The entire page itself fills 100% width, but the content within each section will be fixed to 1024px wide. This was easily done with the reknown margin: 0 auto; style. So that wasn't an issue.
Here is the trick. The middle layer, the menu. I want the menu to overlap the border between the header and the content. Now then, doing this was also not too hard. I just absolutely position the menu and kick it down by 100px to get it to the right vertical alignment.
What I cannot seem to achieve is the horizontal alignment of the 1024px block. I've included a light fiddle and an image of the expected output (beware, jsfiddle's default preview pane is not 1024px wide, so it looks like it is working at first glance)
Update
Following the instructions at this post I was able to make it work. But it is only functioning in Chrome.
http://jsfiddle.net/dE8xE/
Desired Output (colors exaggerated for emphasis and distinction)
#site-menu {
background-color: #fff;
height: 64px;
position: absolute;
top: 100px;
display: block;
width: 1024px;
/* everything is easy when you have fixed width */
left: 50%;
margin-left: -512px;
}
Can you use percentage margins and width to achieve the effect you're going for? Setting the z-index to something greater than those of the other sections will get it to float over them. Example: http://jsfiddle.net/6xCfU/
margin: 10% 0 0 10%;
width: 80%;
z-index; 100;