I have added CSS box-shadow to <img> in a blog post. The imgs have max-width:100% set so that they fill the column when it is resized.
The shadow spills out into margins due to box-shadow rendering outside of border in the CSS box model. I want to give the images some extra margin so that the shadow sits inside of the column. However if I use margin this will make the imgs wider than the column.
Is there a nice way to make the shadow sit inside without affecting the width as above?
Thought of wrapping in another element but it's a shame to do that.
If I had used solid borders I could have used box-sizing:border-box; to achieve this but it doesn't have any bearing on box-shadow?
How about max-width 98% or alightly lower and then the shadow should be just inside?
Related
Say I have a row of 3 icons, each 20px x 20px, then some links (however wide the link text is) then another couple of links. I'm using flexbox to space the elements and what I would like to happen is that the space between is evenly distributed between the elements. What actually happens is that the svg will increase its size to take up the entirity of the free space.
I have tried taking out the height and width attributes from the svg but the image disappears altogether. I haver also tried a wrapper div but the svg forces it to take up the remainder of the space.
In case anyone finds this post, svg does not have any intrinsic width or height so by removing the width and height attribute from the svg something higher up in the chain needs to have an explicit width or height, then the svg will fill that space.
I'm trying to use SVG symbols as described in this CSS tricks article, but get a gap on the left and right around the SVG and it's width is 300px wide.
I want the SVG to fill the full width of the container. Adding width: 100% to the SVG doesn't help.
I've made a codepen to explain what is happening. The first example shows the problem.
Adding a viewBox attribute corrects the issue in the second example, but that's not ideal because I'm generating the SVG symbol from a folder of SVGs using webpack. So the viewBox information will have to be copy/pasted every time I reference an SVG in the HTML. This isn't ideal when you consider other people might want to edit the SVGs at a later date and might not realise they have to manually update the viewBox info in the HTML, which would result in broken looking icons.
This would become as unwieldy as having to explicitly add the dimensions of an image to all <img> tags. Not a great situation!
Is there any other way to fix it without adding a viewBox attribute?!
Slowly losing my sanity... I've tried every search term I can think of, but can't find anything about what would seem to be exceedingly simple.
All I want is for the size, aka viewport, of my SVG to fit the containing elements.
I specifically don't want it to scale, crop, meet, slice, zoom or anything else. I just want it to behave like a default div.
The SVG will then be placed inside a div with a max-height and overflow:auto. When the SVG expands beyond the max-height of the containing div I will be able to scroll the div to see the whole of the SVG.
So, I am designing with a fixed width. I just want the gutters to be flexible. So, I tried just using parent div's with 100% width. As you can see in this fiddle:
http://jsfiddle.net/P3Ckk/115/
What I intended was for what is happening with the fixed div ("nav" div) to happen. When the user window gets too small, I'd like the 100% width to collapse upon the fixed width elements (in this case, 1000px) and enable horizontal scrolling.
However, my parent width:100% does not work like that with relative positioning. The "top" "title" and "container" divs all stop at whereever the screen stops. I suppose that is 100% but it leaves the fixed width content overflowing these (now) smaller parent divs!
Additionally, the problem also shows up when a vertical scrollbar comes down. The area to the vertical scrollbar is considered 100% and the remaining gets left blank. This also creates a horizontal scrollbar to view this "extra" part.
What is the best solution here? Should I abandon my parent div 100% width approach?
I've tried making the these 100% divs have min-width:1000px, but that doesn't seem to work. I'm just a bit stumped here.
Any help appreciated. Thanks!
I've read about this before. Before you can use 100% in a div width you must set the css of both your body and html tags to 100%.
html,body{
width: 100%;
}
or else it will stop at the edge of the screen on any device.
I have a box-shadow on my #primaryNav div. Unfortunately, the shadow is being covered/hidden by the background of the following #page element.
I tried to set a z-index of 100 to #primaryNav and a z-index of -100 to #page, but that does not fix my problem.
Any ideas what I'm doing wrong?
You need to define positioning for #primaryNav. Z-index only affects positioned elements.
I just added this in firebug and it fixed:
#primaryNav {
position: relative;
}
I would avoid using a negative z-index. Simply change z-index of #page to 0.
As jlego already said a relative position should fix it.
By the way I would suggest ensuring that there is no shadow left or right of the #primaryNav. Since #primaryNav has a width of 100% a shadow on the side makes a horizontal scrollbar appear.
For fixing this you could set a overflow:hidden to #iframe
I took a look at your site and I think the border-bottom property of #primaryNav is covering up your shadow.