# Making ONLY the tables opaque and not the text/images



## CrescantBearer (Jun 15, 2007)

Hey having a bit of trouble with my CSS coding for my myspace layout, I've pretty much finished it all off except when I try making my tables Opaque my images and font also go Opaque is there anyway of fixing this so it's only the tables that go opaque. Here's my coding and thanks for your help. ^__^

<div style="position:absolute;top:0px;right:0px;padding:0px;margin:0px;"


----------



## tomdkat (May 6, 2006)

CrescantBearer said:


> Hey having a bit of trouble with my CSS coding for my myspace layout, I've pretty much finished it all off except when I try making my tables Opaque my images and font also go Opaque is there anyway of fixing this so it's only the tables that go opaque. Here's my coding and thanks for your help. ^__^


By default, the table should be opaque unless you're doing some different things with opacity.

Or are you looking for a *transparent* table containing text and images that are not transparent (i.e. opaque)?

By the way, there is an "issue" with your CSS:

```
<style type="text/css">
body {
	background-color: rgb(0, 0, 0);
	background-image: url([url]http://i132.photobucket.com/albums/q31/ZealMoon/Hunter-1274.jpg);[/url]
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	}
	.contactTable{width:300px !important;height:150px !important;padding:0px !important;background-image:url('http://i132.photobucket.com/albums/q31/ZealMoon/girly552_ct.jpg');background-attachment:scroll;background-position:center center;background-repeat:no-repeat;background-color:transparent;}
	.contactTable table, table.contactTable td{padding:0px !important;border:0px;background-color:transparent;background-image:none;}
	.contactTable a img {visibility:hidden; border:0px !important;}
	.contactTable .text {font-size:1px !important;}
	.contactTable .text, .contactTable a, .contactTable img {filter:none !important;}
	.contactTable .whitetext12 {display:none;}
table, tr, td {
	background-color: transparent;
	border: 0px;
	}
table table {
	border: 0px;
	}
table table table table{
	border:0px;
	}
table table table {
	border-width: 2px;
	border-color: rgb(255, 255, 255);
	border-style: dashed;
	background-color: transparent;
	}
table table table td {
	background-color: rgb(100, 100, 100);
	filter:alpha(opacity=100);
	-moz-opacity:1;
	opacity:0.85;
	-khtml-opacity:1;
	}
table table table table td {
	filter:none;

	}</style>[b]<div style="position:absolute;top:0px;right:0px;padding:0px;margin:0px;"[/b]<style type="text/css">
body, div, span, td, p, .orangetext15, .whitetext12, .lightbluetext8, strong, b, u, .redtext, .redbtext, .btext, .text, .nametext, .blacktext10, .blacktext12 {
	font-family: Verdana;
	font-size: 12px;
	color: rgb(255, 255, 255);
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	}
.nametext {
	padding: 5px;
	font-family: Verdana;
	font-size: 12px;
	color: rgb(0, 170, 255);
	font-weight: bold;
	font-style: normal;
	text-decoration: none;
	display: block;
	}
.whitetext12, .orangetext15 {
	font-family: Verdana;
	font-size: 12px;
	color: rgb(0, 170, 255);
	font-weight: bold;
	font-style: normal;
	text-decoration: none;
	}
a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover, a.man:link, a.man:active, a.man:visited, a.man:hover, a, a:link, a:active, a:visited, a:hover, a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover, a.text:link, a.text:active, a.text:visited, a.text:hover, a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:hover, a.redlink:link, a.redlink:active, a.redlink:visited, a.redlink:hover {
	color: rgb(250, 255, 255);
	font-weight: bold;
	font-style: normal;
	text-decoration: none;
	}
a.navbar:hover, a.man:hover, a:hover {
	color: rgb(255, 255, 255);
	font-weight: bold;
	font-style: normal;
	text-decoration: underline;
	}
.badge {
	position: absolute;
	left: 1px;
	top: 1px;
	}
</style>
```
There's a half coded DIV near your CSS style definitions above. 

