|
CSS - Changing Cursor Style To Hand
I have a navigation list over which I want the cursor to change from vertical line to a hand. Has the hand cursor been deprecated? I tried
Code: style.cursor='hand' with both onmouseover and onmousehover. Neither works. Similar TutorialsHi people, I could not find a grabbing hand cursor in css cursor property. Instead I use this "cursor:move;" for a while. A grabbing hand like what GoogleMap do when dragging a certain map. Is that a server side creation? When you go near a link the cursor flickers and then goes back to default, cant get it to show normally for any link. Works on my windows PC but not on my Mac Even tried a{ cursor:pointer; } but the same thing happens... http://pd-scammell.co.uk/site/ Any ideas? Thanks. Is it possible to change the mouse cursor to a "hand" when hovering over a <input type="submit" /> ? Thank you I am looking for a way (preferably using CSS) to make an I-beam or cursor inside a text field to become invisible. This may be achieved by changing its color to match the bgcolor, by making it invisible altogether, or even simply to get it to stop blinking (when the bg color is black). Any help would be appreciated. I need some help. I'm starting out with php and i'm already stressing out. Here's the challenge: I have to make a page that contains 3 radio buttons the radio buttons control which color font you'll like to display on that page the page must reference itself (no outside css stylesheet) I must use the switch function to switch the stylesheet. So far, this is what I have. Can someone help me figure out what I'm doing wrong? Thank you. Dan --------------clipping starts here--------------------- <html> <head> <title></title> <body style="font-family:Arial, Helvetica, sans-serif; color: green;"> </table> <tr> <td> <form name="stylecolor" method=POST" action asgn_2j.php"> Green <input type="radio" name="style" value="a"> Blue <input type="radio" name="style" value="b"> Red <input type="radio" name="style" value="c"> <INPUT TYPE=HIDDEN NAME=stylecolor VALUE=true> <INPUT TYPE=submit NAME="SUBMIT" VALUE="Submit"> $stylecolor=$HTTP_POST_VARS['stylecolor']; switch($stylecolor) { case 'a' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: green;">)' ; case 'b' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: blue;">)' ; case 'c' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: red;">)' ; default: echo 'you didn't choose' ; break; } </form> </td> </tr> </table> </body> </html> I don't know if this is possible but I want to change the background color of some tables programmaticly basically what's happening is I'm ruining some asp.net code which is checking to see if something is approved or not. if it's approved then I want to change the color of the background for one of the HTML tables. if it's not approved then i want to leave it as the default background color. is there a way to do this? Thanks for the help I have a webpage that has a Link tag that links to a style sheet Code: <html> <head> <link rel="stylesheet" type="text/css" href="http://cdn-media.madaboutbrighton.net/css/main-min-v1.4.css" /> </head> <body> Test 0.0.1 </body> </html> However, when viewing the source of this page in IE, Chrome and Firefox the Link tag has transformed into a Style tag which contains a dump of the linked style sheet Code: <html> <head> <style type="text/css" style="display:none">body... whole style sheet content dumped in here...</style> </head> <body> Test 0.0.1 </body> </html> This is a fairly old site, and nothing has changed recently. But when i first published the site the Link tag appeared normally. I have tried passing it a css file with no content or with just one definition in it, but it keeps changing the Link tag into a Style tag. I obviously don't want the css dumped into a Style tag each time as this is very inefficient and bypasses all my caching/expires settings. You can see an example of this here madaboutbrighton.net/test This is not an isolated case and is effecting some but not all sites on my webserver, which were all displaying correctly the last time i checked but now have this problem. Even though all sites have the same settings. I am baffled. All ideas most welcome, or even just let me know if you are having the same problem. Cheers!!! Hi, My CSS has a simple declaration for "A" href tags: Code:
a {
color:#8D603B ;
text-decoration: underline;
font-weight:bold;
}
a:visited {
color:#8D603B ;
font-weight:bold;
}
a:hover {
color:#A97043 ;
font-weight:bold;
}
So, this is used throughout the site. However, I want to specify a different style for the "A" tag if it is within a certain DIV. For example, Code: <div class="whitebox">This <a href='mypage.php'>link</a> displays fine because it is inside a white box.</div> <div class="blackbox">I want this <a href='mypage2.php'>link</a> to be white, since it is inside a black box.</div> The problem is - I can't simply add a "class" to the link tag - i.e. <a href='mypage2.php' class='whitelink'>link</a> - because all this will be remote authored via a CMS. Rather than adding complexity to my CMS - is there a simple CSS declaration to specify that all links within the "blackbox" DIV must be a different style (including the 'hover' effect)? Thanks very much! ok easy one. basically i have a links outside a div and inside a div called footer. how do i do it so that the links inside the footer div dont take the css style of the one outside? i am trying to do: #footer.a:hover { } and tried a:hover#footer but it aint working? edit never mind!!! Hi, First post to what looks like a great forum! OK, little problem and I wonder whether anyone can help. I have a page with three frames, two (top and bottom) on the left and one large delivery frame. At one stage, I want to open an external page in the main frame but change its style sheet to my own one. I know I can do this using my browser's own style sheet capability, but I need to do this for everyone who visits. Its a long story, but there are no copyright problems as I do own the copyright to the other site, I just don't have a programmer to change the dynamically generated webpages at the moment. Many thanks, Rohan hello, Im running a website that uses the hover css style to change the button from a darker colored text to a lighter colored text (two different images) but when I go to the web page and hover over it it disappears, only for a second but its still annoying, and then replaces it with the new image. is there any way to get rid of this brief disappearance? Hi 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! I am a student and we are currently learning to hand-code web sites. While I have a clear understanding of XHTML, I am having a bit of trouble with the CSS. The specific problem I am having has to do with regular text links and image links. I will try to explain so that it is not so confusing. I have seven navigation links where I have a background for each that changes color on hover. I also have 3 images that I need to add a link to, however, the background and hover block is showing behind the image links. I want the user to be able to just click on the image that leads to an external page without seeing the color block from the text links. Here is the css I have: ul { list-style-type:none; margin:0; padding:0; padding-top:6px; padding-bottom:6px; } li { display:inline; } a:link,a:visited { font-weight:bold; color:#FFFFFF; background-color:#6899a1; text-align:center; padding:6px; text-decoration:none; text-transform:uppercase; } a:hover,a:active{ background-color:#7d4f77; } I hope this provides enough information, if not, please do not hesitate to let me know. Any help I can get with this will be much appreciated. I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 Soo , I have an iframe that works in firefox and google chrome but in IE7 and IE8. pastebin . com/m4d794db1 Can somone show me how I can not have the iframe off center Regardless of how hard I try to turn a deaf ear I keep hearing that <table>s are going to be replaced by <div>s. This, I'm having a hard time wrapping my head around. Cascading Style Sheets are now going to define content layout? Isn't that the job of a markup language? Is my definition of style just wrong? Does style equal layout? If that's the case, shouldn't we be storing our content in XML files instead of <div> tags? Server-side scripting is then responsible for pulling content from XML and "style" from CSS. Something like that? I could see that being useful, a CSS for each device the site is being viewed on. Not that the same thing can't be accomplished in (X)HTML. The thing that keeps me up at night (really) is how awful CSS is implemented at the moment. I've tried to write my fair share of CSS drop-down menus to know. All I can dig up is rants about how great <div> tags are... so I figured, be the change you want to be Chris, start your own discussion. So, ah, ya, here it is. What does the future hold? Hi all i am making a site for some family friends they want it to be 1024 i think i have set up the dimensions correctly but i cant find where the extra bar on the side is coming from, I am only a beginner that knows some basics. any help would be appreciated. any ideas? redochreworkshop.com.au css, there is probably alot of redundant code because i used a template Code: body {
padding: 0;
font: 76% Verdana,Tahoma,Arial,sans-serif;
background-color: #211d1e;
background-image: url(images/Background2.gif);
background-repeat: no-repeat;
position: relative;
display: inline-block;
margin-left: 0px;
margin-right: 0px;
background-position: centre centre;
margin-top: 0px;
}
#wrap {
background: #FFFFFF;
color: #ffffff;
border: solid black 2px;
width: 700px;
height: 1100px;
margin-left: 162px;
margin-right: auto;
position: centre centre;
display: inline-block;
}
#header {
clear: both;
margin: 0px 0em 0px 0em;
padding: 0;
height: 0px;
background-color: #FFF;
}
#header h3 {
width: 350px;
margin: 0px 0px 0px 15px;
float: left;
height: 275px;
}
#header p {
width: 500px;
float: right;
text-align: center;
color: #a0a0a0;
margin: 0px 0px 0px 0px;
font-size: 0.8em;
line-height: 1.2em;
height: 35px;}
#avmenu {
clear: left;
float: none;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}
#avmenu ul {
list-style: none;
width: 150px;
margin: 0 0 0 0;
padding: 0;
font-size: 2em;
}
#avmenu li {
margin-bottom: 4px;
}
#avmenu li a {
font-weight: bold;
height: 40px;
text-decoration: none;
color: #fffff1;
display: block;
background: #67522c;
border-left: 1px #846837 solid;
}
#avmenu li a:hover {
background: #67522c;
color: #fffff1;
font-family: Chiller;
}
.announce {
margin: 10px 0 10px 0;
padding: 10px;
width: 130px;
color: #a8a8a8;
background-color: #FFFFFF;
line-height: 1.3em;
}
#extras {
float: right;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
line-height: 1.5em;
height: 400px;
}
#extras p {
margin: 0 0 1.5em 0;
}
#content {
padding: 0 10px 0 10px;
line-height: 1em;
text-align: left;
margin: 0px 160px 20px 160px;
}
#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}
#content img {
padding: 0px;
display:inline;
}
h3 {
font-size: 1.3em;
margin: 0 0 10px 0;
}
a {
text-decoration: none;
color: #b6952a;
}
a:hover {
text-decoration: underline;
color: #b6952a;
}
#footer {
clear: both;
margin: 0 auto;
padding: 40px 0em 0px 0em;
width: 700px;
text-align: center;
color: #808080;
font-size: 0.9em;
height: 20px;
border: none;
}
#footer a {
color: #808080;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
.left {
margin: 0px 7px 0px 5px;
float: left;
}
.right {
margin: 0px 7px 0px 5px;
float: right;
}
.textright {
text-align: right;
}
.center {
text-align: center;
}
.small {
font-size: 0.8em;
}
.bold {
font-weight: bold;
}
.hide {
display: none;
}
I have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! I've a menu bar that's a horizontally displayed list (i.e. set up with the following values: ul{ margin-top:5px; margin-bottom:5px; margin-left:0px; } li.inline { display:inline; padding-left:5px; padding-right:5px; border-left:1px solid #fff; } Contained in the following code: <div id="mainNav"> <UL> <li class="first"><a href="../about/index.html">About</a></li> <li class="inline"><a href="../contact/index.html">Contact</a></li> <li class="inline"><a href="../services/index.html">Services</a></li> <li class="inline"><a href="index.html">Portfolio</a></li> </UL> On IE 6.0 it does as required and there is no padding between the first element (About) and the left hand side of the page. BUT, on Firefox, about 5 characters worth of padding is between the left hand of the page and the first element. Is there a way to get both Firefox and IE to have no padding? Thanks </div> I guess I dont know what this technique is called so it was hard for me to search for an answer. The best example I can give is if you go to Dells website or any other site where you can build a computer and as you scroll down there is that box that always stays in the upper right hand corner that displays the price. Is that possible in CSS? Could somebody give me the name of the technique so I can try looking for mulitple answers or show me how its done? Thanks, Dave |
|||||||