HTML/CSS Help needed.

[ChrisBooth12]

Ok i have been trying to tweak out my desktop a little using html and css. You can see what i have done here:

http://i27.photobucket.com/albums/c179/chrisbooth12/dekstop.jpg

As you can see on the left side i have a list of links to various things. That list has a black background. That entire list including the background has a div class assigned to it called proglist. Now what i want to do is make the background 50% transparent without making the text (links) transparent as well. I know the code to make it transparent but it effects the links as well. A temporary way i have found around this is to have two lists of the same text overlaying each other making one transparent and making one without a background and layer them. Now the problem with this is that i have to change any text and links in two locations and not just one. Any ideas?

[wasson]

There's not really a great way to do what you're requesting, except something like this:

<div class="semiTransparent">
<ul class="list">
<li>item</li>
</ul>
</div>

Then define the semiTransparent to whatever you want, and define the "list" to 100% opacity.

Still a little extra markup, but it should work.

[Yag Rannavach]

Or you could put a semi-transparent background image on the list...a 50% transparent 1px png should work, though you'll have to feed it through MS's png filter thing.

[ChrisBooth12]

Ok i made a 50% transparent png in photoshop but it shows up as a grey. What is the MS png filteR?

[Yag Rannavach]

You can google for better examples of how to use it, but...
http://msdn2.microsoft.com/en-us/library/ms532969.aspx

[Duckster]

Simplify! Simplify!

Go back to square one. Modify your full screen image and apply the background changes to the image itself. Then use your HTML/CSS merely as the working layer above the image.

[wasson]

You and I usually agree on this HTML/CSS stuff Duckster, but I'm going to disagree with you here (in theory, but not necessarily in practice).

If you used your technique on a website, then had to go in and add a couple more menu items, that would require updating the HTML, CSS, and a background file to add the items. In in ideal world, you'd only have to update the HTML.

Same concept if one wanted to move the list to the other side of the screen, or list it horizontally instead of vertically. Both would require modifying the background image. Not ideal.

However, in practice, this isn't an 'actual' website, but instead the desktop background. In that case, do whatever is easier and don't worry about scalability. But it's always a good idea to practice the "proper" way to do things.

[Duckster]

The OP isn't creating a web site. They are merely managing their active desktop with web code. I know you said it but it bears repeating.

I'm not so sure there is "proper" way to do it on a desktop (just make sure the web cam is focussed when doing it?). And yes, had this been a real web page topic, my response would have been different.