HTML Forum

**mayra** · 09:58 PM

What is the code to make the tables on a layout transparent?

and where is the code for the tables in the layout? i can't find it.
here is the layout code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta name="color:Background" content="#7ebff7"/>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{Title}{block:PostSummary} - {PostSummary}{/block:PostSummary}</title>

<link rel="stylesheet" href="http://pixelspread.com/tumblr/roboturner/sifr.css" type="text/css" media="all" />
<script src="http://pixelspread.com/tumblr/roboturner/sifr.js" type="text/javascript"></script>
<script src="http://pixelspread.com/tumblr/roboturner/sifr-addons.js" type="text/javascript"></script>

<link rel="icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
<meta name="viewport" content="width=800"/> 

<style type="text/css">

body {
background:{color:Background} url("http://pixelspread.com/tumblr/roboturner/bg.png") repeat-x fixed;
margin:0;
}

#container {
width:960px;
font-family:"lucida grande",verdana,sans-serif;
font-size:.75em;
line-height:1.5em;
margin:auto;
}

#content {
float:left;
width:560px;
padding-left:15px;
}

.wrapper {
width:530px;
background:#fff;
-webkit-border-radius:5px;
-moz-border-radius:5px;
margin:0 0 10px;
padding:5px 10px;
}

.wrapper a,#sidebar a {
color:#444;
}

.wrapper blockquote {
border-left:2px solid #ccc;
margin:0;
padding:3px 12px;
}

.post {
float:left;
width:400px;
position:relative;
padding:3px 9px 3px 0;
}

.date {
float:left;
width:100px;
border-left:1px solid #eee;
padding:0 10px;
}

.ondate {
font-size:.8em;
font-family:"lucida grande",verdana,sans-serif;
text-transform:uppercase;
}

.reblog {
font-family:"lucida grande",verdana,sans-serif;
font-size:.8em;
color:#333;
background:#eee;
-webkit-border-radius:3px;
-moz-border-radius:3px;
margin:8px 0;
padding:5px 3px;
}

.reblog img {
border:1px solid #333;
}

.tags {
margin:8px 0;
}

.tags a {
line-height:2.5em;
-webkit-border-radius:3px;
-moz-border-radius:3px;
background:#eee;
color:#333;
font-family:"lucida grande",verdana,sans-serif;
font-size:.8em;
text-decoration:none;
padding:3px;
}

.tags a:hover {
background:#333;
color:#ddd;
}

#sidebar {
float:left;
width:240px;
background:#fff;
-webkit-border-radius:5px;
-moz-border-radius:5px;
padding:5px 15px 5px 10px;
}

#previous a,#next a {
position:fixed;
top:12px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}

#previous a:hover,#next a:hover {
background:#999;
}

h2,h3,h4 {
font-family:helvetica,arial,sans-serif;
text-transform:uppercase;
}

.regular {
padding-left:8px;
}

h3 {
margin:0;
padding:5px 0 2px;
}

h4 {
font-size:.85em;
margin:0;
padding:5px 0 0;
}

#title {
color:#000;
padding:25px 75px 15px;
}

#title img{
border:0px;

}

#title a {
color:#000;
text-decoration:none;
}

.image {
border:1px solid #000;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}

.caption {
padding:10px 0;
}

.audioblock {
-webkit-border-radius:3px;
-moz-border-radius:3px;
border:solid 1px #ddd;
padding:3px;
}

.audioplayer {
float:left;
width:207px;
}

.audiocontent {
color:#555;
float:left;
width:150px;
font-family:helvetica,arial,sans-serif;
text-transform:uppercase;
font-size:.9em;
font-weight:700;
padding:6px 0 0 20px;
}

.audiocontent a {
color:#555;
}

.quote {
-webkit-border-radius:3px;
-moz-border-radius:3px;
border:solid 1px #ccc;
padding:6px 3px 6px 8px;
}

.link {
-webkit-border-radius:3px;
-moz-border-radius:3px;
border:solid 1px #ccc;
display:block;
padding:6px 3px 6px 8px;
}

.floatimage {
position:absolute;
top:2px;
left:-32px;
border:0;
}

#searchbox {
width:235px;
background:url("http://pixelspread.com/tumblr/roboturner/searchicon.png") top right no-repeat;
height:16px;
border:1px solid #ccc;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}

.clear {
clear:both;
}

.follow {
list-style:none;
margin:5px 2px;
padding:0;
}

.follow li {
padding:3px;
}

.follow li img {
border:1px solid #000;
-webkit-border-radius:2px;
-moz-border-radius:2px;
}

.chat {
list-style:none;
margin:0;
padding:0 3px;
}

.chat li {
border:1px solid #eee;
-webkit-border-radius:2px;
-moz-border-radius:2px;
margin:1px 0;
padding:2px;
}

.odd {
background:#eee;
}

.label {
font-weight:700;
}

.tumblrlinks {
padding:8px 0px;
text-transform:uppercase;
font-family:helvetica,arial,sans-serif;
font-weight:700;
font-size:1.1em;
}

#previous,#next {
float:left;
width:60px;
height:60px;
}

