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.)
Related
Note that yes there are similar questions here, but I tried what they have mentioned as solutions, and I still can't get my items centered. I have stuck text-align: center, display:inline-block; margin: 0 auto and width: 100% in multiple places and I still can't get the items to display centered.
O.k. With that out of the way, here is the code and then the explanation below:
<h4 style="margin-bottom:-15px"><strong>The Item Item Below:</strong></h4>
<img style="float:left;width:100%; max-width: 408px; height:100%; max-height: 134px; background-color:red; margin-top:40px; margin-right:20px"
src="http://s25.postimg.org/kbrcsousf/408x134.png"> <span style="float:left; margin:0 auto; max-width:100%">
<p style="text-align:center; text-decoration: underline"><strong> Works
with these Things:</strong></p>
<div style="float:left;max-width:100%; width:160px;text-align:center;margin-right:20px;margin-bottom:20px">
<div style="background-color: rgb(255, 0, 255);"><span style="text-decoration: underline;"><strong>Flowers
A<br>
</strong></span></div>
<div style="background-color: rgb(0, 255, 255);"><img src="http://s25.postimg.org/i8gxl0uzf/140x124.png"></div>
</div>
<div style="float:left;max-width:100%; width:230px;text-align:center;">
<div style="background-color: rgb(255, 0, 255);"><span style="text-decoration: underline;"><strong>Flowers
B<br>
</strong></span></div>
<div style="background-color: rgb(255, 255, 0);"><img src="http://s25.postimg.org/a48tga8kf/209x112.png"></div>
</div>
</span>
Now the explanation:
So, I first started out with the first image on a line by itself and then had the bottom two pairs of divs below it. I figured I was wasting a bit too much horizontal space, so I placed the two pairs of divs next to / to the right of the "408x134" image by placing float:left in that image and enclosing the two pairs of divs with a span tag and placing float:left in it.
I am designing this with responsiveness / mobile in mind and am trying to avoid using #media for now.
So, when one reduces the size of their screen on their browser horizontally, the two items to the right drop down as a pair below the "408x134" image, which is what I want. As the screen gets even smaller, the two items below get separated, with the "209 x 112" image going underneath the "140 x 124" image. (Well, that and the div label above each one of them).
This is what I want. However, the final part I can't get is that I want those two pairs of divs to be centered. How can I do that? If you can give an explanation of your solution also, that would be great, so that I can finally understand how to fix this problem in the future or avoid it in the first place. Now I realize that the first pair of divs -- Flowers A and "140 x 124" won't be exactly centered as I have placed a right margin, and that is so that there can be some space when they are next to one another horizontally and also under one another when they are stacked on a smaller screen. For that to be centered I think I will have to use #media tags to remove/resize the margin and add a line break or another div or something.
Try the code below:
<h4 style="margin-bottom:-15px"><strong>The Item Item Below:</strong></h4>
<img style="float:left;width:100%; max-width: 408px; height:100%; max-height: 134px; background-color:red; margin-top:40px; margin-right:20px"
src="http://s25.postimg.org/kbrcsousf/408x134.png"> <span style="float:left; margin:0 auto; max-width:100%">
<p style="text-align:center; text-decoration: underline"><strong> Works
with these Things:</strong></p>
<center>
<div style="margin: 0 auto;display:inline-block;max-width:100%; width:160px;text-align:center;margin-right:20px;">
<div style="background-color: rgb(255, 0, 255);"><span style="text-decoration: underline;"><strong>Flowers
A<br>
</strong></span></div>
<div style="background-color: rgb(0, 255, 255);"><img src="http://s25.postimg.org/i8gxl0uzf/140x124.png"></div>
</div>
<div style="margin: 0 auto; display:inline-block;max-width:100%; width:230px;text-align:center;">
<div style="background-color: rgb(255, 0, 255);"><span style="text-decoration: underline;"><strong>Flowers
B<br>
</strong></span></div>
<div style="background-color: rgb(255, 255, 0);"><img src="http://s25.postimg.org/a48tga8kf/209x112.png"></div>
</div>
</span>
</center>
I've tried looking at your HTML and I think you're missing a few tags. Additionally, best practice is to not have CSS styles inline with HTML; you typically want to have CSS in a separate stylesheet. Getting past all that, I think you need to know some things about the elements and properties you are working with.
A div is block-level element by default, which takes up 100% width of its container (parent) unless you add some other overriding style to it. One option (which you've selected) is float:left; which will get this element to act sort of like an inline element (like a span or img) except it will always try to align itself with the left of the container; no matter the type of alignment you've set to the container.
What I will recommend in your case is setting the image container div elements to display:inline-block; instead of float:left;, that way it will be affected by a parent's text-align:center; property and when there's no room for all of the div elements to be in a row, they will fall down underneath but be aligned in the middle. You don't currently seem to have a container element but your setup should probably look something like this:
#container{
text-align:center;
}
#container .imgwrap{
display:inline-block;
}
<div id="container">
<div class="imgwrap"><img src="#"/></div>
<div class="imgwrap"><img src="#"/></div>
<div class="imgwrap"><img src="#"/></div>
</div>
My off the cuff: divs in my limited experience defeat the point of css. Second, there is script to detect screen size and allow u to provide separate css based on that. Thats how I've played it.
I want a Text with an vertical line below it, right to this constellation i want a floating div. I dont want to set fixed widths. What i tried is this:
<div>
huhu
<hr class="green" />
<div style="float: right">right</div>
</div>
what i want is the text+hr flow around the red box, is this possible?
This is possible; however, the code you've given won't work without a small modification.
You need to have the right-floating div before the content that you want to wrap around it --
http://jsfiddle.net/S9mmU/1/
To ensure that the floated div never takes up more than half the screen, you can use the max-width property - max-width:50%;
<div>
<div style="float: right; max-width:50%; border:2px solid red; padding:2em; margin:1em;">right</div>
huhu
<hr class="green" />
</div>
I've added the red border, a margin, and some padding so that you can see the effect. It should go without saying that none of these should be inline styles in practice.
Use the border-bottom instead of tag and set overflow:hidden.
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>
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.
I have a div floating left and a div floating right, and I would like to have a background-color changed. It changes the background, but it stops right before the floating divs. When I take them off, it continues having the correct background color that I desire.
<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'>
<div style='width:1091px;margin:0 auto;margin-top:70px;'>
<div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'>
float LEFT
</div>
<div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'>
float RIGHT
</div>
</div>
</div>
thank you!
You must clear the floats so the parent can surround them.
<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'>
<div style='width:1091px;margin:0 auto;margin-top:70px;'>
<div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'>
float LEFT
</div>
<div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'>
float RIGHT
</div>
<!--HERE IS THE CLEARING DIV: -->
<div style="clear: left;"></div>
</div>
</div>
You can also, make the parent itself float, and then you won't need the additional markup (clearing div). If you do this, then your parent will need a width specified.
EXPLANATION:
When an element is floating, the parent is not aware of its height (unless it is a floating element itself). You need a clear below the floats so that the parent div recognises the full height of all its children.
You don't need to force-clear the floats - you need only to define the overflow for any position:relative div. Overflow:hidden and overflow:auto close the div without any further intervention, on everything from IE6 up.
Change the first line to:
<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative; overflow:hidden;'>
and it'll accomplish the same thing as forcing the div closed.