|
CSS - Different Have Same Rollover At Same Time?
hey folks, I've got about 4 words in a row all with different styles on them!
I'm using the :hover function to put rollovers on the different words which works sweet. problem is, can I when I rollover the first word make the rollovers on the other words highlight? cheers p.s if you dont know what I'm talking about i'll post up a simple example Similar TutorialsHi, q) In css, can you rollover an link in a navigation bar that is replaced by another image instead of text. q)With a dropdown menu eg suckerfish example, can you also use a rollover effect on the drop own choices either with text or an image? My website is warriorquest.co.nr and for some odd reason, the css rollovers are working in the latest IE, but not in the latest Firefox. THis is something i never expected, here is my css: Code: css a { text-decoration: none; }
a:link { color: #0000FF; }
a:active { color: #C0C0C0; }
a:visited { color: #0000FF; }
a:hover
{
color: #0000FF;
border: 1px solid #0000FF;
padding: 5px;
width: 190px;
background-color: #ffffff;
}
body
{
color: #ffffff;
background-color: #2F4F4F;
}
div
{
margin-top: 50px;
margin-bottom: 50px;
}
Thx for your help =) EDIT: it seams i had to completely reload the page, but now they dont display right. THey are supposed to look like in IE, any suggestions? Hi everyone, I'm having a rollover image problem in IE6. The problem isn't that the rollover isn't working - it's that the initial image before the rollover isn't displaying. You can see what I mean at: http://www.francesli.myubertor.com/ Doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML for Menu: Code: <!-- --------------- main menu --------------- --> <div id='menu_outer'> <div id='menu_inner'> <ul> <li id="up_menu1" class="sel"> <a class="sel" href="/" title="" target="" rel="">Home</a> </li> <li id="up_menu2" class="unsel"> <a class="unsel" href="/Properties.php" title="" target="" rel="">Properties</a> <ul> <li id="up_menu2_1" class="unsel"> <a class="unsel" href="/ActiveListings.php" title="" target="" rel="">Active Listings</a> </li> </ul> </li> <li id="up_menu3" class="unsel"> <a class="unsel" href="/ForBuyers.php" title="" target="" rel="">For Buyers</a> <ul> <li id="up_menu3_1" class="unsel"> <a class="unsel" href="/FirstTimeBuyers.ubr" title="" target="" rel="">First Time Buyers</a> </li> </ul> </li> <li id="up_menu4" class="unsel"> <a class="unsel" href="/ForSellers.php" title="" target="" rel="">For Sellers</a> <ul> <li id="up_menu4_1" class="unsel"> <a class="unsel" href="/20TipsforSellingYourHome.ubr" title="" target="" rel="">20 Tips for Selling Your Home</a> </li> </ul> </li> <li id="up_menu5" class="unsel"> <a class="unsel" href="/Blog.php" title="" target="" rel="">Blog</a> </li> <li id="up_menu6" class="unsel"> <a class="unsel" href="/Links.php" title="" target="" rel="">Links</a> </li> <li id="up_menu7" class="unsel"> <a class="unsel" href="/Contact.php" title="" target="" rel="">Contact</a> <ul> <li id="up_menu7_1" class="unsel"> <a class="unsel" href="/AboutMe.ubr" title="" target="" rel="">About Me</a> </li> </ul> </li> </ul> </div> </div> CSS for Menu: Code:
/* Navigation Menu */
#menu_outer {
top: 77px;
background: transparent url(../../content/image/287.png) repeat-x scroll 0% 0%;
height: 42px;
padding-top: 7px;
text-transform: uppercase;
}
#ubertor #menu_outer li a {
color: #FFFFFF;
font-weight: bold;
}
/* Home */
#up_menu1.sel a{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 60px;
height: 27px;
}
#up_menu1.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png) #6fcee4 no-repeat bottom;
width: 60px;
height: 27px;
}
#up_menu1.unsel{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 60px;
height: 27px;
}
/* Properties */
#up_menu2.sel a, #up_menu2.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/309.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 90px;
height: 27px;
}
#up_menu2.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/309.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 90px;
height: 27px;
}
#up_menu2.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 90px;
height: 27px;
}
/* For Buyers */
#up_menu3.sel a, #up_menu3.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/311.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 99px;
height: 27px;
}
#up_menu3.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/311.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 99px;
height: 27px;
}
#up_menu3.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 99px;
height: 27px;
}
/* For Sellers */
#up_menu4.sel a, #up_menu4.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/313.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 101px;
height: 27px;
}
#up_menu4.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/313.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 101px;
height: 27px;
}
#up_menu4.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 101px;
height: 27px;
}
/* Blog */
#up_menu5.sel a, #up_menu5.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/317.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 58px;
height: 27px;
}
#up_menu5.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/317.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 58px;
height: 27px;
}
#up_menu5.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 58px;
height: 27px;
}
/* Links */
#up_menu6.sela, #up_menu6.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/319.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 65px;
height: 27px;
}
#up_menu6.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/319.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 65px;
height: 27px;
}
#up_menu6.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 65px;
height: 27px;
}
/* Contact */
#up_menu7.sel a, #up_menu7.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/315.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 82px;
height: 27px;
}
#up_menu7.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/315.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 82px;
height: 27px;
}
#up_menu7.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 82px;
height: 27px;
}
#ubertor #menu_outer li li a {
text-transform: none;
background-color:#CCCCCC;
background-image:none;
color:#222222;
display:block;
float:none;
padding:2px 10px;
text-indent:0;
width:auto;
height: auto;
}
#menu_inner ul li a, #menu_inner ul li a:hover {padding: 0px 0px}
Help will be very appreciated, I'm supposed to have this done today. :/ Hi, I have a button as follow: Code:
#memberlogin .login{
background:url(/images/memberlogin_btn.gif) no-repeat left top;
display:block;
width:130px;
height:31px;
border:0;
}
I need to make a rollover. This is one image, same as this method: http://www.nowcss.com/links/image-rollover-with-css I tried it this way Code:
#memberlogin a.login span {
display: none;
}
#memberlogin a.login:hover {
background: url(/images/memberlogin_btn.gif) repeat 0px -31px;
}
but it's not working, do you know what I'm doing wrong here? Thanks in advance. Hey folks, I'm having issues with a dropdown menu in IE 6 to the tune of it not showing up when it's rolled over. Here's the page in question. Here's the CSS I"ve used for it: Code:
/* LANDING PAGE MENU LAYOUT */
#landingMenu {
width:960px;
height:450px;
position:relative;
background:transparent none;
}
#landingMenu li {
float:left;
font-size:14px;
font-weight:bold;
}
#landingMenu li a {
width:192px;
float:left;
background:#ffc000 url(images/landingMenu_bg.jpg) no-repeat top;
display:block;
text-align:center;
min-height:255px;
padding-top:15px;
}
/* ENTER TOP PADDING AND ACCORDING HEIGHT FOR EACH DIVISION (NORMAL HEIGHT IS 360PX, ADJUSTED FOR FOOTER HEIGHT CLEARANCE)
#landingMenu li#CDS_menu a { min-height:255px; padding-top:35px;}
*/
#landingMenu li li {
background:transparent none;
float:none;
padding:0;
height:auto;
text-transform:none;
list-style:disc;
margin-left:40px;
margin-top:5px;
font-size:14px;
color:#0f1190;
font-weight:bold;
}
* html #landingMenu li li { margin-left:20px; }
#landingMenu li li.landingCaption { list-style:none;margin-top:10px;margin-left:25px; }
* + html #landingMenu li li { margin-left:-160px;width:150px;}
* + html #landingMenu li li.landingCaption { width:150px;display:block;margin-left:-160px; }
#landingMenu li ul {
display: none;
position: absolute;
margin-top:125px;
background:transparent none;
z-index:600;
width:192px;
}
#landingMenu li > ul { top: auto; left: auto; }
#landingMenu li:hover ul, li.over ul { display: block; }
/* END LANDING MENU */
Main issue is that I don't even have a copy of IE 6 to fix for, and I've been going off of screen shots from the client. Any thoughts? I am trying build a bottom bucket with two different links, that when you rollover either one of the images a different image is shown. Well I have all of that working but if you rollover the first image and while the li ul image is being shown take your mouse and move to the right. The hover state of the second ul is now shown. But if you go backwards and start moving your mouse to the left, nothing happens, which is great! I have tired all sorts of things. Right now I have a link that has a very stripped down version of what it is suppose to be. I have tired different z-index's but still nothing. Thanks for the help! http:// www. movementinteractive. com/ clients/ ParkAve_web/web/tab_test.html I have this code which changes text into a image, but how do I have an image instead of text? I mean so everythings images and no text. <style type="text/css"> #nav a:hover { background: url("arrow_hover.png") no-repeat; } #nav a img { width: 88px; height: 67px; position: absolute; top: 200px; left: 500px; border: 1px solid black; visibility: hidden; } #nav a:hover img { visibility:visible; } </style> <div id="nav"> <ul> <li><a href="#">Link1<img src="camera.jpg" alt="" /></a> <li><a href="#">Link2<<img src="home.png" alt="" /></a></li> <li><a href="#">Link3<<img src="camera.jpg" alt="" /></a></li> <li><a href="#">Link4<<img src="johnpotter.jpg" alt="" /></a></li> </ul> </div> Hi, I have a problem, I can make a rollover on a link with the hover pseudo class easily, and it will work in IE and FF, but I cant do one over a table cell in IE. My code is below, it works as I want in FF, but not IE. Dom. Quote: .nav-cell-main-nonsel { font-family: "Comic Sans MS", Tahoma, Tunga, Verdana, Arial, Geneva; font-size: 10px; font-weight: normal; color: #333333; vertical-align: middle; text-align: left; padding: 0px 0px 0px 5px; background-image: url(../../images/[ps]triangle1.gif); background-position: left; background-repeat: no-repeat; border-bottom: 1px solid #EDEDED; padding: 0px 0px 0px 20px; } .nav-cell-main-sel, .nav-cell-main-nonsel:hover { font-family: "Comic Sans MS", Tahoma, Tunga, Verdana, Arial, Geneva; font-size: 10px; font-weight: normal; color: #333333; vertical-align: middle; text-align: left; padding: 0px 0px 0px 5px; background-image: url(../../images/[ps]triangle2.gif); background-position: left; background-repeat: no-repeat; border-bottom: 1px solid #EDEDED; padding: 0px 0px 0px 20px; } Cheers, Dom. Greetings I'd like to make a css remote rollover, but I'm hitting a bit of a snag. Most of the examples I've seen they use the same selector type usually within an unordered list <ul>. Then just use positioning to move both links away from one another. What I'd like to do is have a link in one <ul>, like a menu bar, linked to a rollover effect in another <ul> altogether. In a different <div> altogether as well. Is this possible? Off the top of my head I imagine you could do it with a <span> style that only has the a:hover code in it... but I'm not getting it to work right. Anyone else have some ideas on this? Thanks in advance. Hello, If you visit: http://tombraiders.net/katie/jsquared/ecad_working.shtml User: letme Pass: in and view it in FireFox, IE7 you'll see the intended results (a few of the ASIC slots have rollovers, this is important to see) In IE6 when I rollover the boxes that are supposed to have popups, it doesn't work. Now I know it's conflicting with a style in my stylesheet on this line: .content li a { background:url(images/list_bull.gif) center left no-repeat; margin:0; padding:0 0 0 19px; color:#434343; line-height:2em;} Also, the list_bull.gif controls the bullets, so I need this to still function. However, on the specific page with the rollover diagram you'll see they're sitting beside the boxes that have a rollover, and I will need a fix for this as well. Any help would be GREATLY appreciated! Thanks i have a problem with my rollovers. they work fine in ff and safari, and shockingly do not work in ie6. i've been at it for a couple of days now, and can't seem to make headway on it. i'm also new to this forum, so im hoping i do this right: html: <div id="banner"><img src="assets/banner.png" alt="xxx" width="450" height="145" border="0" /> <ol> <li><a href="index.html" id="home">home</a></li> <li><a href="about.html" id="about">Aboutx</a></li> <li><a href="portfolio.html" id="portfolio">xPortfolio</a></li> <li><a href="services.html" id="services">Servicesx</a></li> <li><a href="news.html" id="news">Latest News</a></li> <li><a href="contact.html" id="contact">Contact </a></li> </ol> </div> css: @charset "utf-8"; body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; } body { background-color: #000000; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; background-repeat: repeat-y; } div { background-position: center; } #container { width: 100%; background-color: #0000000; } #containertopout { width: 100%; background-image: url(topbg.png); background-repeat: repeat-x; height: 300px; } #containertopin { width: 900px; margin-right: auto; margin-left: auto; } #banner { height: 245px; width: 450px; float: left; } #flash { width: 450px; float: left; padding: 0px; top: auto; height: 228px; margin-top: -0.7em; margin-right: auto; margin-bottom: -20px; margin-left: auto; } #flashcontent { margin: 0px; padding: 0px; height: 228px; width: 450px; } #footer { display: inline; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 850px; } #containermiddle { width: 850px; margin-right: auto; margin-left: auto; background-repeat: repeat-y; background-color: #000000; float: none; padding: 0px; } #body { background-repeat: repeat-y; background-color: #000000; } #containerbottomout { width: 100%; background-image: url(botbg.png); background-repeat: repeat-x; height: 120px; clear: both; overflow: auto; } #containerbottomin { width: 850px; margin-right: auto; margin-left: auto; clear: both; float: none; } .col1 { border-right-width: 2px; border-right-style: ridge; border-top-color: #071E3C; border-right-color: #071E3C; border-bottom-color: #071E3C; border-left-color: #071E3C; } #navlinks li { display: inline; list-style-type: none; margin-left: 0.25em; padding-left: 0.5em; border-left-width: 1px; border-left-style: solid; border-left-color: #18457B; } #navlinks .first { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; margin-left: -0.75em; } #navlinks a { font-size: 10px; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5; color: #4480d5; } #navlinks p { margin-top: -1.5em; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #navigation { padding-top: 1em; text-align: center; } .style1 { font-size: 20px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FF9B21; } .style2 {font-size: 16px} .style3 { color: #4480d5; font-size: 12px; line-height: 20px; } .style4 { color: #FF9B21; font-size: 12px; line-height: 20px; } a:link { color: #4480D5; font-size: 12px; line-height: 20px; text-decoration: none; } a:hover { color: #FFC51B; text-decoration: underline; } a:active { color: #4480d5; } a:visited { color: #FF9B21; text-decoration: none; } #banner li{ float:left; margin-top: -0.6em; list-style-type: none; } #banner a{ text-decoration: none; display: block; float: left; text-indent: -5000px; } #banner #home { background-image: url(navbut/home.png); background-repeat: no-repeat; background-position: 0 0; width: 75px; height: 95px; margin-left: -3.35em; } #banner #home:hover { background-position: 0 -95px; } #banner #about { background-image: url(navbut/aboutus.png); background-repeat: no-repeat; background-position: 0 0; width: 75px; height: 95px; } #banner #about:hover { background-position: 0 -95px; } #banner #portfolio { background-image: url(navbut/portfolio.png); background-repeat: no-repeat; background-position: 0 0; width: 75px; height: 95px; } #banner #portfolio:hover { background-position: 0 -95px; } #banner #services { background-image: url(navbut/services.png); background-repeat: no-repeat; background-position: 0 0; width: 75px; height: 95px; } #banner #services:hover { background-position: 0 -95px; } #banner #news { background-image: url(navbut/news.png); background-repeat: no-repeat; background-position: 0 0; width: 75px; height: 95px; } #banner #news:hover { background-position: 0 -95px; } #banner #contact { background-image: url(navbut/contact.png); background-repeat: no-repeat; background-position: 0 0; width: 75px; height: 95px; } #banner #contact:hover { background-position: 0 -95px; } free happy thoughts from me for whoever can help me out! I am currently trying to figure out how to make a webpage with a navigation bar that consists of rollover images, BUT if the site has CSS and/or images disabled for a visually impaired user, text will appear as links. I have been searching the net, but have had no success in a solution other than not using images. HTML for Navigation Code: <!--NAVIGATION--> <ul> <li id="home"><a href="index.html"></a></li> <li id="students"><a href="students.html"></a></li> <li id="faculty"><a href="faculty.html"></a></li> <li id="facilities"><a href="facilities.html"></a></li> <li id="maps"><a href="maps.html"></a></li> </ul> CSS for first Button Code:
/*--NAVIGATION--*/
ul{
margin: 0;
padding: 0;
list-style: none;
}
li#home{
background-image: url(images/nav_home.png);
width: 205px;
height: 52px;
display: block;
}
li#home a{
background-image: url(images/nav_home.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}
li#home a:hover{
background-image: url(images/nav_home.png);
background-position: 204px 0;
}
Hi, Does anybody know how i can have an image that switches to another image on rollover and also has a link? Thanks I am trying to implement the below code for my own page. The issue for me is I don't know how to get the background image to overlay the link text. Unlike in the example I don't want the text links on top of the image, I would like to be behind. Is this possible? Live demo of example: http://www.tutorio.com/media/css-tutorials/rollover-example.htm Code: <div class="rollover"> <a href="#">Item 1</a> <a href="#">Item 2</a> <a href="#">Item 3</a> <a href="#">Tutorio</a> </div> Code: .rollover a {
display:block;
width: 90px;
padding:10px 10px 10px 7px;
font: bold 13px sans-serif;;
color:#333;
background: url("rollover-image.gif") 0 0 no-repeat;
text-decoration: none;
}
.rollover a:hover {
background-position: 0 -35px;
color: #049;
}
.rollover a:active {
background-position: 0 -70px;
color:#fff;
}
I've tried adding an image between the <a and </a> and tried to change that when hovered. Code: <a href="about.htm"><img src="images/testimage.png" alt="" class="testimage"/></a> Code: a.img.testimage:hover {
background-position: 0 -40px;
}
I am having an issue when trying to implement a rollover situation similar to the way Bing does their main page. I had it working with just CSS before, but now that IE 8 is out, I'm seeing issues. I have a region that on hover/mouseover a box appears. When the box is hover/mouseover, a word box appears. On mouseout of either and their child element's visibility is hidden. I have tried moving this solution over to jquery, but am still seeing issues. The hover display works in IE 8 ONLY when you are on the border of the parent element. Has anyone seen similar issues and/or found a solution? Go to barani design and click on anemometer go to krajeski net baranidesign anemometer html My current code is very simple, My links are text inside div tags which are placed over an image. I assign the div to the style sheet. Upon rollover of the image the style sheet makes the image invisible so that the background image is viable. Hence the rollover effect. What i need is that when the link is the same as the current page being viewed the image behind the text will be the same as the rollover image and upon rollover, nothing will change. So far i have asigned the Div tags an id and created some code to identify when the link is the same as the current page. My problem is that because of my method of rolling over i have no idea how to get my desired result. Any help please? Below are 2 scripts. The first is the code i created to identify when the link is the same as the current page. The second code is my rollover efect script without the first script in it. Code:
body#home a#home,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
background: url(images/02.png) no-repeat;
}
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" />
<style>
.cssnav
{
position: relative;
font-family: BrowalliaUPC;
font-size: 25px;
background: url(images/02.png) no-repeat;
white-space: nowrap;
display: block;
width: 100;
height: 30;
margin: 0;
padding: 0;
}
.cssnav a
{
display: block;
color: #000000;
font-size: 25px;
width: 211px;
height: 44px;
display: block;
float: left;
color: white;
text-decoration: none;
}
.cssnav img
{
width: 100px;
height: 30px;
border: 0
}
* html a:hover
{
visibility:visible
}
.cssnav a:hover img
{
visibility:hidden
}
.cssnav span
{
position: absolute;
left: -1px;
top: -1px;
margin: 0px;
padding: 0px;
cursor: pointer;
width: 100px;
}
</style>
<title>Untitled Document</title>
</head>
<body id="home">
<div class="cssnav">
<a href="http://www.URL.com" id="home"><img src="images/01.png" alt="Alternative text" width="100" height="30" />
<center>
<span>Home</span>
</center></a></div>
</body>
</html>
HI there, I am trying to create a div which will change colour upon rollover, but it is not working. This is my CSS: Code:
.left { float:left;
width:30%;
padding: 4px;
display: block;
background-color:#dc8; }
.left a:hover {
background-color: #CCCCCC;
display: block;}
and this is my HTML Code: <div class="left">Content</div> Any ideas what I have wrong? need help on a background rollover, I have tried for hours now and have been unable to get this to work. I have been working with CSS and have been unable to either change the background when rolling over nor making images visible when rolling over. The site Iam working on is http://www.opticalflare.com and I want it so that when I roll over the birds in the tree that the background switches or the image appears of the man lifting his arm and pointing to text saying what the section is. Best I could get was the opposite. I would get image change rolling over the background but it would go away ontop of the links. Code:
body
{
background-color: #FFFFFF;
background-image: url(/images/bg1.jpg);
background-repeat: no-repeat;
background-position: right bottom;
margin: 0 0 0 0;
}
.cssnav {
background-repeat: no-repeat;
background-position: right bottom;
background-image: url(/images/bg2.jpg);
white-space: nowrap;
visibility:hidden;
display: block;
margin: 0;
padding: 0;
}
.cssnav a {
display: block;
color: #000000;
float: bottom-right;
text-decoration: none;
}
.cssnav img {border: 0; }
.cssnav a:hover img{visibility:visible}
</style>
<!-- The links in the birds and letter -->
<div id="cssnav" style="position:absolute; right:150; bottom:385;">
<a href="/#.html"><img src="/images/link.gif" border="0"></a>
|
|||||||