468,532 Members | 1,651 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,532 developers. It's quick & easy.

a delicate style problem :)

hi, I have a problem, so please, who knows something I'd be very happy if he helps me

so, I wanted to specify an opacity for the site logo's DIV, i did, this:

Code -start-

div.logo {
... /*Other formating css script*/
filter: alpha(opacity=60); /*this is for opacity in IE (Internet Explorer)*/
-moz-opacity: 0.6; /*this is for opacity in Mozilla Firefox*/
... /*Other formating css script*/
}

Code -end-

my html code looks like this:


Code -start-

<div class="logo">
<img src="logo4.jpg">
</div>

Code -end-

in my intensions was to make the div, ONLY the DIV transparent, not actually the logo!, but

it was made transparent by itself, it seams from it's parent... how can I disable the

opacity, of the logo?

If i specify like this:

Code -start-

.logo img {

filter: alpha(opacity=100); /*this is for opacity in IE (Internet Explorer)*/
-moz-opacity: 1.0; /*this is for opacity in Mozilla Firefox*/

}

it makes the opacity relative to the div, but I wanna disable it at all!!

how can I do that?
Nov 28 '07 #1
10 1366
Death Slaught
1,137 1GB
Sup dvdriper, Welcome! To TSDN!

If you're wanting the transparency only on this one section then use "id" not "class". Yes it inherited the styling of your "div" because "img" was nested in your "div".

Furthermore if you're only wanting the transparency on your logo, then give the logo it's own "id", then use the code to "remove" the transparency.

Incase you don't know how to use id it's really simple.

Expand|Select|Wrap|Line Numbers
  1. #id {
  2.  
  3. }
Hope it helps, Thanks, Death
Nov 28 '07 #2
drhowarddrfine
7,435 Expert 4TB
You can use the CSS property 'opacity' for Mozilla since it understands it and you don't need '-moz-opacity'.
Nov 28 '07 #3
Sup dvdriper, Welcome! To TSDN!

If you're wanting the transparency only on this one section then use "id" not "class". Yes it inherited the styling of your "div" because "img" was nested in your "div".

Furthermore if you're only wanting the transparency on your logo, then give the logo it's own "id", then use the code to "remove" the transparency.

Incase you don't know how to use id it's really simple.

Expand|Select|Wrap|Line Numbers
  1. #id {
  2.  
  3. }
Hope it helps, Thanks, Death
thanks, but it doesn't work
look please to this link:
what I did wrong?
http://trr.sytes.net/tutor/index3.htm

the image must be in full opacity if so, like the original:
http://trr.sytes.net/tutor/logo4.jpg
Nov 28 '07 #4
Death Slaught
1,137 1GB
It looks fine to me, what it is that's bothering you?

- Death
Nov 28 '07 #5
It looks fine to me, what it is that's bothering you?

- Death
no sry, I want it to have no opacity, at all, if it's posible, if you look carefully it has a little of opacity (60%), but I need it to be identical to the original one:
http://trr.sytes.net/tutor/logo4.jpg

is that possible?
Nov 28 '07 #6
Death Slaught
1,137 1GB
As long as you give it a transparent value, it's going to have a little bit left.

If you're trying to achieve the effect of the page with the white background, why not forget of transparencies, and just put in the image?

- Death
Nov 28 '07 #7
Death Slaught
1,137 1GB
Here's exactly what they had, but with your gray background color.

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Strict//EN >

[HTML]<html>

<head>
<style type="text/css">

body {
background-color:#444;
}

</style>
</head>

<body>
<div>

<img src="logo.jpg" alt="Logo" />

</div>
</body>

</html>[/HTML]

- Death
Nov 28 '07 #8
Here's exactly what they had, but with your gray background color.

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Strict//EN >

[HTML]<html>

<head>
<style type="text/css">

body {
background-color:#444;
}

</style>
</head>

<body>
<div>

<img src="logo.jpg" alt="Logo" />

</div>
</body>

</html>[/HTML]

- Death

I understand, but now look here:
http://trr.sytes.net/

I want to have the effect that when the mouse is other the logo, all this transparency effects to be gone and to show me the logo without transparency.

there's not a css property that disables the opacity? or something like that?

