|
CSS - Div Bg Rollover Not Working
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? Similar TutorialsI have a site I am building at http://www/sheltercoveinn.com/NEWsite/ Everything works great in firefox, but my menu tabs are supposed to go to 70% opacity on rollover, and they don't work in IE. ANy help? Hi everyone, I just worked for two days to make my menu work on IE6. Now it works perfectly on IE6, but ironically it doesn't work on IE7 anymore. Basically, I have a two line menu bar. Each line consists of 9 squares, some are images that are links and some are just decoration images. Each line ("menu1" and "menu2") is an unordered list, with a background image of one of the menus. When one of the link squares is hovered, I want just this square to show a different place on the bottom of the background image. So what doesn't work? Only IE7 doesn't recognizes the link squares as links. No hover, No link. I can't navigate anywhere in IE7... Please help me...!! I've attached the relevant code, added comments and colored the parts that I think might cause the problem. html: Code: <div id="globalnav">
<ul id="menu1">
<li id="nav_home"><a href="../home/" title="Home">home</a></li>
<li id="nav_about"><a href="../about/main.htm" title="About us">about us</a></li>
<li id="nav_recruit"><a href="../recruit/" title="Recruit">recruit</a></li>
</ul>
<ul id="menu2">
<li id="nav_company" name="nav_company"><a href="../company/outline.htm" title="Company">company</a></li>
<li id="nav_clients" name="nav_clients"><a href="../clients/clients.htm" title="Clients">clients</a></li>
<li id="nav_contacts" name="nav_contacts"><a href="../contacts/" title="Contacts">recruit</a></li>
</ul>
</div>
css: Code: @charset "utf-8";
/* English Menu bar */
/* Box for the entire menu (two rows of ul) */
#globalnav {
height: 130px;
width: 675px;
}
/* Create box and put background image for each menu line */
#globalnav ul#menu1 {
height: 62px;
width: 675px;
background: transparent url(../images/menu1.jpg) top left no-repeat;
padding: 0;
position: relative;
margin: 0 0 5px 0;
}
#globalnav ul#menu2 {
height: 62px;
width: 675px;
background: transparent url(../images/menu2.jpg) top left no-repeat;
margin: 0;
padding: 0;
position: relative;
}
/* Boxes for each link square on the menu */
#globalnav li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
width: 75;
}
#globalnav li, #globalnav a {
height: 62;
display: block;
}
#globalnav a {
line-height: 62px;
text-decoration: none;
text-indent: -9999px;
display: block;
}
/* Define the area on the background image of the ul which coressponds to each link box */
#nav_home {left: 0; width: 75px;}
#nav_about {left: 225px; width: 75px;}
#nav_recruit {left: 525px; width: 75px;}
#nav_company {left: 150px; width: 75px;}
#nav_clients {left: 375px; width: 75px;}
#nav_contacts {left: 600px; width: 75px;}
/* Maybe the next part is unnecessary... */
#nav_home {background: transparent url(../images/menu1.jpg) 0 0 no-repeat;}
#nav_about {background: transparent url(../images/menu1.jpg) -225px 0 no-repeat;}
#nav_recruit {background: transparent url(../images/menu1.jpg) -525px 0 no-repeat;}
#nav_company {background: transparent url(../images/menu2.jpg) -150px 0 no-repeat;}
#nav_clients {background: transparent url(../images/menu2.jpg) -375px 0 no-repeat;}
#nav_contacts {background: transparent url(../images/menu2.jpg) -600px 0 no-repeat;}
/* Hovered menu items */
/* the background image in the link box should change to a diffetent part on the big image, which isn't normally shown - doesn't work in IE7 */
#nav_home a:hover {background: transparent url(../images/menu1.jpg) 0 -62px no-repeat;}
#nav_about a:hover {background: transparent url(../images/menu1.jpg) -225px -62px no-repeat;}
#nav_recruit a:hover {background: transparent url(../images/menu1.jpg) -525px -62px no-repeat;}
#nav_company a:hover {background: transparent url(../images/menu2.jpg) -150px -62px no-repeat;}
#nav_clients a:hover {background: transparent url(../images/menu2.jpg) -375px -62px no-repeat;}
#nav_contacts a:hover {background: transparent url(../images/menu2.jpg) -600px -62px no-repeat;}
/* Active menu items */
/* This part just makes the page we are currently in appear as hovered - works fine in all browsers */
body#home #nav_home {background: transparent url(../images/menu1.jpg) 0 -62px no-repeat;}
body#about #nav_about {background: transparent url(../images/menu1.jpg) -225px -62px no-repeat;}
body#recruit #nav_recruit {background: transparent url(../images/menu1.jpg) -525px -62px no-repeat;}
body#company #nav_company {background: transparent url(../images/menu2.jpg) -150px -62px no-repeat;}
body#clients #nav_clients {background: transparent url(../images/menu2.jpg) -375px -62px no-repeat;}
body#contacts #nav_contacts {background: transparent url(../images/menu2.jpg) -600px -62px no-repeat;}
By the way - before changing it, I had all the squares in a table. Worked on IE7, but not IE6. Oh and I'm using transitional DTD. is that ok? Disregard pot I simply transposed li and a tag thanks anyway... Hi, 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? 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 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. 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. :/ 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. 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? OK, I've gotten this to work a hundred times before, but today I am stumped. Basically, I am trying to create an image rollover with CSS. here is my CSS: Code: a.footer_box3{
width:222px;
height:169px;
background-image:url('images/footer/footer_test/footer_box3_off.png') no-repeat;
border:none;
display:block;
}
a.footer_box3:hover{
width:222px;
height:169px;
background-image:url('images/footer/footer_test/footer_box3_on.png') no-repeat;
border:none;
display:block;
}
the above CSS is in the header of the document. Here's the code for the rollover in the page: Code: <td background="images/footer/footer_test/footer_box3_off.png" width="222" height="169"> <a href="our_people.asp" class="footer_box3"></a> </td> You can see the site here Scroll down to the bottom of the page where there are 4 footer boxes. I am only trying to get the third box to swap images on hover. can anyone see what I am doing wrong? thanks 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 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 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>
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;
}
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;
}
|
|||||||