delphi programming forums mysql charset mget recursive synonimos
free ventrilo servers hosting cs javascript delay python find in list
Back Forum New

Rank: 1
1# Jump to »
atticwebPost at 2011-3-11 12:17 | Show This Author's Posts Only
abstract:

i know there is color background transparent in CSS but can you make the transparent a \%??
Jim


I have a menu in a table. There's a background image on the page and I want to colour the table cells but still see the background thru the cell. i know there is color background transparent in CSS but can you make the transparent a \%??
Jim

TOP

Rank: 1
2#
bricker42Post at 2011-3-11 12:17 | Show This Author's Posts Only
Not without making everything in the table (the text and stuff) transparent as well.  You could try floating a div behind the table and putting the transparent image in there, but it probably isn't worth it .

TOP

Rank: 1
3#
atticwebPost at 2011-3-11 12:17 | Show This Author's Posts Only
thanks for the response anyway
jim

TOP

Rank: 1
4#
TuxiePost at 2011-3-11 12:17 | Show This Author's Posts Only
You can use a transparent PNG as background.

TOP

Rank: 1
5#
bricker42Post at 2011-3-11 12:17 | Show This Author's Posts Only
abstract:

i know there is color background transparent in CSS but can you make the transparent a \%??
Jim


If you go that route, you'll need to fake IE.  Here's some code that helps with that:
http://www.youngpup.net/?request=/snippets/sleight.xml
Note that this only works for ie5.5+.  I don't think ie5.0 supports alpha channels.

TOP