#previous img,#next img,.tumblrlinks img {
border:0;
}

.follow li a,.tumblrlinks a {
text-decoration:none;
}

h1 {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-weight: bold;
letter-spacing: -.05em;
margin: 0;
padding: 0;
line-height:15px;
text-align: left;
font-size: 24px;
padding: 6px 0;
margin:0px;
}
#home{
position:fixed;top:0px;left:0px;
-webkit-border-radius:3px;
padding:3px;
-moz-border-radius:3px;}

#home:hover{
background:#ccc;
}
</style>
</head>
<body>
<a href="/" id="home"><img src="http://pixelspread.com/tumblr/roboturner/home.png" alt="home" border="0"/></a>
<div id="container">

<div id="title">

<h1><a href="/">{Title}</a></h1>

</div>

<div id="previous">
{block:PreviousPage}
<a href="{PreviousPage}"><img src="http://pixelspread.com/tumblr/roboturner/backward.png" alt="previous"/>
{/block:PreviousPage}</a>
</div>

<div id="content">

{block:SearchPage}
<div id="searchresultcount">
<p>Your search for <span class="query">{SearchQuery}</span> returned {SearchResultCount} result(s).</p>
</div>
{/block:SearchPage}

{block:Posts}

<div class="wrapper">
{block:Regular}

<div class="post">
<a href="{Permalink}"><img src="http://pixelspread.com/tumblr/roboturner/text.png" alt="text" class="floatimage"/></a>
{block:Title}<h3 class="regular">{Title}</h3>{/block:Title}
{Body} </div>

{/block:Regular}

{block:Photo}

<div class="post">
<a href="{Permalink}"><img src="http://pixelspread.com/tumblr/roboturner/photo.png" alt="photo" class="floatimage"/></a>
{LinkOpenTag}<img src="{PhotoURL-400}" class="image" alt="{PhotoAlt}"/>{LinkCloseTag}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>{/block:Photo}

{block:Video}
<div class="post">
<a href="{Permalink}"><img src="http://pixelspread.com/tumblr/roboturner/video.png" alt="video" class="floatimage"/></a>
{Video-400}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Video}
{block:Quote}
<div class="post">

<a href="{Permalink}"><img src="http://pixelspread.com/tumblr/roboturner/quote.png" alt="quote" class="floatimage"/></a>
<div class="quote">

{Quote}</div>
{block:Source}
<div class="caption">— {Source}</div>
{/block:Source}
</div>
{/block:Quote}

{block:Link}

<div class="post">
<a href="{Permalink}"><img src="http://pixelspread.com/tumblr/roboturner/link.png" alt="link" class="floatimage"/></a>

<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
<span class="description">{Description}</span>
{/block:Description}
</div>
{/block:Link}

{block:Conversation}
<div class="post">
<a href="{Permalink}"><img src="http://pixelspread.com/tumblr/roboturner/quote.png" alt="chat" class="floatimage"/></a>
{block:Title}
<h3 class="regular">{Title}</h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt}">
{block:Label}
<span class="label user_{UserNumber}">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
{/block:Conversation}

{block:Audio}
<div class="post">
<a href="{Permalink}"><img src="http://pixelspread.com/tumblr/roboturner/audio.png" alt="audio" class="floatimage"/></a>

<div class="audioblock">
<div class="audioplayer">
{AudioPlayerwhite}
</div>
<div class="audiocontent">
Plays: {FormattedPlayCount}
{block:ExternalAudio}
/ <a href="{ExternalAudioURL}">
Download</a>
{/block:ExternalAudio}

