I am trying to get a waved vertical borders with a box-shadow like this.
I am able to get the waved vertical borders but when adding box-shadow, it overlaps the waves as the waves are not statically positioned and don't directly belong to the container's vertical borders.
Use a different div for shadow with exact or slightly fewer dimensions than that of the wavy-border div. Use position: absolute; on both divs and give the wavy-border div a higher z-index to make it appear on the top of the shadow div. Set the yellow shadow but on the shadow div as you want. This way the shadow won't interfere with the wavy border.
You may want to put both divs in the same parent div and set the parent's display to relative. If you don't the absolute nature of wavy-border and shadow divs will be based on body and not the proper position in your HTML.
You can also use filter: drop-shadow(...); as Temani Afif mentioned in the comment. When doing this, you won't need to use two different divs. You just set the drop-shadow directly on the wavy-border div. drop-shadow makes it possible to shadow exactly based on the content, instead of based on a box.
Related
I need to place two repeated background images on the left and right border of a div. I don't know the width or the height of the div.
I though of placing the left border in the div, and floating the right border to the right.
This is my layout:
http://jsfiddle.net/WmLhV/
In Firefox it works ok, but in the other browsers, when the browser window is too short, and a scrollbar appears, the float disappears.
As you can see the container is of display: table-row. I cannot change this or the layout will break...
Is there any better way of putting an image to the right? even without a float?
your div with right align doesn't have height if you want to use 100% height you have to use position. check this fiddle i have done this via position http://jsfiddle.net/WmLhV/4/
Your <div> that's floated to the right doesn't have height. Firefox seems to understand the 100% height even when the contents of the <div> are empty but IE9, for example, doesn't.
One alternative approach would be to give your <div> that contains the text 60px padding-left and 60px padding-right, and then apply background images to it (note: multiple background images will only work in CSS3-friendly browsers). The padding essentially creates empty space for the your background images and always has the same height as the text.
A further, slightly more convoluted approach, would be to divide the inside area into three (left, middle, right) and setting display: table-cell (or using a table), and then essentially allowing the height of the left and right cells to adjust according to the height of middle cell which contains the text. This would reveal the background images on the sides according to the height of the middle text --- standard table behaviour. This would get rid of the need for floats. display: table-cell is not supported in IE6/IE7, but a normal HTML table would work fine.
I got this PSD comp from a print graphic designer and I'm not sure it's doable on the web.
Please note that the blacked bordered, rounded-corner container (pictured below), already exists. There are several z-indexed divs on this page, so it's hard to figure out which one has the priority in stacking order.
As you can see, I have the two grey ribbons on top (representing a box with ribbon and an ornament) stationed on the top-left and bottom-right corners, along with two images (the smaller blue boxes i.e.: To:/From:) underneath those "ribbons" but on top of the container. The background color for the container is white. The top-left corner has to have a transparent background so that the smaller blue box will show through. Can someone tell me how position these "slanted ribbon" on this rounded corner container div? Or if this can even be done using CSS and HTML.
Simplest answer is to have two <img>'s, and have them both absolutely positioned. Position one with a top:0px; left:0px; and one with a bottom:0px; and right:0px;. Give them a high z-index to ensure they are at the top of the div. Make sure the parent div has position: relative defined.
I have a div which I have set to absolute position and z-index above all the other divs on the page. The issue I'm having is where the absolute position div sits is above some divs that are interactive with the users mouse. Is there a way to turn off the interactive state of the absolute positioned div so the divs below are active.
Absolutely positioned elements use the z-index for stacking - which explains why content below is inaccessible. It is, unfortunately, not a case of interactive states, but simply of obstruction.
Any absolutely positioned block elements will obscure elements set below them as far as the dimensions of the uppermost element stretch (set a border on the div to see exactly how far the obstruction is occurring).
Your best bet (within the bounds of css) is to either position the obscuring div below where you need interactivity, or to add the properties of the obscuring div directly to the div being
obscured.
EDIT: i.e. there is no property in CSS to turn an interactive state on or off.
UPDATE 2011/11/11: see https://developer.mozilla.org/en/CSS/pointer-events for a solution to the question. pointer-events: none; is a valid solution to the question.
I have two divs, one above the other, i would like the bottom div to ignore the one above it. The bottom div has the top margin property. By ignore i mean i dont want the top div to be counted when it is using top margin (but rather to push against the wrapper which contains both divs.)
Just use absolute positioning for the top div.
If I understand correctly you could change the top div to position:absolute; which will take if out of the flow of the document.
I have a Coda slider on one webpage (hand-crafted, not using the plugin, but that's irrelevant) and the outer div has a border-radius.
A bunch of inner divs have background colors, but they stick out on top of the corners when I want them to be BEHIND the rounded corner.
Is there any way to achieve this?
If you apply position:static to the element with overflow:hidden you will achieve the results you are looking for.
Check this out: overflow:hidden, border-radius and position:absolute
I found that WebKit would crop everything if I put overflow: hidden on the element, but Gecko wouldn't (see my blog post for code and screenshots). The best I could do in Gecko was either put a border radius in the inner div too, or add a margin/padding to the wrapper div so that the inner divs sat below the corners.