Rank: 1
6#
adiosPost at 2011-3-11 12:17 | Show This Author's Posts Only
Try this:
<html>
<head>
<title>untitled</title>
<style type="text/css">
table {
background: pink;
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 50\%;
}
td {
position: relative;
width: 80px;
font: 200 10px verdana;
text-align: center;
border: 2px salmon solid;
}
.menu {
position: absolute;
left: 0px;
top: 0px;
width: 82px;
font: 200 10px verdana;
color: #440000;
text-align: center;
border: 1px black solid;
cursor: hand;
}
body {
text-align: center;
margin-top: 94px;
background: url(http://216.40.241.209/textures/misc/misc059.gif);
}
</style>
<script type="text/javascript" language="javascript">
// mouseover - no additional cost...
var tds = document.getElementsByTagName('td');
onload = function() {
var c, i =0;
while (c = tds.item(i++)) {
c.onmouseover = function() {this.style.background='salmon';}
c.onmouseout = function() {this.style.background='transparent';}
}
}
</script>
</head>
<body>
<div style="width:360px;border:3px black double;">
<table>
<tr>
<td><span class="menu">choice 1</span>choice 1</td>
<td><span class="menu">choice 2</span>choice 2</td>
<td><span class="menu">choice 3</span>choice 3</td>
<td><span class="menu">choice 4</span>choice 4</td>
</tr><tr>
<td><span class="menu">choice 5</span>choice 5</td>
<td><span class="menu">choice 6</span>choice 6</td>
<td><span class="menu">choice 7</span>choice 7</td>
<td><span class="menu">choice 8</span>choice 8</td>
</tr><tr>
<td><span class="menu">choice 9</span>choice 9</td>
<td><span class="menu">choice 10</span>choice 10</td>
<td><span class="menu">choice 11</span>choice 11</td>
<td><span class="menu">choice 12</span>choice 12</td>
</tr>
</table>
</div>
</body>
</html>
There may be another way to override inheritance of an alpha filter than using positioned elements, but I haven't seen it (yet).
Alpha filters have been supported since IE4.

TOP

Rank: 1
7#
bricker42Post at 2011-3-11 12:17 | Show This Author's Posts Only
adios: that is awsome!
Doesn't work in mozilla, though...   (v. 1.2a ).

TOP

Rank: 1
8#
adiosPost at 2011-3-11 12:17 | Show This Author's Posts Only
(I liked the first part of your post better)
Been fooling with this:
<html>
<head>
<title>untitled</title>
<style type="text/css">
table {
background: #9999cc;
filter: alpha(opacity=44);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=44);
-moz-opacity: 44\%;
}
td {
position: relative;
width: 78px;
font: 200 12px "comic sans ms";
color: #000000;
text-align: center;
border: 1px #000066 solid;
}
.menu {
position: absolute;
left: 0px;
top: 0px;
width: 80px;
font: 200 12px "comic sans ms";
color: #ffffff;
text-align: center;
cursor: hand;
}
body {
margin-top: 60px;
margin-left: 0px;
overflow: hidden;
background: url(http://216.40.241.209/textures/lblue/lblue064.jpg);
}
</style>
<script type="text/javascript" language="javascript">
var tds = document.getElementsByTagName('td');
onload = function() {
var c, i =0;
while (c = tds.item(i++)) {
c.onmouseover = function() {this.style.background='#000066';}
c.onmouseout = function() {this.style.background='transparent';}
}
}
</script>
</head>
<body>
<div style="width:88px;border-top:4px #6666aa groove;border-bottom:4px #6666cc groove;border-right:4px #6666cc groove;">
<table>
<tr>
<td><span class="menu">choice 1</span>choice 1</td>
</tr><tr>
<td><span class="menu">choice 2</span>choice 2</td>
</tr><tr>
<td><span class="menu">choice 3</span>choice 3</td>
</tr><tr>
<td><span class="menu">choice 4</span>choice 4</td>
</tr><tr>
<td><span class="menu">choice 5</span>choice 5</td>
</tr><tr>
<td><span class="menu">choice 6</span>choice 6</td>
</tr><tr>
<td><span class="menu">choice 7</span>choice 7</td>
</tr><tr>
<td><span class="menu">choice 8</span>choice 8</td>
</tr><tr>
<td><span class="menu">choice 9</span>choice 9</td>
</tr>
</table>
</div>
</body>
</html>
How 'bout that 19¢ drop-shadow?
Don't have moz here at the moment - is it the opacity that's not happening? Oh, well...
...seen this?

TOP

Rank: 1
9#
bricker42Post at 2011-3-11 12:17 | Show This Author's Posts Only
That's pretty sweet.  I tried for awhile to get that effect with a dropdown menu, but it kept going all googly.
As for your code in mozilla, mozilla is smarter than ie .  It doesn't forget the opacity, and it doesn't lose the rollover background (odd that).  So everything within the cells is transparent, and once the background color changes it stays stuck.
** edit **
What would be really nice would be if you could set the opacity to 120\%.

TOP

Rank: 1
10#
bricker42Post at 2011-3-11 12:17 | Show This Author's Posts Only
abstract:

i know there is color background transparent in CSS but can you make the transparent a \%??
Jim


Check it out.  Tested in moz 1.1b and ie5.0.
Code:
  1. <html>
  2. <head>
  3. <title>untitled</title>
  4. <style type="text/css">
  5. table {
  6. background: pink;
  7. filter: alpha(opacity=50);
  8. filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  9. -moz-opacity: 50\%;
  10. }
  11. td {
  12. position: relative;
  13. width: 80px;
  14. font: 200 10px verdana;
  15. text-align: center;
  16. border: 2px salmon solid;
  17. }
  18. .menu {
  19. position: absolute;
  20. font: 200 10px verdana;
  21. color: #440000;
  22. text-align: center;
  23. text-decoration: none;
  24. background:transparent;
  25. }
  26. .menu:hover {
  27.         background:salmon;
  28.         color: #884444;
  29. }
  30. body {
  31. text-align: center;
  32. margin-top: 94px;
  33. background: url([url=http://216.40.241.209/textures/misc/misc059.gif]http://216.40.241.209/textures/misc/misc059.gif[/url]);
  34. }
  35. </style>
  36. <script type="text/javascript" language="javascript">
  37. // mouseover - no additional cost...
  38. var tds = document.getElementsByTagName('td');
  39. onload = function() {
  40.         var c, i =0;
  41.         while (c = tds.item(i++)) {
  42.                 d = document.getElementById( 'container' );
  43.                 e = document.createElement( "a" );
  44.                 e.setAttribute( "href", "link" + i + ".html" );
  45.                 e.className = "menu";
  46.                 e.style.left = c.offsetLeft;
  47.                 e.style.top = c.offsetTop;
  48.                 e.style.width = c.offsetWidth;
  49.                 e.style.height = c.offsetHeight;
  50.                 e.style.display = "block";
  51.                 e.style.position = "absolute";
  52.                 e.innerHTML = c.innerHTML;
  53.                 c.innerHTML = "&nbsp;";
  54.                 d.appendChild( e );
  55.         }
  56. }
  57. </script>
  58. </head>
  59. <body>
  60. <div style="width:360px;border:3px black double;">
  61. <table>
  62. <tr>
  63. <td>choice 1</td>
  64. <td>choice 2</td>
  65. <td>choice 3</td>
  66. <td>choice 4</td>
  67. </tr><tr>
  68. <td>choice 5</td>
  69. <td>choice 6</td>
  70. <td>choice 7</td>
  71. <td>choice 8</td>
  72. </tr><tr>
  73. <td>choice 9</td>
  74. <td>choice 10</td>
  75. <td>choice 11</td>
  76. <td>choice 12</td>
  77. </tr>
  78. </table>
  79. </div>
  80. <div id="container"></div>
  81. </body>
  82. </html>
Copy Code
Next step is to see if I can steal a link node from inside the td and just change its parent.

TOP

Back Forum