Getting back to your original question, I don't think what you're wanting to do will be possible since the CSS opacity attribute applies to elements (and sub-elements contained therein, I believe). So, you will need to put the text and images in a _different element_ than the one with the CSS opacity applied. That's why I've suggested applying opacity to a background image or a DIV and placing the opaque content in another DIV that was positioned over the element with the adjusted opacity.

Are you using nested tables to control the page layout? Any chance of you ditching HTML tables for page layout in favor of CSS DIVs?

Could you either post your HTML or a link to the page so we can see how the tables are being used and nested?

Peace...


----------



## CrescantBearer (Jun 15, 2007)

The current layout is working besides from the fact the images/text are slightly opaque. Also the answer to all your questions is on the link so you can see for yourself. Also where is the half coded DIV 

http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=368239586


----------



## tomdkat (May 6, 2006)

CrescantBearer said:


> The current layout is working besides from the fact the images/text are slightly opaque. Also the answer to all your questions is on the link so you can see for yourself.


Thanks for posting the link.



> Also where is the half coded DIV


Well, if you look at the "code" block in my post above and scroll it a bit you will see a section in bold. 

EDIT: Ok, seeing the page helped a LOT.  Your best bet is to NOT use CSS opacity _at all_. Instead, make a background image that you use as the background image for the tables you want to have a transparent background. I'll make a sample image in a minute.

Peace...


----------



## tomdkat (May 6, 2006)

Ok, attached is a sample PNG image you can use as a table background. Don't specify any opacity and the images and text in the table should be opaque. Since the PNG is transparent, the page background should show through.

Peace...


----------



## CrescantBearer (Jun 15, 2007)

Arr I see so make the background for the tables the PNG and don't touch the opacity? Sorry to be so ignorant though how do I attach the PNG to make it the background for the tables?  Thank you so much for all your help too


----------



## tomdkat (May 6, 2006)

CrescantBearer said:


> Arr I see so make the background for the tables the PNG and don't touch the opacity?


Yep. 



> Sorry to be so ignorant though how do I attach the PNG to make it the background for the tables?  Thank you so much for all your help too


First, save the PNG to your computer. Then, upload it to your PhotoBucket space. Now, look at the CSS you've got now. See how the "contactTable" has the "girly552_ct.jpg" background? You would do the same for the tables that you want to have the transparent PNG as the background.

Something like this:

```
table.profileInfo {
	background-image: url(http://i132.photobucket.com/albums/table-background.png);
	background-position: top left;
}
```
 Then, do that sort of thing for the tables you want to have a transparent background. Or, you could create a new CSS class, called "transparentBack" and define the background above, like this:

```
.transparentBack {
	background-image: url(http://i132.photobucket.com/albums/table-background.png);
	background-position: top left;
}
```
 Then, add "transparentBack" to the class list for the tables, like this:

<table height="100" cellspacing="0" cellpadding="0" width="300" border="0" *class="profileInfo"*>

becomes

<table height="100" cellspacing="0" cellpadding="0" width="300" border="0" *class="profileInfo transparentBack"*>

Then, get rid of this:

```
table table table td {
	background-color: rgb(100, 100, 100);
	filter:alpha(opacity=100);
	-moz-opacity:1;
	opacity:0.85;
	-khtml-opacity:1;
	}
```
Peace...


----------



## CrescantBearer (Jun 15, 2007)

Ok a tad lost since some of the coding you were referring to about changing wasn't actually in the coding. You referred to,



> becomes








Also I think I semi-understand the process though the end result I'm not entirely sure of either the end result is going to be a fully transparent table meaning you wont actually see the table, your only going to see the txt/images correct?


----------



## tomdkat (May 6, 2006)

CrescantBearer said:


> Ok a tad lost since some of the coding you were referring to about changing wasn't actually in the coding. You referred to,


Yep, that table tag is in your HTML source. I can't access the page right now since MySpace is blocked at my office but that table tag corresponds to the table containing your profile information. The table that has the first occurrence of "relinquish" is the table with class "profileInfo".



