Forum Moderators: not2easy
1- How do I make my contents background appear transparent but not everything inside?
2- I want to put images inside my contents box. Images can be floating right or left. When I'm in IE, my contents box expands to include my images, but in Netscape, it stops right when by text (class=box) is finished. If I disable the float:left property, the contents box includes this image.
Can anyone enlight me on these problems?
Thanks.
html:
<html>
<head>
<title>Au pied de la butte ronde - Accueil</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<DIV class=contents>
<DIV class=box_droite>
<DIV class=box_droite-titre>
PostStamp with image
</DIV>
<img src="fichiers/timbre.jpg" width="400">
</DIV>
<DIV class=box>
<h2>Bienvenue chez nous!</h2>
<p>Blablabla Here is some text
<p>Here again
<p>Just another shot :)
</DIV>
<DIV class=box_image>
<DIV class=box_image-titre>
PostStamp with image
</DIV>
<img src="fichiers/timbre.jpg" width="400">
</DIV>
</DIV>
</body>
</html>
css:
BODY {
background: url('fichiers/IMG_0944.JPG') white no-repeat center 50% fixed;
PADDING:0px; MARGIN: 0px; COLOR: #000;
FONT-FAMILY: "Trebuchet MS",Verdana, Arial, Helvetica,sans-serif
}
DIV.contents {
Margin: 1%;
BACKGROUND-color: white;
clear: both;
width: 98%;
filter: alpha(opacity=60);
-moz-opacity: 1.0;
opacity: 1.0;
}
DIV.contents * {
position: relative;
}
DIV.box {
PADDING: 20px;
FONT-SIZE: 0.9em;
TEXT-ALIGN: justified;
color: black;
}
DIV.box * {
POSITION: relative;
}
DIV.box_image {
BORDER: #cc1100 1px solid;
FLOAT: left;
PADDING: 5px;
FONT-SIZE: 0.9em;
MARGIN: 1%;
color: black;
}
DIV.box_image * {
position: relative;
}
DIV.box_image-titre {
TEXT-ALIGN: center;
MARGIN: 5px;
FONT-SIZE: 1.0em;
FONT-WEIGHT: bold;
color: black
}
DIV.box_droite {
BORDER: #cc1100 1px solid;
FLOAT: right;
PADDING: 15px;
FONT-SIZE: 0.9em;
MARGIN: 1%;
color: black;
}
DIV.box_droite * {
POSITION: relative;
}
DIV.box_droite-titre {
TEXT-ALIGN: center;
MARGIN: 5px;
FONT-SIZE: 1.0em;
FONT-WEIGHT: bold; color: black
}
When I'm in IE, my contents box expands to include my images, but in Netscape, it stops right when by text (class=box) is finished
When float is applied to an element, it is first removed from the document flow and then shifted in it's float direction until it hits a container edge or another float. Since it is no longer in the flow, other elements cannot interact with it, including it's container. So a floated element cannot affect the height of it's container.
IE improperly ignores this part of the specs and expands all boxes to enclose floats. If you want a compliant browser like Moz/FF/NS to enclose a float, you need to either float the container or add a clearing element to the bottom of the box. Unless floating the container causes other problems in your layout, I recommend using that approach. If it wreaks havok on other elements, check out this page at PIE [positioniseverything.net] to read about the clearing element approach.
How do I make my contents background appear transparent but not everything inside
The default background for any given element is transparent [w3.org], so unless you've explicitly set a background color or image for that element, you ought to already be seeing through to whatever lies beneath. If you need to override a background color setting, you can set background-color:transparent.
If you have an image as a background, the only way to make parts of it transparent are to (a) make them transparent in the actual image and use an image file format that supports transparency or (b) make an image that fills only part of the element, position it using background-position, and leave the rest of the element with a transparent background-color.
cEM
For the second part, the transparency problem, I think I used the wrong set of words. My problem is with opacity, not transparency. I use an image background, and I want a white background with opacity at 60% for the part of the page where there is text. I am able to put the opacity on the white background of the container, but then everything inside it (text, image, borders, etc) is at an opacity of 60% too!
Is there a way to have a background opacity of 60% (for example), but still have everything inside this container at opacity of 100%?
Thanks.
Is there a way to have a background opacity of 60% (for example), but still have everything inside this container at opacity of 100%?
Yes but it's c-o-m-p-l-i-c-a-t-e-d.
The problem is that the opacity property inherits. So setting it to 60% on a parent element makes everything inside of that element, as you said, have 60% opacity.
With most properties that inherit, you can override the inherited property by setting the child element back to the default state, but this doesn't work with opacity. When you set the parent's opacity to 60%, then try to set the child's opacity to 100%, the browser calculates that as 100% of 60%, which even a math-moron like me knows is still only 60%.
As far as I know, there is NO way to overcome this using the opacity property. The only workaround I am aware of is to use a background image that is, itself, semi-opaque. I won't claim to know or understand all the details about graphic file types, but using PNGs with alpha-transparency as your background-image seems to be the best option.
The PROBLEM with this is that IE does not automatically support PNG alpha-transparency. You have to apply a special filter in IE to make it work.
End result being that you need to:
(a) make your image a semi-transparent PNG using alpha-trnasparency.
(b) set that PNG as the background-image for the element.
(c) in an IE exclusive way (there are several options), set the background-image to none and use a special filter to get IE to use and apply the alpha-transparent image. Code below.
YOURSELECTOR{
background: transparent url(path/to/image.png) repeat;
}/*STAR HACK with IE/Mac Hide, delivers values to IE/Win browsers only*/
/*start iemac hide\*/
* html YOURSELECTOR{
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/image.png', sizingMethod='scale');
}
/*end iemac hide*/
It's worth noting that the above filter works in IE5.5+. There is no known way to make IE.5 display semi-transparent PNGs properly.
Here's some more reading: Cross-browser semi-transparent backgrounds [daltonlp.com]. Read it carefully and several times before trying it out. He uses a slightly different way to deliver the different values to the different browsers, but either one will work. The goal is to give good browsers the PNG as a background, and IE no background with the PNG in the filter.
Good luck. :)
One final note: An "easier" solution might be to use Dean Edwards' IE7 [dean.edwards.name] on your site. One of the many things his javascript is supposed to fix is this PNG thing. I've never used it, so I can't say from experience how it does, but I hear good things.
cEM
