but then it gets totally transparent.
i want about 75% opacity as the alpha filter does, but without the text and images getting affected by it.
Fang
11-11-2003, 10:57 AM
Apply a different opacity to the images and text elements
superDOS
11-11-2003, 11:07 AM
i've tried that if you meant like:
<img src="img.jpg" style=" filter:alpha(opacity=100)">
if i set the opacity to 100 it still gets transparent
Fang
11-11-2003, 12:54 PM
There's this hack that works for text:
<span style="position:relative;">normal text</span>
Try it on images. There may something in the css causing this.
Code or a link to look at?
superDOS
11-11-2003, 01:14 PM
you could take a look at http://medlem.spray.se/icecold
i'll try the span style code.
http://medlem.spray.se/icecold/theme/tapet/theme.css
for the css
Fang
11-12-2003, 05:14 AM
position:relative seems to work.
superDOS
11-12-2003, 07:13 AM
yeah it worked if i put in the html code but not in the css file.
how do i make it work in the css?
Fang
11-12-2003, 08:12 AM
td img, td span {position:relative;}
superDOS
11-12-2003, 08:21 AM
thanks.
it worked like a charm!
asbjoern
11-13-2003, 05:25 PM
hey I not quite sure the I have understood the above corespondence correctly, however if think that my problem might be related. My problem is that I would like to control the opacity level in a div tag.
I have this layer and would like it to be semi transparent.
Apply this ccs rule for 50% transparency:
.opaque {
filter: alpha(opacity=50);
-moz-opacity: .5;
}
In an absolute positioned element the text and background will be transparent.
To make the text "normal" again is not possible.
Another absolute element must be overlayed over the opaque layer.
The code shows how it's done for relative and absolute
Works for ie5.5, 6 and Mozilla
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
.opaque {
filter: alpha(opacity=50); /* ie */
-moz-opacity: .5; /* mozilla */
}
.styling {
width:50%; /* must have width */
background:#C2DADA;
color:#000;
}
.normal {
position:relative;
-moz-opacity:1;
}
-->
</style>
</head>
<body>
<h3>Relative</h3>
<div class="styling">no opacity</div>
<div class="opaque styling">opacity background and text</div>
<div class="opaque styling"><span class="normal">opacity background, normal text</span></div>
<h3>Absolute</h3>
<div class="opaque styling" style="position:absolute; left:100px; top:150px;">opacity background and text</div>
<div class="opaque styling" style="position:absolute; left:100px; top:170px;">opacity background, normal text</div>
<div style="position:absolute; background:transparent; left:100px; top:170px;">opacity background, normal text</div>
</body>
</html>
asbjoern
11-16-2003, 07:55 PM
Thanks a lot Fang, it look awesome, I am just chekking it out as I write. It was just the kind of attribute I was looking for. I tried to work it out with this filter but I only maneged to apply it proberly to images. You can make some pretty nice effects that way though, becouse it alov you to control the direction of the fade.
Drats - It works when I paste FANGS code alone into a page, but the page I'm working on has nested DIVs and I can't make this stuff work!! ARRRGH.
John
Ben Rogers
02-11-2004, 07:21 PM
wtf? i just made a test page to try it out, but even though it works in mozilla, ie wont do anything! i just gave the body a picd in the bg, then put a div with the listed filters and a red background over it.,
Fang
02-12-2004, 01:56 AM
Let's see some code Bigjohn and/or omega
Bigjohn
02-12-2004, 11:17 AM
Originally posted by Fang
Let's see some code Bigjohn and/or omega
Here is HTML with divs and spans:
<link rel="stylesheet" type="text/css"
href="css/2c-hd-ft-fixed-layout.css" />
<link rel="stylesheet" type="text/css"
href="css/2c-hd-ft-fixed-presentation.css" />
<link rel="stylesheet" type="text/css" href="css/menus.css">
</head>
<body>
<div id="outer">
<div id="hdr" align="center"><h1> M c D o n o u g h Fine Art</h1></div>
<div id="bar">_<span style="padding:5px;font-size:11px;"></span></div>
<div id="bodyblock" class="opaque styling" align="right">
<div id="l-col">
<span class="normal"><h4 align="center">Menu</h4></span>
<div id="menuv" style="width:100px; text-align:left;">
<span class="normal">
<ul>
<li><a href="#">Botanical</a></li>
<li><a href="#">Ornithological</a></li>
<li><a href="#">Natural History</a></li>
<li><a href="#">Native Americans</a></li>
<li><a href="#">Historical Portrait</a></li>
<li><a href="index.html">Home</a></li>
</ul></span>
</div></div>
<div id="cont">
<span class="normal">
and here are the CSS styles defined from the linked CSS files:
.opaque {filter: alpha(opacity=50); -moz-opacity: .5;}
.styling { width:50%; /* must have width */
color:#000;}
.normal {position:relative;-moz-opacity:1;}
Your input, oh wise FANG, will be greatly appreciated! I'm sure it's something that I, in my newbie mind, missed....
John
Fang
02-12-2004, 01:08 PM
Take position:relative; out of #bodyblock.
You are also suffering from "Classitis and Divitis (http://developer.apple.com/internet/bestwebdev.html)".
You can probably write this snippet as:
<div id="outer">
<h1 id="hdr" align="center"> M c D o n o u g h Fine Art</h1>
<div id="bar" style="padding:5px;font-size:11px;">_</div>
<div id="bodyblock" class="opaque styling" align="right">
<div id="l-col">
<h4 align="center" class="normal">Menu</h4>
<ul id="menuv" class="normal" style="width:100px; text-align:left;">
<li><a href="#">Botanical</a></li>
<li><a href="#">Ornithological</a></li>
<li><a href="#">Natural History</a></li>
<li><a href="#">Native Americans</a></li>
<li><a href="#">Historical Portrait</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</div>
</div>
<div id="cont"></div>
</div>
Many have used four letter words when referring to me, but never "wise" ;)
Bigjohn
02-12-2004, 01:49 PM
Wow. Cool.
Yes, I have lots of classes and styles and stuff... It's because I borrowed the CSS for the page from one site, and the CSS that makes the menus is derived from another lesson I saw on the web... My goal is to clean it up..
So, that was all it took? Why though... I wonder...
Bigjohn
02-12-2004, 02:09 PM
your code breaks the 2column layout...
dunno why.. but it does.
Ben Rogers
02-12-2004, 03:11 PM
hmm.. well keep in mind my page is just to so i can see the effect, and youll also need an elaborate image in the background to view it, i took a shot of my desktop...
<html><head><style> div {filter: Alpha(Opacity=75);
-moz-opacity: .5; background: red;}</style></head>
<body style="background: url(scrnshot.bmp);"><div> Blah.</div></body></html>
Fang
02-12-2004, 11:07 PM
omega
For the effect to work in IE the element has to have a width defined.
Bigjohn
I would need to see the full code to help.
Bigjohn
02-13-2004, 06:13 AM
Originally posted by Fang
omega
For the effect to work in IE the element has to have a width defined.
Bigjohn
I would need to see the full code to help.
fang -
I'll post the whole deal i a little while. Have to get my son off to school. I'll upload the page with BOTH versions of the code to a url.
John
PS - are you a PHP god as well? I have a quandry...
Ben Rogers
02-13-2004, 03:54 PM
Ah, that simple, huh? I guess that's why I'm here, to learn the nuances, if thats the right word. And, it could be a syntax error bigjohn, so maybe i'll be able to help you out....
Bigjohn
02-13-2004, 04:17 PM
been making my first php/mysql database page work today... so i've not posted the 'bug' yet. Will do so later, or tomorrow...
John
Ben Rogers
02-13-2004, 04:31 PM
well get a move on! :D
Bigjohn
02-13-2004, 05:11 PM
Ok.
See this link (http://jtest.stegenga.net/busted.html)
The top one is FANG's 'condensed, spanless' version.
The bottom is the one I fixed using FANG's styles.
And, incase you're interested, this link (http://jtest.stegenga.net/querytest2.php) is my PHP code to make a table from a database. I'm so proud of the fact that I could interpret other code and modify it to work!! I've not written CODE in, ummmm, something like 20 years...(well, not much more than bat files and html...)....
John
Ben Rogers
02-13-2004, 05:20 PM
just asking now if you dont want a debate about the looks of that site...? cuz then i wont bring it up...
Bigjohn
02-13-2004, 07:59 PM
Originally posted by omega
just asking now if you dont want a debate about the looks of that site...? cuz then i wont bring it up...
I've not started 'prettying it up' yet... I'm making the guts work first.
but comments are always welcome. Just remember, it's a high end antique art dealer!
Ben Rogers
02-13-2004, 08:04 PM
ok here's one suggestion:
you should make the lower links transparent, rather than the upper ones. trust me, detail showing through and being tinted llooks better than just color.
Bigjohn
02-13-2004, 08:10 PM
Originally posted by omega
ok here's one suggestion:
you should make the lower links transparent, rather than the upper ones. trust me, detail showing through and being tinted llooks better than just color.
you're talking to a newbie here.. ummm... example? what exactly?
John
Ben Rogers
02-13-2004, 08:20 PM
you know how you have two nav bars? one is tranlucent, right? make the other one translucent, i think it'll look better. just my opinon, it's not complicated just advice on the looks of that page
Bigjohn
02-13-2004, 09:01 PM
Originally posted by omega
you know how you have two nav bars? one is tranlucent, right? make the other one translucent, i think it'll look better. just my opinon, it's not complicated just advice on the looks of that page
There is really only one NAV...
The TOP section (right until the second title) is the formatting that FANG put in his 'short method'. The bottom, where the text "mcdonough' is 'gold' colored is the same content repeated with spans...
John
Ben Rogers
02-13-2004, 09:06 PM
just so you know i didn't read the code, i just looked at it, so no i didn't know that.
Fang
02-14-2004, 02:31 AM
works ok in IE, but there is a problem in Mozilla.
Bigjohn
02-14-2004, 09:07 AM
Originally posted by Fang
works ok in IE, but there is a problem in Mozilla.
fang - I have only IE6 on win2k.
I pasted your code exactly as you wrote it ABOVE the original code in the HTML page. Something 'breaks' the side/side display of the left column div and the content div within the bodyblock. If I leave all the spans alone it works...
John
Fang
02-14-2004, 11:06 AM
It is certainly worth downloading Mozilla1.x or Mozilla Firefox (http://www.mozilla.org/sitemap.html).
Mozilla browsers comply with nearly all W3C recomendations, better than IE, and has some very usefull tools and add-ons for web development. A MUST!
I will have a look at the source code and see what is required for both browsers.
Bigjohn
02-14-2004, 11:12 AM
Originally posted by Fang
It is certainly worth downloading Mozilla1.x or Mozilla Firefox (http://www.mozilla.org/sitemap.html).
Mozilla browsers comply with nearly all W3C recomendations, better than IE, and has some very usefull tools and add-ons for web development. A MUST!
I will have a look at the source code and see what is required for both browsers.
Feel free to comment on my stylesheet too, if you want! I need all the help I can get!
John
Fang
02-14-2004, 12:37 PM
Time-out !!!
This is a large css file for such a small site.
Consider carefully weather you really need all these rules.
Now some problems:
#ftr weight:700;style:normal; <font-weight:700; <style not allowed
* src: url(../CALIFOR0.eot); <n.a.
a.plain:link, a.plain:visited font-variant:bold; <font-weight
p.list text-alight:justify; (typo)
span.logo src: url(../LUCIDAC0.eot); <n.a.
The line beginning
#bindex a#index, #bmenus ...
condense then into one class
body has been used twice, reduce to one rule
Do not use reserverd, javascript or html words/elements/methods etc. for class or ID selectors.
i.e. div.body, p.submit, textarea.code, div.style
This can confuse the browser!
Validate (http://jigsaw.w3.org/css-validator/) your css.
The .opaque rule will throw an error because it is not part of the W3C specification.
When your css validates, go and validate (http://validator.w3.org/) your html. After which we can sort out any further problems.
Bigjohn
02-14-2004, 12:54 PM
thanks FANG.
The largest part of the CSS comes from this (http://www.csstips.com/css-menus/vertical.asp) site.
So those declarations are not mine. I combined the 'layout' definitions from another site at the top of the file.
John
Fang
02-14-2004, 01:22 PM
Try writing your own, you'll learn more that way.
TopStyle Lite (http://www.bradsoft.com/download/index.asp) is a free css editor you could use.
Bigjohn
02-14-2004, 01:26 PM
Originally posted by Fang
Try writing your own, you'll learn more that way.
TopStyle Lite (http://www.bradsoft.com/download/index.asp) is a free css editor you could use.
i downloaded and installed phpedit, which seems to have syntax markup for CSS as well. I got 9 errors in my xhtml.
Thanks for all your help. I am quite a newbie here. I find that I learn more by looking at what someone does that works and then seeing what happens when I change something.
By the way, the CSS validated with 11 errors and one warning. I'm going through to fix them now.
Do you know of an application that one can run that does that 'eyedropper' test for color - i.e. I hold the pointer over something and it gives me the hex color values? Looking at the color sheets on w3c is killing me!
John
Fang
02-14-2004, 01:32 PM
Take you pick (http://www.google.com.ni/search?sourceid=mozclient&ie=utf-8&oe=utf-8&q=color+picker) :D
Bigjohn
02-14-2004, 01:38 PM
Damn typos.
Some of those errors were stupid typos...
Now I validate the HTML - and here are a couple that I don't understand at all...
Line 20, column 39: document type does not allow element "h4" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
<span class="normal"><h4 align="center">Menu</h4></span>
^
Line 23, column 3: document type does not allow element "ul" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
<ul>
^
Ben Rogers
02-14-2004, 02:54 PM
lol, finally :):) i have valid css and almost valid xhtml (t35 put the script after the </html> tag)... kinda tempted to delete the alternate stylesheets so i can put up the "Valid CSS" link...
Fang
02-15-2004, 04:15 AM
line 20:
a block element wrapped by an inline elementn not permitted. <span><h4></h4></span>
"divitis", or change the <span> to a <div>
line 23:
Basically the same as previous error.
Bigjohn
02-15-2004, 11:42 AM
Originally posted by Fang
line 20:
a block element wrapped by an inline elementn not permitted. <span><h4></h4></span>
"divitis", or change the <span> to a <div>
line 23:
Basically the same as previous error.
So you cant use a heading class inside a span? One would think that ANY text class should/could be used within any layout method...
John
Ben Rogers
02-15-2004, 12:06 PM
Why don't you just give the span a class or id and use that?
mikeandmartin
12-24-2005, 11:46 AM
This is great! How do I get the samething to work for a table. I want the table background to be transparent so that the page background can be visible.
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.