</div><div class="clear"></div>
</div><div class="clear"></div>

{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Audio}

<div class="date">
{block:NewDayDate}
<h4>{TimeAgo}</h4>
<span class="ondate">{Month} {DayOfMonth}, {Year}</span>

{/block:NewDayDate}

{block:SameDayDate}
<h4>{TimeAgo}</h4>
<span class="ondate">{Month} {DayOfMonth}, {Year}</span>

{/block:SameDayDate}

{block:HasTags}
<div class="tags">{block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags}
</div>
{/block:HasTags}

{block:RebloggedFrom}
<div class="reblog">
reblogged via <a href="{ReblogParentURL}"><img src="{ReblogParentPortraitURL-16}" alt="{ReblogParentName}"/></a></div>{/block:RebloggedFrom}

</div>

<div class="clear"></div>
</div>

{/block:Posts}

</div>

<div id="sidebar">
<p>
<form action="/search" method="get">
<input id="searchbox" type="text" name="q" value=""/>
</form></p>
<div class="tumblrlinks"><a href="{RSS}"><img src="http://pixelspread.com/tumblr/roboturner/feed.png"/> RSS</a> <a href="/archive"><img src="http://pixelspread.com/tumblr/roboturner/calendar.png"/> Archive</a> <a href="/mobile"><img src="http://pixelspread.com/tumblr/roboturner/mobile.png"/> Mobile</a> </div>

<h4>Description</h4>
<p>{Description}</p>

{block:IndexPage} {block:Following}
<h4>Following</h4>
<ul class="follow">
{block:Followed}<li>
<a href="{FollowedURL}"><img src="{FollowedPortraitURL-16}" alt="{FollowedName}"/> {FollowedTitle}</a>
</li> {/block:Followed}
</ul>
{/block:Following}
{/block:IndexPage}
<h4>Credit</h4>
<p><a href="http://roboturner.tumblr.com">Roboturner</a> is a free <a href="http://tumblr.com">tumblr</a> theme designed by <a href="http://matt.cc">Matt McInerney</a> of <a href="http://pixelspread.com">Pixelspread</a></p>
</div>

<div id="next">
{block:NextPage}
<a href="{NextPage}"><img src="http://pixelspread.com/tumblr/roboturner/forward.png" alt="next"/>
{/block:NextPage}
</a>
</div>
</div>

<script type="text/javascript">
//<![CDATA[
/* Replacement calls. Please see documentation for more information. */

if(typeof sIFR == "function"){

// This is the preferred "named argument" syntax
sIFR.replaceElement(named({sSelector:"body h1", sFlashSrc:"http://pixelspread.com/tumblr/roboturner/gotham.swf", sColor:"#000000", sLinkColor:"#000000", sBgColor:"#ffffff", sHoverColor:"#333333", nPaddingTop:0, nPaddingBottom:0,sWmode:"transparent",sFlashVars:" textalign=left&offsetTop=0"}));

};

//]]>
</script>
</body>
</html>

**konetch** · 04-18-2009, 12:30 AM

ok to make a background transparent just use '#transparent' as your background-color.

So instead of writing something like...

.table1 {
background-color:#000000;
}

You would write...

.table1 {
background-color:#transparent;
}

I think that's what you were asking for. Good Luck

**Jaryth000** · 04-18-2009, 06:06 AM

Or if you just want to have fun and start playing with transparent and semi-transparent things...

http://www.mandarindesign.com/opacity.html

Have fun reading.

**davemies** · 04-18-2009, 06:12 AM

Quote:

Originally Posted by Jaryth000

Or if you just want to have fun and start playing with transparent and semi-transparent things...

http://www.mandarindesign.com/opacity.html

Have fun reading.

BUT watch out for browser support - or rather lack of it!

also don't use tables for layout, use divs. use tables only for tabular data

**nikolla983** · 04-19-2009, 10:44 AM

I agree with davemies,

browser support is very important, and use divs, they are little catchy, but more efficient than tables, tables in web design are history, just use them for tabular data...

**LadynRed** · 04-21-2009, 01:33 PM

Quote:

and where is the code for the tables in the layout? i can't find it.

Based on the code you posted, there ARE NO TABLES for layout - the site is coded to use CSS and divs for layout - as it should be!

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!