> Also I think I semi-understand the process though the end result I'm not entirely sure of either the end result is going to be a fully transparent table meaning you wont actually see the table, your only going to see the txt/images correct?


Right now, the table isn't visible. There is a border around the perimeter of the table that is visible and simply removing the border will resolve that. By using a transparent table background image, the text/photos inside the table are opaque and the table background is transparent, allowing the page background to show through. Between using the transparent background image and removing the table border, you will have a transparent block containing text and images.

This is partially why I asked if you could ditch using HTML tables for page layout and CSS DIVs instead. 

EDIT: Attached is a screenshot.

Peace...


----------



## tomdkat (May 6, 2006)

CrescantBearer said:


> Ok a tad lost since some of the coding you were referring to about changing wasn't actually in the coding. You referred to,


Ok, here is the section of HTML from your MySpace page that has the "profileInfo" table I mentioned above:


```
<table id="profileV1main" width="800" border="0" cellspacing="0" cellpadding="0" align="center">
		<tr align="center" >

			<td width="20" bgcolor="FFFFFF"><img src="http://x.myspacecdn.com/modules/common/static/img/clear.gif" width="15" height="2" border="0" /></td>
			<td width="780" align="center" bgcolor="FFFFFF">
				<table cellspacing="0" cellpadding="0" border="0">
					<tr>
						<td width="275" height="33" align="center" valign="top" bgcolor="FFFFFF"><br/>
						

    [b]<table height="100" cellspacing="0" cellpadding="0" width="300" border="0" class="profileInfo">[/b]
	    <tr>
		    <td class="text" valign="bottom" align="left" width="300" bgcolor="#ffffff" colspan="3"
			    style="WORD-WRAP:break-word"><span class="nametext">-Arken-</span><br />

			    
		    </td>
	    </tr>
	    <tr>
		    <td>
			    <table id="Table2" cellspacing="0" cellpadding="0" width="300" align="center">
				    <tr>
					    <td class="text" width="75" bgcolor="#ffffff" height="75">
						    <a id="ctl00_Main_ctl00_UserBasicInformation1_hlDefaultImage" href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&amp;friendID=368239586"><img border="0" alt="" src="http://a214.ac-images.myspacecdn.com/images01/40/m_a7f6ea36e5e9f584340c6b312cbb9dc5.jpg" />
						    </a>

					    <td>
					    <td width="15" height="75" bgcolor="#ffffff" class="text"><img src="http://x.myspacecdn.com/modules/common/static/img/clear.gif" width="15" height="8" border="0" /></td>
		    </td>
		    <td class="text" width="193" bgcolor="#ffffff" height="75" align="left">"When you relinquish the desire to control your future, you can have more happiness."<br>
			    <br>
```
Peace...


----------



## CrescantBearer (Jun 15, 2007)

Hmmmm well I'm making progress I _think_ I've done everything you've said though only one section of the page has a transparent background. I've followed the coding with the transparentback etc. Heres the script so far,



> *
> 
> 
> *
> ...









And to give you a general idea of what that script generates here's the link to the page.

http://profile.myspace.com/index.cf...&MyToken=16d49350-7357-4c4b-a249-3dc29b3989b8

Also using that script the badge you could call it? is duplicated and placed above the comment table? Thanks 

*EDIT* I've gone over it and I forgot I didn't add,



