im trying to use Opacity to make a background semi-transparent, but any content i put in the div also takes on the semi-transparency. Anyone know how i can circle around this? Here is the code in question:
<div class="serviceContainer"> //The transparent div
<div class="overflowAuto">
<div class="left">
<asp:Image ID="img" runat="server" />
</div>
<div runat="server" id="divTitle" class="title table centreWithMargins">
</div>
</div>
<div runat="server" id="divText">
</div>
</div>
And the css:
.serviceContainer {width:350px; display:table; opacity:0.2; filter:alpha(opacity=20); background-image:url('../Images/glass.jpg'); background-repeat:no-repeat; background-position:center;}
.serviceContainer img, p {opacity:1.0; filter:alpha(opacity=100);} //I tried to set the opacity of the contained elements, but it didnt work
Thanks
It depends on the image size of "../Images/glass.jpg" but the simplest and most cross-browser way probably would be to convert this image to semi-transparent png-image.
Another, not so clean and cross-browser way (not working in ie6 and ie7) would be to use :before pseudoclass.
Example code: http://jsfiddle.net/ZXDvc/
Don't use opacity to create transparency, use rgba(x, x, x, y) where y is the opacity level between 0 and 1:
example:
#something { background: rgba(0, 0, 0, .6); }
Opacity is inherited from the parent, so regardless of what you set for the children, they will always take on the opacity of the parent.
There are plenty of hacks and workarounds, but in general the simplest solution is to place the img / p in a separate container that is positioned (absolutely or otherwise) directly on top of the background container.
Related
My objective is to create an area that displays clickable text content, has hover that changes the whole area, and does NOT spaz out when the whole div or text is rolled over. I want to do this with css.
For example, I want a div, say 500 x 500 px, inside of this div are p's and a's that need to be clickable. It works normally. Something like:
<div style="width:500px; height:500px;">
<p> xtext <a>xlink</a> </p>
<p> xtext <a>xlink</a> </p>
</div>
And then, I want a div on top, that has a rollover (hover) function that covers the whole first div, hazing out the whole div with a transparent color, until rolled over, when the transparency is set to 0.0, and appears gone. But I want the links from the first div to be clickable (to do this, I give this second div pointer-events:none). I place this code* inside the first div, so in total looks like this:
<div style="width:500px; height:500px;">
*<div class="divhover" style="width:500px; height:500px; position:absolute;">
</div>
<p> xtext <a>xlink</a> </p>
<p> xtext <a>xlink</a> </p>
</div>
Styling with css class:
div.divhover {
background-color: hsla(0, 100%, 100%, 0.5); }
div.divhover:hover {
background-color: hsla(0, 100%, 100%, 0.0);
pointer-events: none; }
Without pointer-events:none, this works like a normal hover function: if your mouse is not on the div area, there is a white layer of 0.5 transparency. If your mouse is on it, the transparency is 0.0 and looks as if it is uncovered. This, however, does not allow the text and links elements to be clicked.
With pointer-events:none, the text and links are clickable but it results in the hover to deactivate when a cursor is over the p or a elements. This makes the whole div spaz out and blink if the cursor moves around, and rapid blinking if the cursor is hovering on a link! I don't want this!
I hope all you with much more css/html know-how can help me (I don't know much). Before getting this far, I tried setting z-index:-1 on .divhover:hover to have the text and links in the first div be clickable. I also tried using position:absolute moving the second div off the page (left:2000px). These both resulted in the same situation, as they are only different ways to do the same thing with pointer-events.
Here is a jsfiddle where you can see the blinking:
http://jsfiddle.net/6wU8X/
Although it's not apparent here, if you take out pointer-events:none, the links and text would not be clickable.
The flicker you're seeing is caused by setting pointer-events:none; on the hover property.
You're telling the browser to ignore all pointer events, even the ones that trigger hover states. So the moment you activate the hover css you deactivate it, causing the flicker (it's updated by mouse pixel movement).
CSS:
.divhover:hover {
background-color: hsla(0, 100%, 100%, 0.0);
}
Update: If your ultimate goal is to simply grey out the text until you hover over it, then you might try this:
Working Demo
HTML:
<div class="hover">
<p> xtext <a>xlink</a> </p>
<p> xtext <a>xlink</a> </p>
</div>
CSS:
.hover {
width:500px;
height:500px;
background-color:#ccc;
color:#333;
opacity: .5;
}
.hover:hover{
opacity: 1;
}
I think you may be going about this effect in an odd way. You can add a hover state on the containing element and toggle the opacity.
I can't come up with a way to do this with CSS. If you're open to JavaScript and jQuery, here is a fall back if no one comes up with a CSS solution.
Add a class to the parent div:
<div class="parent" style="width:500px; height:500px; background-color:#ccc; color:#333;z-index:10">
<div class="divhover" style="width:500px; height:500px; position:absolute;">
</div>
<p> xtext <a>xlink</a> </p>
<p> xtext <a>xlink</a> </p>
</div>
Include jquery and add the following script:
$(document).ready(function(){
$(".divhover").mouseover(function(){
console.log("Over");
$(this).hide();
}
);
$(".parent").mouseleave(function(){
console.log("out");
$(".divhover").show();
});
});
See it in action here: http://jsfiddle.net/6wU8X/2/
Hopefully some one comes up with a CSS solution though!
I need to make div, which will have for example opacity:0.5, an inside of this will be another div, which won´t be transparent. I can´t figure this out. Even if I set z-index of inner div higher than the outter div, it´s still everything transparent. Now I got it like this:
<div id="outter" style="opacity:0.5; z-index:-1">
<div id="inner" style="opacity:1; z-index:1">
<img src="someImg.jpg" />
</div>
</div>
Try this
<div id="outter" style="background-color: rgba(255, 255, 255, 0.5);">
<div id="inner" style="opacity:1; z-index:1">
<img src="Your image" />
</div>
</div>
Opacity inheritance is quite finicky. You could try hack your way around it, or use rgba() on #outer (remove opacity and z-index)
Like:
#outter { background: rgba(0, 0, 0, 0.5); }
Similar quesition
opacity is inherited by all children, so it's not so useful in this scenario. A better option is to use rgba colors. So, for example, you could set the colors of the outer div to
.outer {background: rgba(0,0,0,0.1);}
... and so on.
The only other option—if you are determined to stick with opacity—is to place the inner div outside of the container and reposition it over the top of the .outer div. (You would need to wrap them both in another container with position: relative to do that, and then position the inner div absolutely in relation to it.)
I have a webpage that is styled using CSS
The contents of the web page are contained within DIVs.
Example:
<div id="container">
<div id="ticker">
</div>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
I want a background on the container div that will show as a semi transparent background (in a desired color), and then all the contents inside the div to appear normally without transparency.
I have tried methods including apply a opacity to the parent div, but it applies it to all the child divs which I do not want.
How do I do this?
Use a 1x1 background image (a png) at whatever transparency of whatever color you'd like and let it repeat.
You could use an rgba value for your background color instead and set the alpha value to your desired opacity level:
background-color:rgba(255,255,255,0.125);
http://www.w3schools.com/cssref/css_colors_legal.asp
you can use rgba value for this. Write like this:
#container{
background:rgba(0,0,0,0.5)
}
For IE there filter for this like this:
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6 & 7 */
zoom: 1;
You can generator your rgba filter from here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
I have an image inside a div, and I'm setting 1 pixel border to the div but there is a padding at the bottom between the border and the image. Can anyone please explain why?
Here is my html code:
<div id="border"><img src="example.png" /></div>
Here is my css:
#border {
border: 1px solid #000;
float: left;
}
use vertical-align:top for image
Browsers apply their default styles unless specified by your css, try explicitly setting padding in your css.
Firebug has a useful feature to let you see which styles have been applied to the elements on a page.
Hope this helps
Make sure the image has both padding and margin set to 0, e.g.:
img{padding:0;margin:0}
Or, to change just that image, apply a class to that particular image and set the style for that class, e.g.
<img class="foo">
.foo {padding:0;margin:0}
You are double closing your img tag:
You have
<div id="border"><img src="example.png" /></img></div>
Should be:
<div id="border"><img src="example.png" /></div>
Ok here is the site:
http://danberinger.com/
If you view the source for the HTML and CSS you can see that I have set the height of the div in the middle to 100% and given it an overflow property value of hidden, it is called "main_content". I realized that the height value is having no effect on what is displayed, the overflow value of hidden is allowing the background color of the main_content div to extend down to the footer. I guess I am wondering what the best way for me to achieve a variable div height on each page or "main_content" while maintaining the background color. Am I doing this the right way or am I using some kind of css hack that is not the proper way to do it. All insight is welcome. Make sure to take a look at the source HTML and CSS before giving me an answer.
The easiest solution would be to assign the background color to your body element. Something like this:
body {
margin: 0;
padding: 0;
width:100%;
height:100%;
background-color:#cccccc;
}
This will also eliminate the few pixel white border around the edges, if you want to maintain that, take out the margin and padding declarations.
I might have misunderstood what you want, but try this:
Replace div#intro_container with:
div#intro_container {
width:830px;
margin:auto;
overflow: hidden;
background-color:#333333;
}
And remove the height property from div#messagebox.
I prefer to do in this way:
In the content of div 'main-content', add
In your case it was
<div id="main_content">
<div id="navigation">..</div>
<div id="intro_container">..</div>
</div>
It cam be rewritten as
<div id="main_content">
<div id="navigation">..</div>
<div id="intro_container">..</div>
<div style="clear:both"></div>
</div>
AFAIK This is a standard way to achieve what are you doing.