PDA

View Full Version : How do you get you layout transparent ??


converted
10-07-2010, 09:27 AM
Can anyone help me get my web layout transparent?

I.e i want I have used a pic for my web page backround and i would like
to get my tables with content to be transparent so you can see the image behind it,

example http://www.myspace.com/convertrecordings

if you look at that page or http://www.djdaveseaman.com/

the background image is always visable behind the context table

Any help would be appreicated

Regards

edbr
10-07-2010, 09:49 AM
theres your problem
tables with content to be transparent
use divs and don't specify a background colour

converted
10-07-2010, 09:53 AM
thanks for the response, please forgive me but Divs? i'm not really much of a code person i understand the basics of web design and can use dreamweaver ...

Corrosive
10-07-2010, 09:58 AM
I understand the basics of web design and can use dreamweaver ...

Not if you don't understand div based layouts you don't! That IS the basics of modern web design. Tables ceased to be a good idea years ago.

converted
10-07-2010, 10:31 AM
Not if you don't understand div based layouts you don't! That IS the basics of modern web design. Tables ceased to be a good idea years ago.

Well ok i understand how to use the basics of dreamweaver.

Corrosive
10-07-2010, 10:45 AM
Here you go, try this for starters; http://www.corrosiveonline.co.uk/tutorials_css_explained.php

converted
10-07-2010, 07:36 PM
Is there any way to do this by using the dreamwaever gui rather than code?

Just thought id ask, i already have a web page with a layout and buttons etc but would just like to make the main context table transparent without re designing the whole page

gentleone
10-07-2010, 07:48 PM
if your table is not transparent then there is probably a background color assigned to it. Remove it!

converted
10-07-2010, 08:20 PM
I tried to do that, my backgroud is pic

my table used has a colour for its bacground but if I try to set it none it stays the same.
It will only let me change it to another colour

converted
10-07-2010, 08:41 PM
I've included a j peg of the page i'm trying to edit,

you can see the main table which has a background colour which i would like to make transparent.

if i set the colour to one it just jumps back tp the same colour, it will let me change it to another colour

gentleone
10-07-2010, 08:52 PM
try iinstead of the hexadecimal number #3A87AC the word: transparent

converted
10-07-2010, 08:57 PM
thanks for this help, it wouldn't accept it though. said its not valid

gentleone
10-07-2010, 09:30 PM
it was a wild guess... why not start learning webdesign the right way?
http://articles.sitepoint.com/article/html-css-beginners-guide

edbr
10-08-2010, 02:07 AM
found this though yahoogling
style="background-color: gray;filter:alpha(opacity=60); -moz-opacity:0.6; opacity: 0.6;border: 1px solid black;"
havent a clue if it works though

Corrosive
10-08-2010, 07:01 AM
found this though yahoogling
style="background-color: gray;filter:alpha(opacity=60); -moz-opacity:0.6; opacity: 0.6;border: 1px solid black;"
havent a clue if it works though

I think the danger (and frustration) with this is (even with divs) it turns the content of the divs transparent as well.

Corrosive
10-08-2010, 07:01 AM
Have you thought about using .png images for this?

edbr
10-08-2010, 07:06 AM
not according to the post, but its tables any way . the easy answer is so obvious

converted
10-08-2010, 08:38 AM
thanks for the help,

I'm replacing the tables with Div's

i will come back to you when I've finished doing that and let you know the results

cheers

gentleone
10-08-2010, 08:49 AM
thanks for the help,

I'm replacing the tables with Div's

i will come back to you when I've finished doing that and let you know the results

cheers

Good decision and don't use only ApDivs for layout. They're just as worse as a table layout. If you get stuck somewhere just ask.

converted
10-08-2010, 09:42 AM
i'm looking into it now, it seems quite straight forward. Still not sure on how to make my div's transparent .
I'm creating the div's and using a style sheet for width padding etc but still faced with the hex code for div background colour.

For example what would i set the colour to for transparency using the exaple below

#container {
width: 968px;
background: #FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;

edbr
10-08-2010, 09:51 AM
dont set any colour. delete
background: #FFF;

gentleone
10-08-2010, 10:07 AM
you could add to your styles what edbr suggested

-khtml-opacity:.90;
-moz-opacity:.90;
-ms-filter:”alpha(opacity=90)”;
filter:alpha(opacity=90);
opacity:.90;
But what Corrosive said is true about that the content of the div will be transparent too. There is a workaround for this but this can be tricky (http://css-tricks.com/non-transparent-elements-inside-transparent-elements/) so I suggest the simplest solution that is to use a 10px by 10px white transparent/opacity png and set that as background to your #container styles.

background: url(images/background.png) repeat;

converted
10-08-2010, 10:12 AM
you could add to your styles what edbr suggested

-khtml-opacity:.90;
-moz-opacity:.90;
-ms-filter:”alpha(opacity=90)”;
filter:alpha(opacity=90);
opacity:.90;
But what Corrosive said is true about that the content of the div will be transparent too. There is a workaround for this but this can be tricky (http://css-tricks.com/non-transparent-elements-inside-transparent-elements/) so I suggest the simplest solution that is to use a 10px by 10px white transparent/opacity png and set that as background to your #container styles.

background: url(images/background.png) repeat;


Cheers for the help, its a great forum,


where would the above be added in this example

#container {
width: 968px;
background: #FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;

gentleone
10-08-2010, 10:24 AM
Cheers for the help, its a great forum,


where would the above be added in this example

#container {
width: 968px;
background: #FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;


#container {
width: 968px;
background: #FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
-khtml-opacity:.90;
-moz-opacity:.90;
-ms-filter:”alpha(opacity=90)”;
filter:alpha(opacity=90);
opacity:.90;
}


But if you go for the above CSS opacity properties, make sure you read the CSS tricks article.

converted
10-08-2010, 10:46 AM
#container {
width: 968px;
background: #FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
-khtml-opacity:.90;
-moz-opacity:.90;
-ms-filter:”alpha(opacity=90)”;
filter:alpha(opacity=90);
opacity:.90;
}


But if you go for the above CSS opacity properties, make sure you read the CSS tricks article.


Sorry I was refering your suggestion

"so I suggest the simplest solution that is to use a 10px by 10px white transparent/opacity png and set that as background to your #container styles."

I was wondering how that would work with,

#container {
width: 968px;
background: #FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;

converted
10-08-2010, 11:06 AM
also if I have div's within that container will I need to make them transparent as well?

gentleone
10-08-2010, 11:06 AM
instead of background: #FFF;
but of course you have to make that 10px by 10px png image first in Photoshop, Illustrator or whatever you using.

converted
10-08-2010, 11:12 AM
right i'm with you, sorry for the silly questions!!

gentleone
10-08-2010, 11:13 AM
also if I have div's within that container will I need to make them transparent as well?

It depends what you want with those divs, but usually no.

gentleone
10-08-2010, 11:15 AM
sorry for the silly questions!!
Don't worry about that! Better to ask silly/stupid questions then no questions at all. How would we else learn things.

Corrosive
10-08-2010, 12:18 PM
right i'm with you, sorry for the silly questions!!

At least you're not still asking questions about tables! That really tends to wind us up. Welcome to stable, modern and correct web design ;)