CSS issue with transparent background

[dennisvg]

http://www.dennyslounge.com/testing.html

Hi all. I could really use some help with the above layout. It came together pretty quickly, but I have two major issues still to resolve:

1. I need my text to not be transparent. I see why it is, as it is nested in a div that is transparent. But I've run out of ideas on how to get it out of there.

2. I need the be able to accomodate 1 or 2 lines of text, but either way it needs to be vertically aligned to the middle of the transparent pane in the background. A coworker says it has to be a table. Really?

Many thanks in advance. Code is below:

<style type="text/css">
#gamesRowToutsContainer {position: relative; width:939px; height:173px; border:1px solid red;}
#gamesRowTouts {margin:0; padding:0; list-style:none;}
#gamesRowTouts li {float:left; display:inline;}
#gamesRowTouts a {display:block; width:168px; height:173px; outline:none;}
#gamesRowTouts img {display:block; width:168px; height:173px; border:none;}
.gamesRowToutsBackground {position: absolute; top: 123px; width: 168px; height: 50px; background-color: #000000; filter:alpha(opacity=75); -moz-opacity:0.75; opacity: 0.75;}
.gamesRowToutsText {padding-top:16px; padding-right: 12px; text-align: right; font-family: Helvetica, Arial; font-weight: bold; font-size: 15px; line-height:1; color: #00b4ff;}
.spacer {height:173px; width:25px;}
.spacer2 {height:173px; width:24px;}
</style>

<div id="gamesRowToutsContainer">
<ul id="gamesRowTouts">
<li><a href="#"><img src="/img/frame1.jpg" /><div class="gamesRowToutsBackground"><div class="gamesRowToutsText">One line entry</i></div></div></a></li>
<li><div class="spacer"></div></li>
<li><a href="#"><img src="/img/frame1.jpg" /><div class="gamesRowToutsBackground"><div class="gamesRowToutsText">Two line entry<br />looks like this</i></div></div></a></li>
<li><div class="spacer"></div></li>
<li><a href="#"><img src="/img/frame1.jpg" /><div class="gamesRowToutsBackground"><div class="gamesRowToutsText">One line entry</i></div></div></a></li>
<li><div class="spacer"></div></li>
<li><a href="#"><img src="/img/frame1.jpg" /><div class="gamesRowToutsBackground"><div class="gamesRowToutsText">Two line entry<br />looks like this</i></div></div></a></li>
<li><div class="spacer2"></div></li>
<li><a href="#"><img src="/img/frame1.jpg" /><div class="gamesRowToutsBackground"><div class="gamesRowToutsText">One line entry</i></div></div></a></li>
</ul>
</div>

[Arbitrator]

1. I need my text to not be transparent. I see why it is, as it is nested in a div that is transparent. But I've run out of ideas on how to get it out of there.See a post that I just made at http://www.codingforums.com/showthread.php?p=696000#post696000.

2. I need the be able to accomodate 1 or 2 lines of text, but either way it needs to be vertically aligned to the middle of the transparent pane in the background. A coworker says it has to be a table. Really?Your coworker must be new to CSS. Try using relatively absolute positioning:

#e1 { position: relative; width: 100px; }
#e2 { position: absolute; bottom: 0; right: 10px; text-align: right; }

<div id="e1">
<div id="e2">text for the bottom right</div>
</div>

You can add more constraints as necessary such as defining the line height, #e2 height and overflow behavior, etc.

[dennisvg]

Many thanks. Will tackle this later today.

[dennisvg]

Thanks for steering me toward the 'relatively absolute" positioning.

I've been banging on this, and still fail to see how I can get it to position the text vertically, so that either a one-line title or two-line title center vertically.

I tried to assign a height to the "e2" div, to no avail. Is it really possible to vertically center text in these cases? Could you possibly give me a few more details as it relates to the page above? As you can see, the div I wish to vertically align 1 or two lines of text in is 45 pixels in height.

[Avril]

Check this out:

http://www.w3.org/Style/Examples/007/center.html