|
CSS - Help With Css Mouse Over Navigation
Hi all,
I have a very simple question.. my mouseover is ALMOST working properly. However when you mouse over the box colour changes, but the text only changes when you are DIRECTLY over the text. How can I fix this? Check the communities drop down for an example of my problem. Here is my temp site URL: edit: I can't post links yet?!?! PM me for link Thanks! Similar TutorialsHi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! How can I make this using his image??? charmingwp com / exprecious-wordpress-theme/ The demo and download box?? The picture is Quote: /wp-content/themes/expose/images/preview gif The web page that I am having a problem editing is: www dot postalstampssale dot com We are having a problem getting the mouse over effect on the three (3) jpg images in the upper right hand corner. We have added the appropriate CSS mouse over coding just under the <TITLE> are on the top. We have a;sp added the CSS coding at the end of the page. However, we can not figure out how to attach the proper coding to each image. The current coding is: <img src="Images/Canada/Canada_Scott_356_Front.jpg" width="90" height="60" alt="" border="0" align="right"> <img src="Images/Germany/Germany_Scott_65.jpg" width="89" height="62" alt="" border="0" align="right"> <img src="Images/Bermuda/Bermuda_Scott_55.jpg" width="54" height="64" alt="" border="0" align="right"> Can someone please suggest how to modify the above coding. Thank you in advance. I'm trying to get the cells on the left menu to highlight AND become a link on mouse-over. The problem is when I set "a" to display:block; the link text floats to the top of the cell. What I want is: td:hover = link I can click or tr:hover = link I can click without my fancy text alignments going awry. First the CSS then the HTML: body { color: #000000; } body.one { color: #000000; background: #FFFFFF; background-repeat:no-repeat; background-attachment:scroll; background-position:top center; } table.housing { width: 90%; margin: auto; margin-top: 60px; margin-bottom: 200px; border-style: groove; border-width: 0px; border-color: #000000; } td.left { width: 10%; } td.right { width: 90%; } table.mainmenu { margin: 20px 10px 20px 20px; width: 205px; height: 300px; border-spacing: 20px 20px; background-color: rgba(184,183,151,0.5); /*#b8b797; CCCC66; FFFFA0;*/ border-style: groove; border-width: 2px; border-color: #000000; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; float:left; } td.mainmenu { height: 60px; border-style: solid; border-width: 1px 0px 1px 0px; border-color: #000000; font: bold 1.1em Georgia; font-variant: small-caps; background-color: rgba(255,255,255,0.7); /*#FFFFFF; #FFEECC;*/ } /*td.extra { height: 20%; border-style: none; border-color: #FFFFFF; background-color: #F1FFCC; }*/ table.text { width: 100%; margin: 20px 20px 20px 10px; border-spacing: 20px 20px; height: 600px; background-color: rgba(184,183,151,0.5); /*#b8b797;*/ border-style: groove; border-width: 2px; border-color: #000000; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; } td.text { border-style: solid; border-width: 1px 1px 1px 1px; border-color: #000000; background-color: #FFFFFF; /*rgba(255,255,255,0.9);*/ padding: 10px 10px 10px 10px; } a { color: #000000; text-decoration:none; } a:link { color: #000000; } a:visited { color: #000000; } a:hover { color: #000099; background-color: #b8b797;} a:active { color: #000000; } The HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE></TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252"> <META NAME="generator" CONTENT=""> <META NAME="author" CONTENT=""> <META NAME="description" CONTENT=""> <META NAME="keywords" CONTENT=""> <LINK REL="stylesheet" TYPE="text/css" HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/test.css"> </HEAD> <BODY class="one"> <table class="housing" border="0"> <tr> <td class="left" align="left" valign="top"> <table class="mainmenu"> <TR ALIGN="center" VALIGN="middle"> <td class="mainmenu"> <A HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/bcconstruction.htm">Home</A></td> </TR> <TR ALIGN="center" VALIGN="middle"> <td class="mainmenu"> <A HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/Portfolio.htm">Portfolio</A></td> </TR> <TR ALIGN="center" VALIGN="middle"> <td class="mainmenu"> <A HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/Ideas.htm">Ideas And Information</A></td> </TR> <TR ALIGN="center" VALIGN="middle"> <td class="mainmenu"> <A HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/Contact.htm">Contact</A></td> </tr> </table> </td> <td class="right"> <table class="text"> <TR> <TD class="text" align="center" valign="top"> </td> </tr> </table> </td> </table> </BODY> </HTML> I've been using on MouseOver and such for ages, however I've seen other means of detecting and acting on mouseovers/mouseouts and such. I need to learn how to do this using <div> or <td> elements - I'm not prepared to use <ul> and <li>, I don't understand the concept yet. From what I've seen, I should be able to have something along the lines of #button.over {attributes}. I do not know the details, but in effect, the element's CSS attributes would be automatically changed when a mouseover is detected and an 'over' class is supplied. Let me know if you need any further information - otherwise, thanks in advance for any insight you may provide. hellow i want help in a simple code can u tell me how do it code for this . when mouse become over link it will have underline while not over dosen't have. thanks Hey, as always it seems to work normal with FF. But IE starts moving images when you go over it. link: http://www.net-force.com/hotest/a1.html any suggestions how to fix it so it displays properly in IE? thx! Hi Guys, Is there a way to make a DIV invisible in IE but still available for mouse events? I have an arrows image used for navigating a map, I have placed invisible DIV boxes at select places on the arrows image and have various events triggered when these DIV's are clicked, this works fine in FF but in IE (as per usual) if the DIV doesn't have its backgroundColor set then the mouse events don't fire, it is like IE is saying 'the user can't see them therefore they aren't there'. Is there any way around this? P.S I can't use any kind of opacity (as it will effect the map image below the arrow image) and I have to use DIV's, slicing the image or <map> aren't an option for this. Cheers, Chris I'm trying to figure out how to do something that I'm sure is possible in CSS, but I haven't seen an example of it anywhere yet. I would like to create a grid. The boxes in the grid would contain text, and when you mouse-over that box it would change to different text. The idea behind this is that in the top row you would have a problem. Then if you follow the column down from that problem you would see the name of a product, and when you mouseover the name of the product, the text changes from the name of the product to the solution the product offers. Hopefully I didn't convolute that too much. Has anyone seen something like this that might steer me in the right direction? Thanks for taking the time to read my question. When the mouse hovers over a link I would like the background of the link to change color and for a border to show up around the area. here is what I have. It doesn't work. any suggestion? Code:
#menu a:hover {
/*color:#005c00;*/
font-weight: bold;
font-size: 12px;
width: 114;
background-color: green;
border-top: thin white;
border-left: thin white;
border-right: thin black;
border-bottom: thin black;
}
Thanks, Brad Ok, i have this side div thats small. I want to be able to mouse-over (hover) over it or if not that click it. When either action is done, than it will reveal a input field attached to that small tab that was hovered, or clicked. If you need more details or explanation than reply, I cant really explain it but i will try. can some tell me why dis code doesn;t work?
Code:
div.fLeft {float:left; padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom:5px; filter:glow(color=red);}
div.fLeft:active {
color: #000066; filter:glow(color=blue)
}
i made a nice pop up div with object details. when i control scroll and resize the browser contents everything follows except this pop up div. so the content inside explodes or shrinks where the actual div height and width stay the same. what have you guys done to fix this? thanks Hi there, I have not done any html/CSS in a LONG time and have just got back into it. I am having some problems with a drop down, where, when the sub menu is hovered over, it will not go away again until the mouse is moved either up above the menu bar or off the browser page. I would like the sub menu to be hidden when the mouse is off the sub menu item. An example is here (oops, I can't post a URL) 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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-image: url(images/carpet.gif);
width:100%;
margin: 0px;
}
#wrapper {
position: relative;
margin: auto;
width:840px;
top: 20px;
height: 920px;
}
#index3-03_ {
position:absolute;
left:5px;
top:45px;
width:840px;
height:263px;
background-image: url(images/thinslice.png);
background-repeat: no-repeat;
z-index: 2;
background-position: -66px -142px;
}
#navbar {
position: absolute;
top: 31px;
right: 0px;
margin: 0;
padding: 0;
width: 780px;
left: 38px;
height: 37px;
}
#navbar li {
list-style: none;
float: left;
padding-left: 20px;
font-size: 14px;
}
#navbar li a {
display: block;
text-decoration: none;
list-style-type: none;
list-style: unordered;
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 5px;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
text-decoration: none;
color: #363795;
text-align: center;
}
#navbar li a:hover {
color: #B00D46;
}
#navbar li ul {
display: none; }
#navbar li:hover ul, #navbar li.hover ul {
position:absolute;
display: block;
left:-42px;
top:-1px;
width:840px;
margin: 0;
background-repeat: no-repeat;
float: left;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0px;
z-index: 5;
clear: none;
background-image: url(images/fatslice.png);
background-position: -62px -281px;
height: 500px;
}
#navbar li:hover li, #navbar li.hover li {
float: left;
padding-left: 25px;
padding-bottom: 25px;
}
#navbar li:hover li a, #navbar li.hover li a {
color: #363795;
position: relative;
left: 125px;
top: 25px;
}
#navbar li li a:hover {
color: #B00D46;
text-align: left;
position: relative;
left: 125px;
top: 25px;
}
#foobar1 {
position: absolute;
left: 62px;
top: 1px;
clear: both;
}
#foobar2 {
position: absolute;
left: 149px;
top: 1px;
clear: both;
}
#foobar3 {
position: absolute;
left: 32px;
top: 1px;
clear: both;
}
-->
</style>
<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<div id="index3-03_">
<ul id="navbar"><li><a href="index.html" target="_self">HOME</a></li>
<li><a href="usage.html" target="_self">THIS IS BROKEN</a>
<ul>
<span id="foobar1"><a href="index.html" target="_self">HOME</a></span>
<span id="foobar2"><a href="usage.html" target="_self">THIS IS BROKEN</a></span>
<span id="foobar3"><a href="faq.html" target="_self">FAQ's</a></span>
<li><a href="parents.html" target="_self">PARENTS</a></li>
</ul>
</li>
<li> <a href="faq.html" target="_self">FAQ's</a></li>
</ul>
</div>
</body>
</html>
any help would be much appreciated Is it possible to have a CSS popup (a:hover) be positioned with regard to the mouse pointer position similar to a tooltip? i wanted to get the hover to cover the entire box around the a-link ,but it dosent work . if anyone can see my errors, please help! PHP Code: <div align="center" id="topNav"> <span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/company/index.php">Company</a></span> <span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/services/index.php">Services</a></span> <span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/resellers/index.php">Resellers</a></span> <span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/dedicated_servers/index.php">Servers</a></span> <span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/network/index.php">Network</a></span> <span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/support/index.php">Support</a></span> <span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/billing/index.php">Billing</a></span> </div> and the css PHP Code: #topNav { width: 750; height: 22px; margin-bottom: 1px; } /* Navigation */ .link { text-align: center; background-color: #444444; color: #FFFFFF; font-family: Verdana, Arial, sans-serif; font-size: 10px; list-style: none; width: 25.4px; height: 12px; margin-bottom: 0px; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; padding-right: 15.4px; text-transform: uppercase; } .link2 { text-align: center; background-color: #CC0033; color: #FFFFFF; font-family: Verdana, Arial, sans-serif; font-size: 10px; list-style: none; width: 25.4px; height: 12px; margin-bottom: 0px; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; padding-right: 15.4px; text-transform: uppercase; } .link a { text-align: center; background-color: #444444; color: #FFFFFF; font-family: Verdana, Arial, sans-serif; font-size: 10px; width: 24px; height: 12px; margin-bottom: 0px; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; padding-right: 15.4px; text-transform: uppercase; } a.link:hover{ text-decoration: underline; color: #FFFFFF; background-color: #CC0033; width: 25.4px; height: 12px; margin-bottom: 0px; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; padding-right: 15.4px; text-transform: uppercase; } /* Navigation */ i'm trying to make a site with only css, other than this little problem its working. hi i have a #nav bar which has a drop down on one the <li>'s i have margin-top: 10px; on the ul li ul so theres a gap between the nav and the dropdown when the mouse goes over it, the drop down dissapears...is there a way to stop this? cheers Is it possible to change the mouse cursor to a "hand" when hovering over a <input type="submit" /> ? Thank you I'm a bit baffled on this issue. Please visit this page - www.atrachapter.com Focus on the main image in the body of the page and mouse over the left hand navigation. The image jumps to the left. I have tried looking at all the css to see what is causing this but am baffled. Any help would be apprecaited. Thanks. Tom |
|||||||