sry my bad english
Nov 29 '07 #9
sorry double post!!!!!
Nov 29 '07 #10
Death Slaught
1,137 1GB
Why didn't you do exactly what they did? Here's their code:

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
body {
background-image: url(skin_images/background.gif);
/*setting the main body background!!! ussualy it's an image;)*/
}


.logo {
position: absolute; /*the positioning of all objects in the logo (can be
absolute, relative, fixed)*/
left: 5%; /*the logo is set to left 5%, in this way it'll fit
exactly in the middle of the page*/
margin: 20px auto 0px auto; /*margins, in this order: margin-top, margin-right, margin-
bottom, margin-left*/
padding: 6px 6px 6px 6px; /*padding settings are set for increasing readability!!! in
our case they are set for making some space between the
border of the div and the current text*/
background-color: #ffffff; /*background-color of the main div*/
width: 90%; /*the width of the main div*/

filter: alpha(opacity=60); /*this is for opacity in IE (Internet Explorer)*/
opacity: 0.6; /*this is for opacity in Mozilla*/

border: 1px solid #000000; /*the border proprieties you can change, by changing:
weight, border type, color*/
}


.logo img {
width: 100%; /*setting the width of the logo image, to fit the whole
space in the logo div */
filter: alpha(opacity=100); /*this is for opacity in IE (Internet Explorer)*/
opacity: 1; /*this is for opacity in Mozilla*/
}








#attention {
position: relative;



width: 100px
}



.maindiv {
position: absolute; /*the positioning of all objects in the main div (can be
absolute, relative, fixed)*/
left: 5%; /*the main div is set to left 5%, in this way it'll fit
exactly in the middle of the page*/
top: 40%;
background-color: #ffffff; /*background-color of the main div*/


padding: 6px 6px 6px 6px; /*padding settings are set for increasing readability!!! in
our case they are set for making some space between the
border of the div and the current text*/

width: 90%; /*the width of the main div*/
filter: alpha(opacity=60); /*this is for opacity in IE (Internet Explorer)*/
opacity: 0.6; /*this is for opacity in Mozilla*/
border: 1px solid #000000; /*the border proprieties you can change, by changing:
weight, border type, color*/

text-align: center;
font-size: 60pt;
font-family: ACQUAINTANCE, Calibri;
color: rgb(95,101,29);
}



</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TarakanRocker</title>

<base href="http://trr.sytes.net/mars/skin_images/" />
</head>
<body>


<div class="logo">
<a href="/mars/"><img src="logo4.jpg"
style="opacity: 0.6;filter: alpha(opacity=60);"
onmouseover="this.style.MozOpacity=1;this.filters. alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.6; this.filters.alpha.opacity=60"></a>
</div>



<div class="maindiv">
<img id="attention" src="http://trr.sytes.net/mars/skin_images/attention.png"><br>
Site under construction!
</div>













</body>
</html>[/HTML]

They didn't use CSS to change it, they used two attributes called onMouseOver, and onMouseOut. So it was done using JavaScript.

To get the same effect on your page use this.

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>TarakanRocker</title>
<style type="text/css">

body {
background-color:#444;
}

.logo {
position: absolute;
left: 5%;
margin: 20px auto 0px auto;
padding: 6px 6px 6px 6px;
background-color: #ffffff;
width: 90%;
filter: alpha(opacity=60);
opacity: 0.6;
border: 1px solid #000000;
}

.logo img {
width: 100%;
filter: alpha(opacity=100);
opacity: 1;
}

</style>
</head>

<body>

<div class="logo">
<a href="/mars/"><img src="logo4.jpg"
style="opacity: 0.6;filter: alpha(opacity=60);"
onmouseover="this.style.MozOpacity=1;this.filters. alpha.opacity=100"
onmouseout="this.style.MozOpacity=
0.6;this.filters.alpha.opacity=60" alt="Logo" />
</a>
</div>

</body>

</html>[/HTML]

I took out the comments, and endented my own way (couldn't stand the way they had it). Also I made it valid XHTML (It's not the greatest explination, so if you have any questions on XHTML just ask).

Hope it helps, Thanks, Death
Nov 29 '07 #11

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by macgyver | last post: by
1 post views Thread by Roy | last post: by
6 posts views Thread by rongchaua | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.