I have a faux column for the sidebar with a background image repeat-y. However, I would like to add a drop shadow to the entire image. How do I do this?
I can't seem to be able to figure it out. Below the box shadow applies only to the sidebar, but I want it to apply to the entire home_navbg.jpg faux column.
<div id="wrapper">
<div id="sidebar">
</div>
<div id="content">
</div>
</div>
#wrapper {
width: 100%;
background: url('../img/home_navbg.jpg');
background-repeat: repeat-y;
}
#sidebar {
width: 240px;
height: 100%;
float:left;
box-shadow: 0px 4px 20px #231F20;
-webkit-box-shadow: 0px 4px 20px #231F20;
-mox-box-shadow: 0px 4px 20px #231F20;
}
Edit: In the end, I just put the drop shadow in the background image itself. I guess CSS3 can't do it all.
The faux column seems to be a tricky (hacky?) solution to the "how to achieve equal height columns" problem, if I understand it correctly.
CSS3 has new a property that could do what I assume you would like to achieve.
It is called box-flex: http://www.w3schools.com/css3/css3_pr_box-flex.asp
Though it has limited browser support (no IE, Opera).
Is this similar to what you want?
http://jsfiddle.net/yuUKv/78/
Actually, what is the reason to use faux column? Probably you would be better (browser support wise...?) off using a javascript solution (jQuery is relatively easy to use) to properly adjust height of elements.
Does this work?:
http://jsfiddle.net/yuUKv/
The 100% height is 100% of the parent's height which in your example is only the size of the content.
Related
I have the following code:
<div style="width: 100px;
overflow: hidden;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 20px;
">
2222222222222222222222111111111111111111111111113333333333333333333</div>
(XHTML 1.0 transitional)
What happens is that the padding-right doesn't appear, it's occupied by the content, which means the overflow uses up the padding right space and only "cuts off" after the padding.
Is there any way to force the browser to overflow before the padding-right, which means my div will show with the padding right?
What I get is the first div in the following image, what i want is something like the 2nd div:
image
I have the same problem with the overflow:hidden; obeying all the padding rules, except for the right hand side. This solution works for browsers that support independent opacity.
I just changed my CSS from:
padding: 20px;
overflow: hidden;
to
padding: 20px 0 20px 20px;
border-right: solid 20px rgba(0, 0, 0, 0);
Having container divs works fine, but that effectively doubles the amount of divs on a page, which feels unnecessary.
Unfortunately, in your case this won't work so well, as you need a real border on the div.
Your best bet is to use a wrapping div and set the padding on that.
I had a similar problem that I solved by using clip instead of overflow. This allows you to specify the rectangular dimensions of the visible area of your div (W3C Recommendation). In this case, you should specify only the area within the padding to be visible.
This may not be a perfect solution for this exact case: as the div's border is outside the clipping area, that will become invisible too. I got around that by adding a wrapper div and setting the border on that, but since the inner div must be absolutely positioned for clip to apply, you would need to know and specify the height on the wrapper div.
<div style="border: 1px solid red;
height: 40px;">
<div style="position: absolute;
width: 100px;
background-color: #c0c0c0;
padding-right: 20px;
clip: rect(auto, 80px, auto, auto);">
2222222222222222222222111111111111111111111111113333333333333333333</div>
</div>
Wrap the div and apply padding to the parent
.c1 {
width: 200px;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 50px;
}
.c1 > .c1-inner {
overflow: hidden;
}
<div class="c1">
<div class="c1-inner">2222222222222222222222111111111111111111111111113333333333333333333
</div>
</div>
If you have a right-adjacent element to the one in question, put padding on its left. That way the content from the left element will flow up to but not past its margin, and the left padding on the right-adjacent element will create the desired separation. You can use this trick for a series of horizontal elements which may have content that needs to be cut off because it is too long.
I've made a CSS progressbar, using 2 overlapping elements. The CSS for the elements is as follows:
#status_progressbar {
height: 22px;
width: 366px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #000;
cursor: pointer;
}
#status_progressbar_progress {
height: 22px;
background: #eee;
float: right;
-moz-border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
/* width controlled by Rails backend, using inline style */
}
Unfortunately, the background from the parent is partly visible at the right edge, as you can see clearly in this picture. Since the background from the child element should precisely overlap the parent element, I don't know why this is the case.
[Picture taken in Firefox 4]
Maybe someone could explain to me why this is happening and how to solve it?
This is a known problem. One way around it, is by nesting rounded elements when you need a colored border. Pad the other box with the same amount as the width of the border.
More information can be found in this blog post by #gonchuki: Standards Compliancy is a lie (or, how all browsers have a broken border-radius)
An alternative COULD be to simply use the status_progressbar div (no children). Create an image that is wide enough (say 1000px) and the colour of your choice (personally i'd create one white 50% opacity).
then:
#status_progressbar {
height: 22px;
width: 366px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #000 url("/path/to/image') repeat-y 0 0;
cursor: pointer;
}
I would then manipulate the background position property with javascript ALWAYS providing a px value NOT a % as %50 would center the image.
var prcnt = (YOURPERCENTAGE/100)* 366;
I was able to get a pretty good result by adjusting the CSS Slightly. (DEMO - Tested in Chrome & FF)
#status_progressbar_progress {
...
margin-right:-1px;
...
}
This just nudges the grey div to the right by a pixel. You can even up it to 2 pixels, which I think looks even better. Make sure you compensate for that pixel change in your calculations.
I think this happens because the browser tries to antialias the border and it probably does that by adjusting transparency so your under div is black and top gray so black gets trough. (don't quote me on this but thats atleast what seems logical to me).
Have you tried wrapping both status_progressbar and status_progressbar_progress in another div and give border-radius and overflow:hidden to that div?
You could try changing the border radius on the right hand side up by 1px on the background element. That might make it disappear behind the front
When adding a border-radius on an iFrame's parent div, the border doesn't perfectly fit the iFrame, even when they are assigned the same width and height values.
I've added arrows pointing to the visual gaps in the resulting image below. Screenshot is from the latest version of Chrome (March, 2016).
HTML Code:
<div class="mapFrame">
<iFrame class="googleMap" src="http://maps.google.co.uk/maps?q=sanfrancisco&output=embed" width="500" height="400"></iFrame>
</div>
CSS Code:
.mapFrame
{
border-style: solid;
border-width: 6px;
border-color: #ffffff;
box-shadow: 0px 0px 20px #000000;
margin: auto;
border-radius: 80px;
overflow: hidden;
width: 500px;
height; 400px;
position: relative;
}
Result:
Have you tried .mapFrame iframe {border: none}? From my computer (also latest chrome), it appears to be the default iframe border. You might also consider making the iframe display:block as inline elements tend to have line height and letter spacing that throws off pixel exact rendering.
Border radius isn't well supported or consistent yet. If you want the desired effect, try using DIV's around the element and use graphics instead, with an overflow of hidden in your CSS. You might want to look into the sliding doors technique if you're iframe varies in height.
http://www.alistapart.com/articles/slidingdoors/
Hope this helps.
Good luck!
I would like my wordpress site to show the different excerpts of text in separate containers that seem to float on top of a textured background, as in the following website: http://www.sopcial.com/
I would also like this effect in my posts, so that the post itself is in one container and the sidebar with related posts is in a different container. Is that possible?
I tried using the code provided by jmoore009 (except I changed the width to 1000px), but somehow the height of the container changes (or it looks like that to me). Besides, adding this code brings up a container in the header and another one in the footer... How can I erase them?
The link is http://www.planificamostuviaje.com
Thank you
you can use box-shadow to give it the appearance that the container is sitting on top of the background:
<div class="container content-box"></div>
.content-box{
background: #FFF;
width: 200px;
margin: auto;
padding: 20px;
box-shadow: 0px 0px 7px rgba(0,0,0,.4);
border-radius: 3px;
-moz-box-sizing:border-box; //add to fix padding
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
FIDDLE
Not to start a big debate about tables vs css - here goes
I have a two column layout I want to achieve as you can see here:
http://jsfiddle.net/p5S5J/1/ (not to scale)
Here is my attempt at getting layout to work with DIVs
http://jsfiddle.net/xyt2r/1/
Basically, is there a way to have that second DIV automatically fill up the rest of the space in it's (fixed width) parent container without having to specify a width for it?
UPDATE
#thirtydot came up with this (I edited a bit): http://jsfiddle.net/thirtydot/xyt2r/5/
It seems that overflow: hidden on the second DIV keeps the border. I'll have to look at this closer since there seems to be some weird margin action in Chrome and I'm not convinced this isn't Voodoo yet. Anyone care to explain why/how this works?
So, I'm making a proper answer out of my comment. I've improved the CSS slightly.
See: http://jsfiddle.net/2WUgK/
I'm not convinced this isn't Voodoo yet
This will work in IE7+ and all modern browsers. The voodoo is thoroughly explained here :)
HTML:
<div id="my-container">
<div id="column-1" class="layout">Hi!</div>
<div id="column-2" class="layout">Hello</div>
</div>
CSS:
#my-container {
width: 200px;
border: 1px solid red;
padding: 6px 6px 6px 0;
}
#column-1 {
margin: 0 6px;
padding: 6px;
width: 60px;
float: left;
}
#column-2 {
padding: 6px;
overflow: hidden;
}
.layout {
border: 1px solid blue;
height: 120px;
}
I have created the layout you were looking for. Simple use of Float, and Clear (css elements) http://jsfiddle.net/louis002/ZWGfQ/10/
I prefer using tables since it seems to be more cross browser friendly.
But I hear you, so what i've done when i use div tags is "float" the left column left and float the right column right
<div style="float:left;">left column</div>
<div style="float:right:">right column</div>
I've had better luck with this than specifying widths since some browsers may not display it right or if i have dynamic data inside of it and it shifts, boom! your page is now all out of sorts.