# HTML/CSS Help needed.

**URL:** https://boards.straightdope.com/t/html-css-help-needed/422377
**Category:** Factual Questions
**Created:** [October 11, 2007, 7:42pm UTC](https://boards.straightdope.com/t/html-css-help-needed/422377 "2007-10-11T19:42:44Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![ChrisBooth12](https://avatars.discourse-cdn.com/v4/letter/c/e95f7d/32.png) [@ChrisBooth12](https://boards.straightdope.com/u/ChrisBooth12)
#### Post date: [October 11, 2007, 7:42pm UTC](https://boards.straightdope.com/t/html-css-help-needed/422377/1 "2007-10-11T19:42:44Z")

</div>

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](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?

---

<div class="post-metadata">

### Author: ![wasson](https://avatars.discourse-cdn.com/v4/letter/w/4da419/32.png) [@wasson](https://boards.straightdope.com/u/wasson)
#### Post date: [October 11, 2007, 8:25pm UTC](https://boards.straightdope.com/t/html-css-help-needed/422377/2 "2007-10-11T20:25:26Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Yag\_Rannavach](https://avatars.discourse-cdn.com/v4/letter/y/858c86/32.png) [@Yag\_Rannavach](https://boards.straightdope.com/u/Yag_Rannavach)
#### Post date: [October 11, 2007, 10:15pm UTC](https://boards.straightdope.com/t/html-css-help-needed/422377/3 "2007-10-11T22:15:54Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![ChrisBooth12](https://avatars.discourse-cdn.com/v4/letter/c/e95f7d/32.png) [@ChrisBooth12](https://boards.straightdope.com/u/ChrisBooth12)
#### Post date: [October 11, 2007, 10:33pm UTC](https://boards.straightdope.com/t/html-css-help-needed/422377/4 "2007-10-11T22:33:00Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Yag\_Rannavach](https://avatars.discourse-cdn.com/v4/letter/y/858c86/32.png) [@Yag\_Rannavach](https://boards.straightdope.com/u/Yag_Rannavach)
#### Post date: [October 12, 2007, 2:19am UTC](https://boards.straightdope.com/t/html-css-help-needed/422377/5 "2007-10-12T02:19:13Z")

</div>

You can google for better examples of how to use it, but…

> **[AlphaImageLoader Filter (A, ABBR, ACRONYM, ...)](https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms532969(v=vs.85)?redirectedfrom=MSDN)**

---

<div class="post-metadata">

### Author: ![Duckster](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/duckster/32/1244_2.png) [@Duckster](https://boards.straightdope.com/u/Duckster)
#### Post date: [October 12, 2007, 2:34am UTC](https://boards.straightdope.com/t/html-css-help-needed/422377/6 "2007-10-12T02:34:50Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![wasson](https://avatars.discourse-cdn.com/v4/letter/w/4da419/32.png) [@wasson](https://boards.straightdope.com/u/wasson)
#### Post date: [October 12, 2007, 2:07pm UTC](https://boards.straightdope.com/t/html-css-help-needed/422377/7 "2007-10-12T14:07:05Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Duckster](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/duckster/32/1244_2.png) [@Duckster](https://boards.straightdope.com/u/Duckster)
#### Post date: [October 12, 2007, 7:23pm UTC](https://boards.straightdope.com/t/html-css-help-needed/422377/8 "2007-10-12T19:23:41Z")

</div>

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.