CSS - Css Background Opacity For A:link And A:hover
I am trying to learn CSS and am currently trying to mirror a website to practice. I would post the website I am mirroring but due to the forum rules, I cannot.
I am trying to replicate the black background with opacity for the a:link and the white background with opacity for the a: hover. My browser is IE and I have tried the filter:alpha(opacity=1-100) but to no avail. Here is the HTML I am using for this particular container: <div id="fivels"> <div id="classone"> <a class="home" href="#">Home</a> <a class="gallery" href="#">Gallery</a> <a class="about" href="#">About</a> <a class="help" href="#">Help</a> <a class="partner" href="#">Partner</a> </div> </div> And here is my CSS: #fivels { margin-left: auto; margin-right: auto; height: 150px; width: 800px; background-image: /* the forum will not let me post URLs, gut a jpg of grass goes here */ } #classone { margin-left: auto; margin-right: auto; width: 800px; text-align: center; } #classone a:link { color: white; text-decoration: none; background-color: black; filter: alpha(opacity=20); } #classone a:visited { color: white; text-decoration: none; background color: black; filter: alpha(opacity=20); } #classone a:hover { color: white; text-decoration: none; background-color: white; filter: alpha(opacity=20); } .home { padding: 3.2em; } .gallery { padding: 3.2em; } .about { padding: 3.2em; } .help { padding: 3.2em; } .partner { padding: 3.2em; } Also, on a side note, is using the padding attribute the most efficient way of seperating the links? Similar TutorialsI would like the link colour to change and the background of the <li> to change as well. I can't figure out what CSS to use for it though. I have made bold and underlined the li I want to change on hover. Code: <li id="menuitem_2mainnav"> <a id="menulink_2mainnav" class="mainlevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=2">Meetings</a> <ul id="menulist_2mainnav"> <li id="menuitem_2_1mainnav"><a id="menulink_2_1mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=14">TEST 1</a></li> <li id="menuitem_2_2mainnav"><a id="menulink_2_2mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=15">TEST 2</a></li> <li id="menuitem_2_3mainnav"><a id="menulink_2_3mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=16">TEST 3</a></li> <li id="menuitem_2_4mainnav"><a id="menulink_2_4mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=17">TEST 4</a></li> </ul> </li> I have tried: Code: #menulist_2mainnav li:hover{ color:#000000 !important; } But it doesn't change the links text colour. I am trying to impose a translucency for the background image of my page (using CSS background-image), so that if there was no text on the page, the image looks solid, but when text is displayed over the page, the text takes precedence and looks solid, but the underlying bits of the background image becomes translucent, only partially showing through so as not to conflict with the text. How do I achieve that with CSS? I was thinking along the lines of doing something with the background attribute of the text itself, like an XOR bit-mask of sorts, so that underlying bits of the background image on the page would be XOR'd with the background of the text to create a washed-out effect. Or something like that. Any ideas? Thoughts? Hallo! I'm a newbie here, and in CSS too, and would like to be helped from you guys.. I want to make a content with a transparent/opacity background, and since i dont want the content to be transparent too, i make two divs. <div id="opacBkg" style=" position: absolute; z-index: 15; left: 10%; top: 155px; bottom: 20%; width: 80%; background-color:#999933; opacity: 0.50; filter: alpha(opacity = 0.50); -moz-opacity: 0.5; "></div> <div id="Content"> <h3 style="text-align:right;">Welcome to ABC Service</h3> <h1 style="text-align:right;">Wilkommen auf ABC Service</h1> </div> and i have put the Conten declaration in style.css. The #Content: #Content { position: absolute; z-index: 20; left: 10%; top: 155px; bottom: 20%; width: 80%; font-family: Garamond, "Times New Roman", Times, serif; font-size: 14px; color: #ffffff; overflow: auto; margin: 20px 10% 5px 10px; } And so i have make 2 overlapping divs.. And the problem is that the text appears to be slightly mispositioned, the text is out of the background div.... Hope you can help me... What I'm after happening is for the background to have opacity but not the text. I can make the background have opacity but I don't know how to stop the text being changed by it. Here's the code that I'm using for this bit. CSS Code: a:link{ font-size: 11pt; font-family: Verdana; text-decoration: none; color:#000000} .back{background-color: #cd5b00; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: .5;} html Code: <tr> <td width="100%" class="back"> <ul> <li><a href="link.htm">link</a></li> <li><a href="link.htm">link</a></li> <li><a href="link.htm">link</a></li> <li><a href="link.htm">link</a></li> </ul> </td> </tr> The html code is on a div with a background image. In the above code the background of the table has opacity but so does the text, is there anyway to stop the text having opacity as well? Hope that makes sense, thanks for reading, if it's not clear let me know. I'm just learning CSS, trying to create a simple 3 column layout using floats. I have a background image and would like each column to have a background transparency. I'm able to sort of do this using something like the following: //background: white; //opacity:0.2;filter:alpha(opacity=20); the problem I have is that it changes the transparency of the content I put into the float, not just the background. I tried creating a span and specifying the opacity of that but it only works relative to the transparency of the float. It still doesn't create non-transparency within the float. Hi, Ive coded a page so that there is a coloured div with 30% opacity and then added another div inside it for text but the text also has the 30% opacity... how do i get it to display the text correctly? Here is my example Thanks for any help, Mike Hi! I'm wondering how can I do the little opacity to the <div> box so we can see the background wallpaper a little bit.. Example can be seen at http://koivi.com/css-menus/ and look at the grey box where you can see the images at the upper left corner... I couldn't figure it out... Thanks, FletchSOD Using transparent gif text. It is linked On mouse over, there is a white background with an opacity of 50%, can I do this with only CSS or will I need to use javascript? How do I do this? I've figured out the opaque text on 50% opaque white background. Hey guys, Just seeing if this is possible. By the way this is for a myspace page. Looking to have a link to change opacity on current page. table table table, div table table{ border-color:rgb(0,0,0); border-style:solid; border-width:2px; background-color:rgb(55,55,5); opacity:0.8; -moz-opacity:0.7; filter:alpha(opacity=50); } This is the code currently. Is it possible (without java) to have a link that would set "opacity:0" Thanks! I have a <ul> list in which I set the opacity for the <li> elements. Inside the <li> elements I have <a> elements. The issue is that the <a> element text is inheriting the opacity for the <li>??? Here is a link http://casadelmar.tmhdesign.com Thanks. Not sure what this is referred to. I checked my dhtml book but its from 2000! I want to apply link, visited, hover, active to below code: Code: #print_category { position: absolute; left: 35%; top: 30%; font-size: 13px; text-align: left; line-height: 2 ; margin-right: 5em; } Properties I want to apply: A:link {color: #000099; text-decoration: underline; } A:visited {color: #000099; text-decoration: none; } A:hover {color: #000099; text-decoration: none; } A:active {color: #000099; text-decoration: none; } How can this be done, Ive tried but to no avail: - A#print_category:active {color: #000099; text-decoration: none; } Thanks! Hello, The hover link looks good on IE7 and FF but not on IE6 Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #header_navigation { background-color:#0000FF; position:absolute; float:left; font-size:11px; color:#FFFFFF; font-weight:bold; left:190px; top:130px; width:145px } #header_navigation ul { border:1px solid #FF0000; float:left; list-style-type:none; margin:0 30px 0 0; } #header_navigation li { width:145px } #header_navigation li:hover { background-color:#FFFFFF; } #header_navigation a { text-decoration:none; color:#ffffff; background-color:none; } #header_navigation a:hover { color:#000000; background-color:#FFFFFF; width:145px } </style> </head> <body> <div id="header_navigation"><!--begin of header_navigation--> <ul> <li><a href="index.asp">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Forum</a></li> <li><a href="blog.asp">Blogs</a></li> <li><a href="shoutbox.asp">Shoutbox</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Photo Gallery</a></li> <li><a href="#">About Us</a></li> </ul> </div> </body> </html> Hello, I am trying to get two image links (that look like tabs) to get to work on my web page. What I want to have is a tab that when a user hovers over it, the background image appears (just a different version of the original image). So my HTML is: Code: <table> <tr> <td><a class="flights"><img src="/images/buttons/f.gif"></a></td> <td><a class="vacations"><img src="/images/buttons/v.gif"></a></td> </tr> <table /> and my CSS is: Code: .flights { background:url(/images/buttons/f_h.gif) center top no-repeat; width: 78px; height: 41px; /* background-image: url(/images/buttons/f_h.gif); */ margin-right: 1px; } .flights:hover img { visibility: hidden; } .vacations { /* background:url(/images/buttons/v_h.gif) top left no-repeat; */ background-image: url(/images/buttons/v_h.gif); } For some reason in FF (have not tested in IE) the background image sticks out a little at the bottom even though both images used are exactly the same size. Then when I hover over the tab, its background image appears but it is about halfway down from the foreground image. Any insights as to why this might be happening? I've got a problem with the background on hover. It's just a smidge too low and I can't figure out how to raise the background without raising the text. If you look at the image below, you'll notice that the hover "courses & events" is just a bit too low. (real stuff is on a development site, with themes, master pages, etc., and doesn't have a dns beyond our firewall) Any help appreciated. http://www.mahec.net/images/a.jpg #topBar { position:absolute; padding:0; width:800px; background:#78658c; filter: Alpha(Opacity=90, FinishOpacity=30, Style=1, StartX=0, StartY=90, FinishX=0, FinishY=30); -moz-opacity:.60; opacity: 0.6; border-top:solid 1px #000000; height:25px; overflow:hidden; } #topInnerBar a { text-decoration:none; color:#F9F9E4; font-weight:bold; line-height:27px; margin-top:-5px; padding:2px 10px 5px; } #topInnerBar a:hover { text-decoration:none; color:#593F72; font-weight:bold; line-height:27px; margin-top:-5px; padding:2px 10px 5px; background:#F9F9E4; } Hi, I am trying to set background color on hover for a single table of links, rather than the entire document like the below example shows. http://www.projectseven.com/tutorials/css/pseudoclasses/ I have tried various ways, I do not want to use javascript for this and I am aware of the way to apply background color to the .td field but this also applys to the normal text not just links. So my question is how do I apply the background hover color to one table of links instead of the body. Thanks! Hi All, Anyone know of a way to change acheive this behaviour? I want to have several links in LI and when one hovers over the LI, the background of the whole UL changes (not just the background of the list item itself). Thanks in advance for any pointers. Cheers, :)Ben I'm using <LI> to make vertical menu with image hover effect? It seems quite good and working properly in both IE and Firefox. But In IE6 hover effect comes slowly after nearly 1 seocnd. Is there any solution? following is my css code. Code: #navigation { width:160px; font:bold 14px Arial, Geneva, Helvetica, sans-serif; } #navigation ul {list-style: none; margin: 0; padding: 0;} #navigation ul li a {display:block; background:url(button-menu2.png) no-repeat; vertical-align: bottom; font-size:12px; font-weight:bold; text-align: left; padding-top: 6px; padding-left: 18px; height: 20px !important; height: 20px; width: 100%; text-decoration: none; color: #ffffff; } #navigation ul li a:hover {text-decoration: none; background-position: 0px -25px; color: #fff;} I have the following code, but the CSS file that I have already defines link and hover to be something else Is there a way I can edit the div#hdr_cnt to have it's own definition of the hover and link? Thanks for the help Code: div#hdr_ctr { width:100%; min-width:670px; background-color:#FFF; overflow:hidden; margin:0; padding:0; text-align:center; color:#000000} div#hdr_cnt { background: url('http://www.hobbyspeed.com/header/hobbyspeed.jpg') no-repeat center; width:670px; height:73px; margin:0 auto; padding:0;} div#hdr_cnt ul.l { float:left; margin:15px 0 0 18px; padding:0; list-style-type:none; direction:rtl; text-align:right; color:#000000} * html div#hdr_cnt ul.l { margin-left: 9px; color:#000000 } div#hdr_cnt ul.r { float:right; margin:15px 0 0 20px; padding:0; list-style-type:none; direction:ltr; text-align:left;} Thanks for taking the time to read my question. I have links on my page that when visited, change color. Simple enough. I also have in my css a hover line that says change the color to white. This works on the unvisited links, but not the visited ones. Why? Here is my css. @charset "iso-8859-1"; .text { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #ffffff } .textCopy { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #CCCCCC; hover: #ffffff } .textbigger { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCCCC; hover: #ffffff } a:hover { color: #ffffff; } a:link { color: #999999; } a:visited { color: #747474; } a:active { color: #CCCCCC; } body { margin-top: 0; background-color: #000000; } You can see this at work at www.pierced.ca Brad Hello I would like to make a hover effect when my mouse is over a link, as shown in my attachment. What I want is, as shown in the attachment (at design time), when I hover on any link, two horizontal lines are added at the top and bottom of that specific link, and a slight black transparency appears as well as a highlighter (not the text of the link, and by default the background will be slightly grayed). Anyone can help me with this? Edit: even if the black transparency does not appear is not a problem, but how to implement the two lines? Am using only css and html here, no javascript or any other libraries. |