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.
Related
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.
This needs to be compatible with all modern browsers and IE7 and IE8.
What I'm trying to do is have a repeated background image for the page with a linear fade that makes the bottom darker. http://i.imgur.com/rrzyw.jpg
Here's my example code: http://jsfiddle.net/hxk2d/2/
As you can see, I have two floated divs in the example above. The body linear gradients do not show up for some reason. I figured out it was because of the left div being floated.
As soon as I delete the float for the left div, you start to see a gradient but it only appears within the container.
Obviously, I'd prefer this to work whether there's a floated div or not. My test browsers were both Chrome and Firefox, both of which performed the same behavior.
What am I missing?
Please look at my example, I'm not 100% sure but I think the parent div of your two floats didn't had a height calculating as a result of the 2 floating div's, the parent tag of that div is the body that doesn't have any height because nothing inside has, as a quick fix i added some the clearfix class to the parent of the floating div's
Here is the example link:
http://jsfiddle.net/sHXf2/
I modified your gradients to make them more visible, Hope this helped
Ive got a container div with overflow:scroll;. It contains a tiled background div (width:100%; height: 100%;) with lots of draggable divs over the top.
When the draggable divs make the container div overflow, how do I get the tiled background to cover the overflow as well?
Thanks!
As #schellmax suggested in the comments, the obvious solution would seem to be to apply the background-image to the container div, instead of another div inside that. That would be the most elegant solution.
If that's not a possibility, such as when you want to use a transparent repeating background-image over the container div's background, then you might try not specifying a specific width on the inner div (width: auto or width: inherit). Then, for the height, you may try height: inherit. If that doesn't work (I haven't tested it), perhaps a javascript solution is in order - although still, I'd rather go with what I said in the first paragraph.
I have a fixed-width page that I want to add a simple border to with the Border CSS command. However, I don't want this border to balloon the page and cause smaller screens to have a horizontal scrollbar. I'm not too great with CSS, but I know enough that I looked into using negative margins to offset the border's width since I had already done something similar to add borders to other elements that I don't want moving. But when I do so on my main container div, everything gets thrown off-center and smashed up to the left side of the page. I'm using the Blueprint CSS framework and I figured there was something in there that was messing with my margins, and I found the main container is applied a "Margin: 0 auto;" to center it on the page.
So, I ask now, how the hell can I apply a negative-margin border to a page while still centering the layout on-screen? I've tried to wrap the container in a div and apply the border and negative-margin to it, but no dice, I tried nesting a div inside the container and applying the border to the container, but that went badly as well. Somebody throw me a bone here!
If the negative margin is working, you can get the centering back by adding a wrapper div with a fixed width and margin: 0 auto.
In my testing, the negative margin didn't change the width of the box. A few other strategies:
Adjust the width of your div to offset the width added by the borders.
Add a background image to the div that simulates left and right borders.
Use JavaScript to detect the width of the window and remove the border when necessary.
Add body { overflow-x: hidden } to suppress the horizontal scrollbar.
Use a CSS3 media query to add the border only when there's enough room (optionally falling back to JavaScript (see #3) for older browsers).
Update: Instead of negative margins, you can probably use box-sizing: border-box so that the border doesn't add to the element's width in the first place.
I essentially have two div tags I'm dealing with. On this page - www.employeratlas.com/search.html - when you click on any of the four tabs that tab has a border around it. The idea is that the border is black on the left, right, and top, and is white on the bottom to cover up the border of the div below it. This works fine in everything but IE6 and IE7 (IE6 example here http://www.employeratlas.com/images/ie_tabs.png). I've tried setting the z-index to make the top tab above the other, but it doesn't work.
IE has a different interpretation of z-index, taking into consideration parent elements' z-indexes. In essence, it's not possible to elevate an element above its parent's z-index.
Background info on quirksmode.org
An example of working around it