Spent a bit of time trying to understand placing text within a div that had opacity. The problem was that the text itself would inherit the opacity, making it fairly useless. Looked around on different sites for the answer to the problem, but never found anything that was correct. Found lots of answers, none of them satisfying. In case you've arrived here looking for the actual answer, here it is. The first div should have position:relative. No other styles need be applied to the first div, and it will remain open. The second div will have the following CSS applied and will be closed: position:absolute; top: 0px (or whatever you need) lleft: 0px (or whatever you need) height: heightpx; width: widthpx; opacity: 0.8; (or whatever you need) alpha(opacity=80); background: color or url; z-index:1; The third div shall have the following CSS applied and will be closed after the text: position:relative; z-index:5; color: color; font-family: font-family; padding: padding; Finally, close the first div which remains open. You're done. Published in haste

The above example (without the dotted background included) with the CSS written inline: <div style="position: relative;"> <div style="position: absolute; top: 0px; left: 0px; height:30px; width: 218px; opacity:0.8; filter:alpha(opacity=80); background:#281704; z-index: 1;"> </div> <div style="position: relative; padding: 5px; z-index:5; color:#FFFFFF; font-weight:bold; font-family:'Times New Roman', georgia, times, serif; font-size:15px;">Published in haste</div> </div>

----------- And that's it. Not sure why there was no reliable tutorial for this tehnique online. The internets are just full of things that are wrong. This isn't one of them. You could of course apply the above CSS as either a class or as an id and it would work just fine too. Lot's of times, I prefer to write things inline because I only plan on using it once.

When @font-face started to be supported on every browser we've tested it on, I figured it was time to start using it whenever I had the chance. I was reading the working draft for the @font-face rule at from the WC3. Towards the bottom, came across the concerns regarding this CSS rule from font founderies. The concerns are obviously legit. If I'm roaming the web and see someone using a font I'd like to have, it's a no-brainer to go get it. For example, here's a free font (available all over the place for no money) example, which you can see in the style sheet of this page: ------------- @font-face {     font-family: kleptocr;     src: url('KLEPTOCR.TTF'); } .klep {font-family:kleptocr, arial, sans-serif; } ------------- If this were a nice expensive font (which it is neither of), it doesn't take much to go and grab it, because within the style, I've told you exactly where it is. Have at it: http://buglogic.com/KLEPTOCR.TTF Now, I'm no legal expert, but it occurs to this simple mind that the answer to the licensing issue is easy. If you look in the style sheet of this page, you'll see another @font-face declaration, which is as follows: ------------- @font-face {     font-family: akzid;     src: url('../../AkzidGroCFFMd.otf'); } .akzid {font-family:akzid, helvetica, arial, verdana, sans-serif; } ------------- Note the path to the font (../../AkzidGroCFFMd.otf), which happens to be a lovely licensed font that we own which we use when in a Bauhaus sort of mood called Akzidenz-Grotesk. The path to the font leaves the directory we are in, and then leaves the root directory. It's easy enough for a web developer to place a file before the root and as I'm sure everyone knows, there's no way to get at that file from a browser. Licensing problem solved: Require licensed fonts to be placed before the root directory and then just call them as such. Perhaps I'm just a simple-minded idiot and I recommend you leave a comment here if that's how you feel about it. For my part, I'm just placing all licensed fonts before the root directory and will sleep well at night knowing that nobody can get at the fonts I have spent hard-earned pesos on. BiteSizedSnack is an example of a site where we're putting this to use. If you look at the css (written straight into the page) you will see an @font-face call for memphis.ttf which resides before the root directory.

2010 June April February January