I need to modify a website to make the clickable zone of all links bigger for mobile devices. I gave all links a transparent border and a negative margin of the same size, to not affect the text-flow. Now this works like a charm. But not on elements that have a background. The background spreads out to the transparent border. This is behaviour seams to be consistent among all browsers.
http://jsfiddle.net/hq65C/1/ here a other example: http://jsfiddle.net/DytDA/
Why is this? I was always thinking that the border is outside of the element. How could I fix this. (I need a solution that does not require to modify the HTML).
How about background-clip: padding-box;?
Demo
i think that if the border were outside the element, the behaviour you are behind (that clicking on the border behaves as clicking inside the element) wouldn't work either
if the background-image is not repeated, you can set background-position x position to the same amount that your border width. else, you can also try setting the border-color to the same as the color behind the element, but if it is an image, good luck
CSS background fills the area of the border, with the border-color layering over this.
As you have a transparent border, it is displaying the background-color behind it.
With plain HTML/CSS, I'm not sure there is a way around this.
This jsFiddle demostrates this:
http://jsfiddle.net/hq65C/8/
try this:
<span style="background: red">link</span> test test test <br/>
test test test
notice: the span means an inline element with another style (other CSS values). other that div which will force a new block.
Related
Having the situation described in this image, I need to find solution for such a border using CSS-only, if it is possible. The height is not fixed, it can be variable. And the border should start and end like it is shown. And there is a border for that wavy line.
Red color on the screen is just to show you how it works.
I need this to work on IE9+.
IE 9+ is difficult, since border-image property won't work here...
If you can do it withour proper endings, you can just use the border-color in combination with a background image, that is y-repeated and right aligned.
I have an image inside the .nav container with background-positioning property set to right that is set under the hover selector to display. It's working almost perfect except I want to move the image over to the left a bit closer to the actual navigation link. When I try to use inset border thickness or absolute positioning it it either moves the text for the nav link as well (inset border thickness) or its get really messed up when I use absolute positioning for background-position. Any way to move the image without it affecting any things else around it? New to HTML5 and I am using dreamweaver CC and am unfortunately away from my comp at the moment.
Try setting the left property of the background image. In my experience, if you mess with the container then it will mess with everything else. Also, you might have to tinker with the actual image to get it look right.
Consider the following code: http://jsfiddle.net/A98vk/
The wrapper div has two (top-left and top-right) corners rounded. The second div is directly nested and I would like to give it a background gradient.
The problem I experience is that the background linear gradient (sorry for only adding webkit version, I have Chrome) gets cropped when the css property border is either absent or set to 0 or 0px [any params]. When I set the property back on, the problem resolves.
Can anyone please tell me what's the problem with it?
I understand I can just set border: 1px solid rgba(0,0,0,0), but this seems like a workaround for me.
Margin collapsing is happening. There are tons of questions/answers about margin-collapsing on stackoverflow. I've answered one (maybe more) myself: Adding CSS border changes positioning in HTML5 webpage
Basically the h1's margin "collapses" and is applied to the surrounding header instead. No background is cropped. The header simply gets smaller.
Elements margins collapse when there is nothing in between them. When you add the border up there you put something in between them, hence no margin collapse.
There's a little more to know about this, including other ways to stop the margins from collapsing. You can check my answer above or simply google it for perhaps more detailed explanations.
You can add overflow:auto (or hidden) to the .header div and fix the cropping.
See this demo
I have a few radio buttons that I'm styling with PNG background images, using :hover to swap out the background image for one with a surrounding halo. The halo areas from adjacent radio buttons overlap, so they should not be part of the clickable area. Yet they are still part of the same image.
Ideally, I'd like to show the halo behind the padding area, so I need the content area of each radio button to be clickable, but not the padding. I can't find any CSS attribute that controls this. The pointer-events attribute is almost, but not quite what I need, and most of its values apply only to SVG anyway.
All that Google searches turn up are pointers on how to use the padding to make the clickable area bigger, not smaller. I can use CSS3-only attributes if necessary, but would prefer not to add any extra markup to my HTML.
Any bright ideas?
I'm afraid this is not possible without adding extra markup. If you were using divs you could add a pseudo-element that contains the background image, but unfortunately it is not possible on input elements (:before and :after).
You need to add a wrapper div that handles the background image:
http://jsfiddle.net/sQGV9/
Also, beware of the usability issues this may cause, a hover effect usually implies that the element is clickable, so in the jsfiddle I added a cursor: pointer so it is clear the precise area where you are supposed to click.
If you attach an image with the halo effect you want to achieve it may be possible to achieve the effect in css3, removing the need for extra markup.
You should change it to margin. Than should be not clickable.
if your border or padding is thicker, then You can keep a new div on it with the position absolute,higher z-index and the alignments using 'top' and 'left'
I need to create this layout and I'd like to do as much of it as possible with CSS, rather than using images and whatever.
As such, how can I do this in CSS? (if at all?)
As you can see, there is the image behind, with the button overlaid with padding. The bit that I'm struggling with is creating the curves on the IMAGE above and to the left of the button and bottom to the right of the button (I've pointed them out on the pic below).
Any help would be great.
Thanks
I know just enough CSS to be dangerous so I can't detail every step, but I think you can approach it like this:
Split the background image into two separate images both at a z-index of 0 at the height of the top of the grey box. I think you can use two div's that reference the same original image with different offsets (similar to CSS Sprites) but I don't know the details of how to do that. The left edge of the lower div would start where the grey box ends. Round the lower-left corner of each "image" div.
Add the grey box at a z-index of 1 with appropriate rounding, and then the blue box at a z-index of 2, again with appropriate rounding.
The background of the block element containing all of this would also have to be grey to match the grey border and properly fill in grey where your right-most arrow is pointing.
You don't have to split your image at all, only the container divs.
Let me detail a bit:
You can have your image set as a background image instead of putting it in a src attribute of an img tag. This technique is most commonly used when working with CSS sprites.
So, if you have you uppermost div at a constant width and height, if you try to apply the background image in it, you'll see it fits very nice.
On the bottom, you have two divs or whatever block element you'll like, just be sure to put fixed width and height, so the background will be applied and you will be able to actually see it.
Then all you have to do is fiddle with css background-position to adjust the SE chunk of image.
I'll be putting a small demo together to better illustrate the idea.
After you have a big div at the top, and two smaller at the bottom, where two of them share the same background-image, but with different background-position, you can safely add some css3 border-radius to fit your roundness needs. You can also use some tool like http://css3generator.com/ to add a compatibility layer on all browsers with ease.
That is very easy to realize with pure css. The page you have shown is divided into 3 divs without any margin. You only need to set the right border radius for each div.
This is a function of the background image, which is a css element if that's what you mean, but it is not a seperate attribute for a selector, at least not in standard CSS. Wait until CSS3 becomes more prevelant, then it's corner-radius or some such thing.
Well it's 3 probably 3 seperate divs, a hole "burned" into the background image, or a div being overlayed for the button.
The best way to figure out how it's done is to read the source of the page you found it on.
For convenience:
If you have a webkit based browser like chrome or safari then enable developper mode mouse over the button "right click" and choose inspect element. Otherwise you can pour over the page source until you find what you want.