4 replies [Last post]
gerard
Offline
Regular
Last seen: 12 years 43 weeks ago
Joined: 2005-08-19
Posts: 45
Points: 0

Hi

http://www.redpathdesign.com/evolution.php

My client wants to have the right hand side of the page with a semi-transparent content (as shown, id="content"), but also have images within that content id to be fully opaque. I've tried to achieve this with the img tag in CSS but to no avail - the images are showing some transparency like the rest of the content id.

Any ideas?

Many thanks.

HTML:

Neil Redpath - Fine Furniture Design | evolution

evolution


Five Stages Of Evolution

1. Client Contact & initial discussion.



2. Preliminary drawings & client

feedback



3. Finished design, final selection

of timber.



4. Production & progress update.



5. Delivery, placement & aftercare.


 


evolution


home | gallery | commissioning | biography | evolution | contact
web design by abisti

CSS:

/* CSS for the main page layout

*/

body {
margin: 0;
padding: 0;
background-color: #805f27;
font-family: Arial, Helvetica, sans-serif;
font-size: 75%;
color: #FFFFFF;
font-weight: 400;
}

#wrapper {
background-color: #ECE9D8;
border: 2px solid black;
width: 760px;
margin-left: auto;
margin-right: auto;
color: #000000;
padding: 0;
background-image: url(images/bg1.jpg);
margin-top: 20px;
height: 420px;
}

#header {
margin: 110px 0 0 60px;
padding: 0;
color: #000000;
float: left;
}

#main {
margin-top: 10px;
}

#content {
margin: 0 0 0 375px;
padding: 8px;
background-color: #FFFFFF;
filter: alpha(opacity=70);

-moz-opacity: 0.7;
opacity: 0.7;
color: #000000;
height: 403px;
}

/* -----------------------top menu ----------------------- */

#navlist
{
width: 140px;
background-color: #FFFFFF;
color: #000000;

filter: alpha(opacity=50);

-moz-opacity: 0.5;
opacity: 0.5;
color: #000000;
}

#navlist li
{
list-style: none;
margin: 0;
}

#navlist li a
{
display: block;
padding: 5px 0px 5px 20px;
text-decoration: none;
border-bottom: 1px solid #cccccc;
font-size: 14px;
}

#navlist li a:link {
color: #000000;
}
#navlist li a:visited {
color: #000000;

}

#navlist li a:hover
{
color: #FFFFFF;
background-color: #8C6B4C;

}

/* -----------------------end top menu----------------------- */

/* -----------------------left menu----------------------- */

#leftmenu {
float: left;
margin: 69px 0 0 25px;

}

#leftmenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

/* -----------------------end left menu----------------------- */

/* -----------------------right menu ----------------------- */

#rightmenu {
float: right;
width: 150px;
background-color: #FFFFFF;
border: 1px #0062a6 solid;
margin-bottom: 10px;
padding: 0px;
color: #0062A6;
margin-right: 10px;
margin-top: 10px;
}

#rightmenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#rightmenu li a {
color: #FFFFFF;
background-color: #256694;
}

#rightmenu li a:hover {
color: #FFFFFF;
}

/* -----------------------end right menu----------------------- */

/* -----------------------footer - the stuff at the bottom of the page----------------------- */

#footer {
clear: both;
background-color: #ECE9EA;
border: 1px solid black;
margin-top: 10px;
text-align: center;
font-size: 10px;
}
#widecontent {
clear: both;
padding: 20px;
}

#footermenu {
display: inline;
list-style: none;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#footermenu li {
display: inline;
}
#footermenu li a {
color: #FFFFFF;
text-decoration: none;
padding: 0 5px;
}
#footermenu li a:hover {
color: #FFFF00;
}
.center {
}

/* -----------------------end footer stuff----------------------- */

/* -----------------------now for the tags----------------------- */

h1 {
font-size: 16px;
line-height: normal;
text-decoration: none;
color: #256694;
margin: 0 0 0 0;
}