> table.profileInfo {
> background-image: url(http://i132.photobucket.com/albums/q31/ZealMoon/table-background.png);
> background-position: top left;
> }


I fiddled around with it but I'm not entirely sure were to attach that piece of coding into the script, I tried though I only manage to get one table with the transparent background.


----------



## tomdkat (May 6, 2006)

CrescantBearer said:


> Hmmmm well I'm making progress I _think_ I've done everything you've said though only one section of the page has a transparent background. I've followed the coding with the transparentback etc. Heres the script so far,


Great! You followed my example to the letter and you've got a transparent background in a table, as you wanted. Now that you've got the "transparentBack" CSS class defined, all you need to do is apply that class to the other tables you want to have the transparent background.

Here are other places where you can apply the CSS class:

```
<table id="Table2" cellspacing="0" cellpadding="0" width="300" align="center" [b]class="transparentBack:[/b]>
				    <tr>
					    <td class="text" width="75" bgcolor="#ffffff" height="75">
						    <a id="ctl00_Main_ctl00_UserBasicInformation1_hlDefaultImage" href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&amp;friendID=368239586"><img border="0" alt="" src="http://a214.ac-images.myspacecdn.com/images01/40/m_a7f6ea36e5e9f584340c6b312cbb9dc5.jpg" />
						    </a>

					    <td>
					    <td width="15" height="75" bgcolor="#ffffff" class="text"><img src="http://x.myspacecdn.com/modules/common/static/img/clear.gif" width="15" height="8" border="0" /></td>
		    </td>
		    <td class="text" width="193" bgcolor="#ffffff" height="75" align="left">"When you relinquish the desire to control your future, you can have more happiness."<br>
			    <br>
```
That should get table in the upper left hand corner.


```
<table id="Table1" bordercolor="#000000" height="75" cellspacing="0" cellpadding="0"
                width="435" border="1" class="extendedNetwork [b]transparentBack[/b]">
```
That should get the "Arken is in your extended network" table.


```
<table bordercolor="000000" cellspacing="3" cellpadding="0" width="435" align="center" bgcolor="ffffff" border="0" class="latestBlogEntry [b]transparentBack[/b]">
```
That should get the "Arken's latest blog entry" table near the top of the page.


```
<table id="Table1" bordercolor="#6699cc" cellspacing="0" cellpadding="0" width="300" bgcolor="#ffffff"
	border="1" class="interestsAndDetails [b]transparentBack[/b]">
```
That should get the "Arken's Interests" table.

And so on. Basically, locate the table you want to have the transparent background and assign the "transparentBack" class to the table and voila, it's got the background.

Now that the background has been created, uploaded, and shown to work on the live page you can EASILY adjust the level of transparency by simply updating the image. Just make sure to name the image the same name that is identified in the "transparentBack" CSS style definition and all of the tables on the page will be updated. You might want the background darker or lighter, etc.

Hope that helps! 

Peace...


----------



## CrescantBearer (Jun 15, 2007)

Ok I'm just a failure T . T I get what you mean by locating the table n added the "transparentback" to it though I alter one thing and get that right then I just screw something else up. -.- Like I've got the TransparentBack for a few of them now but now my fonts screwed up in a few sections and the fact that my profile picture is duplicated in the about me section is just plain annoying. Thanks for your help but I suck with this... :[ I don't think I'll be able to do it...


----------



## tomdkat (May 6, 2006)

Don't give up just yet.  How are you editing your page? Are you using some online tool through MySpace or are you using a tool on your local computer, like DreamWeaver or something?

Peace...


----------



## CrescantBearer (Jun 15, 2007)

Well seeing as though you asked, *takes a deep breath in* prepare yourself... I've got that far using Notepad and reading the source files off the site lol? Like I said I some-what fail when it comes to this stuff. Would you suggest DreamWeaver to fiddle around on? I think anything would be better though. I have like 5 notepads open all with different coding on and it gets some-what confusing at times.


----------



## tomdkat (May 6, 2006)

Actually, I'm GLAD you're using Notepad. 

More to follow soon.... 

Peace...


----------



## CrescantBearer (Jun 15, 2007)

OMG OMG OMG I DID IT TOMDKAT!!! WOOO!!! THANK YOU SO MUCH!!!  Heres my end script,



> <style type=text/css>
> .Arken_profile { Generated at my house hehe? Credit to Tomdkat }
> table, tr, td {
> background-color:transparent;
> ...


And the link to the page - http://profile.myspace.com/index.cf...&MyToken=0d82df5b-f88e-45e8-9a05-13feeecee196

Thank you so much for all of your help you've been awesome!! In the script I put a credit in for you  thank you so much lol


----------



## tomdkat (May 6, 2006)

Congrats! You took a slightly different approach but arrived at the same goal. :up:

Glad things worked out! 

Peace...


----------

