The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> CSS Validation: Opacity, See though boxes
Barons
post Nov 7 2010, 10:53 PM
Post #1


Member
***

Group: Members
Posts: 70
Joined: 7-November 10
Member No.: 13,091



Whats the correct code to use for see though boxes?

Right now I'm using

CODE
filter:alpha(opacity=80);   <<For IE
  opacity:0.8;                  << For Fire Fox


It appears to look and work great but its not valid.

QUOTE
Sorry! We found the following errors (4)
URI : TextArea
39 #wrap Parse Error opacity=50)
40 #wrap Property opacity doesn't exist in CSS level 2.1 but exists in : 0.8 0.8
71 .boxs Parse Error opacity=50)
72 .boxs Property opacity doesn't exist in CSS level 2.1 but exists in : 0.8 0.8


Thanks for all your help and advice.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 7 2010, 11:36 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,402
Joined: 9-August 06
Member No.: 6



Browser extensions never validate, unless they get incorporated in a future spec. That won't happen with this one. Validiation isn't a purpose of its own. You know why you get the error and that it doesn't harm anything. It's up to you if you want to use filter alpha or not.

One way to keep it a little cleaner, or seemingly so anyway, is to use conditional comments to serve a style sheet only to IE and put all IE specific stuff there.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
amit porwal
post Nov 8 2010, 10:59 AM
Post #3





Group: Members
Posts: 3
Joined: 8-November 10
Member No.: 13,096



opacity is a CSS3 specification. It doesn't validate to the 2.1 level that the validator is probably running at.

My advice: don't worry about it. CSS validation doesn't matter to the browsers or anything else. If your browser sees a selector that it doesn't recognize, it just ignores it, which is part of the specs.

The more standard browsers all recognize opacity because of how useful it is, not because CSS3 has been standardized (it hasn't).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Barons
post Nov 9 2010, 05:10 PM
Post #4


Member
***

Group: Members
Posts: 70
Joined: 7-November 10
Member No.: 13,091



Thanks for all the advice.

QUOTE(pandy @ Nov 7 2010, 11:36 PM) *

One way to keep it a little cleaner, or seemingly so anyway, is to use conditional comments to serve a style sheet only to IE and put all IE specific stuff there.


That sounds like it would be very helpful. Right now I'm having trouble getting my css positioned the same in IE and FF. I think I may be able to use this method to get around that as well.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Barons
post Nov 13 2010, 10:47 AM
Post #5


Member
***

Group: Members
Posts: 70
Joined: 7-November 10
Member No.: 13,091



How would i code a tag so that my background color is transparent but the images within that div are solid?

I've tried coding the image tags with 100 opacity and 130 to make up for the difference the background is taking away (its at 70) but it doesn't appear to have an effect.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 13 2010, 11:09 AM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,402
Joined: 9-August 06
Member No.: 6



No, it's all or nothing.

I can think of two ways. If the images aren't contained in the block you make transparent, you can position them on top of the transparent background. The other way around should work too.
CODE

#trans  { width: 500px; height: 500px;
          background: url(http://htmlhelp.com/icon/wdglogo.gif); opacity: 0.5 }
                  
#opaque img   { position: relative; top: -250px; left: 150px }


HTML
<div id="trans"></div>
<div id="opaque"><img src="http://htmlhelp.com/icon/wdglogo.gif"></div>


Or you could use an old-school trick. Only works if the background is a solid color though. Could work for a gradient too, but would be a lot harder to create. Make a smallish GIF, say 16 by 16 pixel. Then you color every second pixel with your background color and make the others transparent, like a chess board. The eye will be tricked and it will look like it's semi-transparent.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Nov 13 2010, 11:17 AM
Post #7


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Do you mean like this: CSS Opacity That Doesn’t Affect Child Elements ? Or search for that article title in Google, giving more results.

Ps: Here's a nice one too: http://www.cssplay.co.uk/opacity/png.html .

This post has been edited by Frederiek: Nov 13 2010, 11:19 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 13 2010, 11:52 AM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,402
Joined: 9-August 06
Member No.: 6



Don't see anything different there except the use of a PNG. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Barons
post Nov 13 2010, 11:58 AM
Post #9


Member
***

Group: Members
Posts: 70
Joined: 7-November 10
Member No.: 13,091



I think I need to add in another div before this will work. Trying to apply it to an img tag doesn't seem to be working. I'm going to need to play around with this for a bit. I think it my work out better if i have another div tag then i should be able to fix the text as well.

CODE
#wrap {
  width: 900px;
  height:135px;
  margin-top:130px;
  margin-left:auto;
  margin-right:auto;
  background-color:#000;
  filter:alpha(opacity=70);
  filter: “alpha(opacity=70)”;
  opacity:0.70;
  }
#header {
  margin-left:auto;
  margin-right:auto;
  color:#FFF;
  }
#header li {
  float: left;
  }
#header h1 {
  font-size:35px;
  padding-top:30px;
  margin-left:137px;
  margin-right:137px;
}
#header img {
    margin-top:8px;
    margin-left:50px;
    margin-right:50px;
    }
#img.ontop {
position: relative;
top: 4.7em;
}


CODE
<div id="wrap">

   <ul id="header">
      <li><img src="image/corpicon.png" alt="Corp Logo" name="left" width="86" height="86" align="left" class="ontop" id="left" /></li>
      <li><h1>WAR ARMADA</h1></li>
      <li><img src="image/corpicon.png" alt="Corp Logo" name="right" width="86" height="86" align="right" class="ontop" id="right" /></li>
  </ul>

    <ul id="nav">
      <li><a href="http://www.wararmada.com">About</a></li>
      <li><a href="http://www.wararmada.com/forums">Forums</a></li>
      <li><a href="http://www.wararmada.com/killboards">Killboards</a></li>
      <li><a href="http://www.wararmada.com/videos">Videos</a></li>
      <li><a href="http://www.wararmada.com/screenshots">Screenshots</a></li>
    </ul>
  
</div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Nov 13 2010, 12:38 PM
Post #10


WDG Member
********

Group: Root Admin
Posts: 8,316
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Depending on what you're trying to do with transparency, the following may work too:
http://meyerweb.com/eric/css/edge/complexspiral/demo.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 13 2010, 12:44 PM
Post #11


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,402
Joined: 9-August 06
Member No.: 6



Yup. Any positioning works.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Barons
post Nov 13 2010, 01:26 PM
Post #12


Member
***

Group: Members
Posts: 70
Joined: 7-November 10
Member No.: 13,091



I think i've got the general idea but now it seems like everything i thought i knew about aligning horizontally no longer applies.

my margin auto codes stopped working and the example I'm using it prefers left:"some"px; to move the boxes. Will i still be able to center my site for all screen res sizes doing this or should i be using another approach to align center horizontally? I was in the process of moving everything center but the left code doesn't do anything to my nav bar.


I'm testing it at

www(dot)wararmada(dot)com/untitled.html

Thanks for all the help and advice!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Barons
post Nov 13 2010, 02:09 PM
Post #13


Member
***

Group: Members
Posts: 70
Joined: 7-November 10
Member No.: 13,091



Yeah!!!! I love google!


I found this and it works great! I'm still having trouble with the nav bar though....

http://www.zachgraeve.com/2006/10/01/cente...e-position-div/


This post has been edited by Barons: Nov 13 2010, 02:12 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 14th October 2019 - 11:04 PM