PDA

View Full Version : Transparent Tables and positioning them

maker.123
04-22-2004, 01:45 AM
Hi, I'm a new member here and also very new at HTML and so on. The program that I'm using is Macromedia Dreamweaver, and I'm having problems with how to positioning tables/ transparenting tables so the tables background color wouldn't cover up the backgroung page image like this Userlook up my sister made in Neopets...

http://www.neopets.com/randomfriend.phtml?user=lonewolf_14

And also please help me with one more thing, do you know how to create table shadows or to have it curves on the corners? And is it possible to make a table and make them as different frame?

I think all these are CSS?

Thanks in advance. :)
salomeyasobko
04-22-2004, 03:51 AM
And is it possible to make a table and make them as different frame?huh? i don't get that.. do you have an example? :lol:

to position tables add this to your table code & edit the bold parts: style="position: absolute; left: ##px; right: ##px;"

edit the number of pixels for each :)

these are the different types of borders:

none - no border
hidden - invisible border [but still takes up space on the page]
dotted - dotted
dashed - dashed
double - two lines, equal thickness
groove - engraved border
ridge - opposite to groove & sticks out of the page
inset - similar to groove but the inside looks flatter
outset - opposite to inset & the whole area looks raised

if you want to use CSS for the borders you would put:

<style type="text/css"> table {border: ##pt solid #FFFFFF; } </style>


edit the bold parts. hope that works for you!
maker.123
04-22-2004, 10:33 PM
Well thanks for the help, and going back to the table into frames, is there anyway to do it? or I have to use the Frames turtorial? You know like having scroll bars and stuff in it?

Anyway, can you also tell me how to transparent the bgcolor of the table so that color wouldn't overlaped the bgimage of the main body (site)?
Calidris
04-23-2004, 12:09 AM
A table is naturally transparent until you set a background on it.

You can't do rounded corners or shadows unless you use browser-specific features. For example, to create rounded corners for Mozilla-based browsers you could use:<style type="text/css">
table { -moz-border-radius: 1em; }
</style>

The other option is to use images.
maker.123
04-23-2004, 01:52 AM
I'm sorry I keep asking stupid questions about the transparent, but I know that the table is naturally transparented until I set a background to it. But what I meant is that I got an Image Background in the page (as main), then I create a Table...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body background="image.gif">
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

Like that, then I set background color to the table (which will be overlapping the background image. So the question is that how or is this another CSS code to transparent that background color inside the table so it wouldn't cover up part of the image of the background image. (I think it's alpha(opacity #%) right?)
Please help me... <--- so confused.
reconcile
04-23-2004, 01:54 AM
I'm sorry I keep asking stupid questions about the transparent, but I know that the table is naturally transparented until I set a background to it. But what I meant is that I got an Image Background in the page (as main), then I create a Table...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body background="image.gif">
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

Like that, then I set background color to the table (which will be overlapping the background image. So the question is that how or is this another CSS code to transparent that background color inside the table so it wouldn't cover up part of the image of the background image. (I think it's alpha(opacity #%) right?)
Please help me... <--- so confused.

If you use that code and the following, you should have it down. :)

table, tr, td {
background: transparent;
}

Alpha opacity codes are deprecated.
salomeyasobko
04-23-2004, 01:55 AM
add this to your table code [edit the red part]: style="filter: chroma (color=#FFFFFF);"
MaGiCSuN
04-23-2004, 03:48 PM
If you use that code and the following, you should have it down. :)

table, tr, td {
background: transparent;
}

Alpha opacity codes are deprecated.

again this code is useless, because a table is allready transparent unless you use a backround color for it :)

-- to the starter of the thread --
if you don't set a background color it will be transparent. You are kinda speaking in two ways now haha. You say you want it transparent, but then say "Like that, then I set background color to the table " and then asking to make it transparent. Wouldn't that be kinda useless to set a background color after all?

Love,
Mirna
Calidris
04-23-2004, 06:22 PM
I'm beginning to think this person wants a translucent table background (between transparent and opaque).
table {
filter: alpha(opacity=50); /* IE method */
-moz-opacity: .5; /* Mozilla method */
}
This CSS would make the table 50% see-through, but everything else inside the table (including text) will be 50% see-through aswell. So this option isn't great.

A better way to have a translucent or faded background overlaying your real background is the way Eric Meyer does it in his latest CSS book. The code for the project is here:
http://more.ericmeyeroncss.com/projects/04/proj04.zip - 112kb ZIP

Alternatively, you can download the entire chapter from here:
Chapter 4 - Positioning in the Background (Free Sample) (http://www.peachpit.com/content/images/0735714258/samplechapter/0735714258c.pdf) - 3.3Mb PDF
maker.123
04-26-2004, 11:04 PM
I'm beginning to think this person wants a translucent table background (between transparent and opaque).

A better way to have a translucent or faded background overlaying your real background is the way Eric Meyer does it in his latest CSS book. The code for the project is here:
http://more.ericmeyeroncss.com/projects/04/proj04.zip - 112kb ZIP

Alternatively, you can download the entire chapter from here:
Chapter 4 - Positioning in the Background (Free Sample) (http://www.peachpit.com/content/images/0735714258/samplechapter/0735714258c.pdf) - 3.3Mb PDF
Yeah, like what Calidris said, the stuff that I've been talking about earlier were about translucent, like this userlook up in Neopets.com my sister made..

http://www.neopets.com/randomfriend...ser=lonewolf_14

And I want to learn how to make the table background color like she did (where it is white but does not "whiteout" part of the background image that the table is on) and still her text still readable and not translucent, similar to Eric Meye. And again, is that a CSS
<Style type="css/text">
table....
</style>
?
or just
<table style="...."> <tr><td></tr></td>?

Thank you, (sorry about all this nonsense:o)