Solid Text with Transparent Background [Archive]

Snot

02-19-2011, 09:49 AM

I've been having a lot of trouble trying to apply some code to my site that will let me have a transparent background while keeping the text over it solid. I've found a "really easy" way to do what I want but I'm having trouble applying it to my site.

The guide I'm trying to use.
http://www.devwebpro.com/creating-solid-text-transparent-background/

A demo that you can view the page source on.
http://images.ientrymail.com/codeflu/Transparent-Content-Holder.html

I was hoping someone could take a look at my code and help me get it working right. I'm really new to css so if your treat me like I don't know anything you wont be far off.

The site I'm working on is at www.wararmada.com/TDB and my code is below.

/* CSS Document */
/* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
background-image:url(assets/images/bgtile.png);
background-repeat: repeat-x;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/* END OF CSS RESET */
/* SPIDER BACKGROUND */

#box {
width:800px;
height:850px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
background-image:url(assets/images/spiderbg.png);
background-repeat:no-repeat;
}

/* CONTENT BOX MOJO */

#contentBox {
width:300px;
height:20px;
padding-top:200px;
margin-left:30%;
margin-right:30%;
}

#contentBox ul {
margin:0px;
padding:0px;
position:relative;
width:100%;
}

#contentBox ul li {
display:inline;
float:left;
background-color:#000;
color:#FFF;
}

.titleCell {
width:75px;
height:20px;
position:relative; z-index:1000;
margin:0px; padding:0px;
cursor:pointer;
}

.titleCell strong {
font-size:14px;
position:absolute; z-index:1000;
width:73px; height:18px;
text-align:center;
border:#000 solid; border-width:1px;
}

#contentBox ul ul {
position:absolute; left:0px;
display:none;
z-index:100;
}

#contentBox ul ul li {
border:#000 solid;
border-width:1px;
width:500px;
padding:10px;
margin-top:50px;
margin-left:-100px;
color:#FFF;
background-color:#CCC;
opacity: 0.2;
}
#contentBox ul li:hover ul {
display:block; top:-1px; top:19px;
}

#contentBox ul li:hover .titleCell strong {
border-width:1px;
background-color:#000;
color:#666;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
<meta name="author" content="">
<meta http-equiv="Reply-to" content="@.com">
<meta name="generator" content="PhpED 5.8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="creation-date" content="01/01/2009">
<meta name="revisit-after" content="15 days">
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<div id="box">
<div id="contentBox">
<ul>
<li>
<div class="titleCell">
<strong>Home</strong>
</div>
<ul>
<li>
<h1>Welcome!</h1>

<h2>Volunteer Now!</h2>

</li>
</ul>
</li>
<li>
<div class="titleCell">
<strong>Search</strong>
</div>
<ul>
<li>
<h1>Search Form!</h1>

<h2>Volunteer Now!</h2>

</li>
</ul>
</li>
<li>
<div class="titleCell">
<strong>Submit</strong>
</div>
<ul>
<li>
<h1>Submission Form!</h1>

<h2>Volunteer Now!</h2>

</li>
</ul>
</li>
<li>
<div class="titleCell">
<strong><del>Forum</del></strong>
</div>
<ul>
<li>
<h1>Forums Comming Soon</h1>

</li>
</ul>
</li>
</ul>
</div>
</div>

</body>
</html>

</code>

</ul>
</li>
<li>
<div class="titleCell">
<strong><del>Forum</del></strong>
</div>
<ul>
<li>
<h1>Forums Comming Soon</h1>

</li>
</ul>
</li>
</ul>
</div>
</div>

</body>
</html>

</html>