h2 {
color: #FFFFFF;
font-size: 40px;
filter: alpha(opacity=30);

-moz-opacity: 0.3;
opacity: 0.3;

padding: 3px;

}

h3 {
font-size: 16px;
}
h4 {
font-weight: bold;
color: #000099;
font-size: 12px;
}

img {
border-style: none;
border: 0;
filter: alpha(opacity=100) !important;

-moz-opacity: 1.0 !important;
opacity: 1.0 !important;
}
#wrapper #content p {
text-align: left;
}
#wrapper #content ul {
text-align: left;
}

/* -----------------------end tags stuff----------------------- */

/* -----------------------miscellaneous classes and IDs----------------------- */
.leftfloat {
float: left;
border: 0;
margin: 10px 10px 10px 0;
}

#date {
font-size: 14px;
font-weight: bold;
}
.menudesc {
font-size: 11px;
}

.rightfloat {
float: right;
margin: 10px 0 10px 10px;
}

.bold {
font-weight: bold;
}
#wrapper #header #navlist ul {
margin: 0 0 0 0;
}

.overview {
background-color: #FFFFFF;
padding: 5px 5px 5px 2px;
display: block;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #cccccc;
}
.help {
text-align: center;
color: #FF0000;
font-size: 16px;
font-weight: bold;
background-color: #FFFF00;
}
#votebutton {
border: 2px solid black;
padding: 5px;
text-align: center;
width: 50px;
font-weight: bold;
background-color: #CCCCCC;
text-decoration: none;
margin-top: 5px;
cursor: pointer;
}
#votebutton a {
text-decoration: none;
text-align: center;
}
.greentext {
color: #006633;
font-weight: bold;
}
.textbox {
border: solid 1px black;
padding: 5px 5px 5px 5px;
background-color: #CCCCCC;
color: #006633;
}
.red {
color: #CC0000;
}
.redbold {
font-weight: bold;
color: #FF0000;
}

.ordertable {
background-color: #E1F6E0;
color: #000000;
}
.center {
text-align: center;
}
#rightpadding {
margin: 8px;
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

To avoid opacity on the

To avoid opacity on the images, they need to be nested within a different element and somehow shifted into the appropriate location. Opacity works on its element after the element and all of its children have been rendered. If you are familiar with photoshop, its like the element with opacity is group element and the opacity is applied when the group element is combined with the rest of the image. There is no way the element or its children can avoid it. That leaves you with two choices:

- make the images part of a different element and shift them into position (as mentioned above)
- don't put opacity on the container element, but put it on all of its children except the image.

Taking a completely different tack. Does your client actually want the text to be transparent? Its quite likely they only want the background to be transparent. In which case don't use opacity, use a background image with alpha transparency (and the filter property for IE6 (& 5.5).

gerard
Offline
Regular
Last seen: 12 years 43 weeks ago
Joined: 2005-08-19
Posts: 45
Points: 0

Hi Chris Many thanks for

Hi Chris

Many thanks for this - I think my client does only want the background transparent so I like the idea of a background image with alpha transparency (and the filter property for IE6 (& 5.5).

Can't seem to Google a good tutorial for this though - anything to recommend? And where would this leave us with Firefox?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

A tutorial for which? All

A tutorial for which?

All graphics programs should be able to create a flat colour background with an alpha-transparency value. You probably want a mid-grey, but experiment with white, grey and black to get a feel for how they look.

Firefox and all other modern browsers, including IE7, support PNGs with alpha-transparency. So nothing to do here.

IE6 needs a transparent background and the alpha image loader filter transform. Google on "msdn filter alphaimageloader" should get you some details. Put the IE6 style rule after the main style rule using your favourite method to target IE6.

gerard
Offline
Regular
Last seen: 12 years 43 weeks ago
Joined: 2005-08-19
Posts: 45
Points: 0

Oh! That's brilliant thanks

Oh! That's brilliant thanks - I was expecting something far more complicated!

Many thanks for your help Smile