CSS - Lost My Hand Icon On Roll Overs! How To Get It Back?
I moved internal css to an external file and then linked the page to that file and lost my hand cursor on links. How do i get it back. Right now the arrow cursor remains when links are rolled over. Can be viewed at.
kopertone.com/newsite/index1.html Also, in fire fox, I want dotted lines under my text links when rolled over, but not image links; how do I remove the dotted lines under my image links? Thanks! Similar TutorialsHello I am a Novice in web design that is trying to make his way. I am build a website for my company and trying to make it compatible with many devices. I have chosen to Use html and css. This is my issue. I have a side bar menu (nav) and I have a div (menuebar) set to 125 by 500px css property's: Height, width, margin top, margin bottom, float:left Then i have another div inside that one use for my LINK or Button. div (menulink) set to 110 x 28px css property's: Height, width,Padding : Left5px, Right 5px top 2px and bottom 2px , Font Ariel. I want this div (menulink) to highlight on a mouse over or hover the entire div like this website has there colorful menu bar. w w w DOT entheosweb DOT com/dreamweaver/default.asp the bar i am talking about starts with teal, green... ect If you notice you can select the text with in that rollover. so when I use a rollover i cant see any option to do that. Now I have learn how to do a " a hover" css with text links but it dose not hightlight the whole div container. I have tried a behavior on the div tag and that works but dose not disappear on mouse out. I have tried many combinations of multiple behaviors and single combinations with all the option with in them. No such luck.... I will thank any one advance who can help me with this. Ps i don't want to use rollovers because of how big the web site is even with PS actions set up to speed up the process of editing each roll over img. Hi I have been busy for a while with this one, but I am lost here. This is what I would have to accomplish. A footer divided in three parts, left - middle - right Left part has a few icons acting as buttons, have this working! Size is static at 50px width and needed height is 23px Middle part will have a horizontal list of links centered at the middle of the window, depending of the page#.html there could be 5 till 8 links be there. Those links are two or three words width. The right part contains two input fields, also working. width 110 px. Small!? yes but both need only to contain three and five characters. Also working, except that Firefox does a little strange with the field height. But that could be me ( of course its me ), and is for later. My main problem is to get the middle part always between the left and the right part, but at the same time the content centered from the window, and when the window get smaller that the two or three words of the links are wrapping down, and not that the most right link wraps under most left link. Also that the complete footer will grow in height as necessarily. I hope that I am clear with what I try. I did search and try but then again, I am lost. Also I did have golive 1.something and did buy golive CS. It looks like that the preview is garbage, you can't trust it. None of the browsers shows what golive shows. I have more complaints, but would like to know how other people feels about this app. Any way here is what I got so far. Code: ; <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>untitled 2</title> <style type="text/css" media="screen"> <!-- .colleft { background-color: green; vertical-align: middle; position: fixed; left: 0; bottom: 0; width: 50px; height: inherit; z-index: 2; margin-right: auto; margin-bottom: inherit; margin-left: 0; padding: inherit; } .colmid{ background-color: orange; vertical-align: middle; position: fixed; left: 50px; right: 110px; bottom: 0; z-index: 2; margin-bottom: inherit; margin-left: auto; padding: inherit; } .colright { background-color: fuchsia; vertical-align: bottom; position: fixed; right: 0; bottom: 0; width: 110px; height: inherit; z-index: 2; margin-right: 0; margin-bottom: 0; padding-right: 3px; padding-left: 3px; } .footer { font-size: 12px; line-height: 95%; vertical-align: middle; position: fixed; left: 0; bottom: 0; width: 100%; height: 23px; z-index: 2; max-height: 40px; padding-right: 3px; padding-left: 3px; border-top: 3px ridge orange; display: block; } .form { font-size: 11px; background-color: blue; position: fixed; right: 0; bottom: 0; width: 110px; height: 24px; z-index: 3; margin-bottom: 0; padding-right: 5px; padding-bottom: 0; border-color: yellow; } .inputFld { font-size: 10px; background-color: yellow; position: fixed; right: 22px; bottom: 2px; width: 60px; height: 17px; z-index: 3; min-height: 18px; max-height: 16px; } a { color: blue; font-size: 11px; font-weight: bold; line-height: 95%; text-align: center; width: auto; height: auto; z-index: 3; margin-top: auto; margin-bottom: auto; padding-right: 4px; padding-left: 4px; border: solid 1px olive; display: inline-table; } table.main { position: relative; left: 0; right: 110px; bottom: 0; width: auto; height: 23px; z-index: 3; min-height: inherit; max-height: inherit; margin-right: auto; margin-left: auto; padding-right: 0; padding-left: 0; border: dashed 1px black; border-collapse: separate; border-spacing: 2px; } tbody#tBody { width: auto; height: 23px; overflow:auto; border: dotted 1px blue; } #tBody td { text-align: center; vertical-align: top; width: auto; height: auto; min-height: 23px; max-height: 40px; border: solid 1px red; } --></style> </head> <body> <div class="footer"> <div class="colleft"> <span class="threecol1">x1 x2 x3</span> </div> <div class="colmid"> <table class="main" cellspacing="0" cellpadding="0" > <tbody id="tBody"> <tr> <td> <a href="http://forums.devshed.com/" style="margin-left: 4px; margin-right: 4px; "> forums com</a></td> <td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a></td> <td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">devshed com</a></td> <td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a></td> <td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a></td> <td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a></td> </tr></tbody> </table> </div> <div class="colright"> <a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a> <form class="form" action="(EmptyReference!)" method="get" name="FormName"> <input class="inputFld" type="text" name="textfieldName" value="peek" size="4"> </form> </div> </div> </body> </html> I have used some colors to show, myself where I am, so forgive me that, please. I think that the picture of the code will tell what I would like to create. BTW, My main goal was to use no table code and only f.e lists, but came and the same end. Hope that someone can help me. Thank you i want to be able to have a site that has a table with some info, and a button next to it.. when the button is clicked on, a CSS pop-over opens and allows the person to type text, and submit... i can deal with the submit and php and such... i just need to know how to make the DHTML/CSS work for me. 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. How do I create roll over tab menu bar in CSS? I keep looking up ways to do this, but I find only ways to download it from a website (which I fear may have a virus) or in dreamweaver (which I don't have). Also if it's not too much to ask please connect the tabs as well. I have spent 2 full days trying to figure this out. The last thing is I would like to have it centered. If anyone can show me how it is done I would be very thankful. Hey there I like making websites and for this one website i want to make it look really good and then buy a domain name when I'm done, but I can't figure the code in css to make an image appear at 500px down and 50px to the left when my mouse is over a link . If someone could help me with this I would be so happy! Thank you and have a nice day I been looking at a tutorial about roll over but I'm having a slight problem. I made the image I want to change but it aint working, can anyone please help me. the code i have so far is: CSS: Code: ul#link1 li a { background-position: 0 0; } ul#link1 li a:hover { background-position: 0 -28px; /* the second number should be the negative height of the link. */ } #link1 { background-image: url(images/nav_home.gif); } HTML: Code: <li class="link1"><a href="index.php">link1</a></li> The image: pls refer to: http://www.myshops.com.sg/atomio/ http://www.myshops.com.sg/atomio/screen.css Spent all night trying to solve two problems. 1. When mouse over the second image, the weird spacing disappeared. It doesn't happen for the first or third image, although I just duplicate the DIV code. 2. Height:100% for the side color boxes doesn't seen to be working after a certain length? Thanks. I am following a tutorial on the book "Stylin with css" by Charles Wike Smith, and in one of the excercises he walks you through the creation of roll over menus. Im almost at the last stage of the tutorial and it works fine on FireFox, but unfortunately I do not what im doing wrong because the fixes for IE are not working properly, I already went through the tutorial and I cant find what Im doing wrong. Any help will be appreciatted, thanks. Here is my excercise, it works on firefox but not on IE: http://www.aplistia.com/unitedTours/test.htm Hi 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? 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. 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; } 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? 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 how can i change the icon that is displayed at the top of the browser(by default the broswer logo) and the icon that is displayed next to pages in favourites, so that my logo shows up there? thanks Hi there everyone. I just wanted know how I could put an icon on the address (URL) bar for my webpage like this devshed site? Thanks a lot. Vinh 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 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. I am wanting to move the icons underneath the banner centered horizontally. Myself, and a buddy of mine have tried for nearly three hours and still can't get it to work. Can someone look at the code, and the site and see what's going on please?? Thanks. Site: garou-motw.com Code: #kwick { width : 100%; align: center; } #kwick .kwicks { background : transparent; display : block; height : 70px; margin : 0; padding : 0; } #kwick li { float: left; margin : 0; padding : 0; list-style : none; } #kwick .kwick { display : block; cursor : pointer; overflow : hidden; height : 70px; width : 70px; } #kwick .kwick span { display : none; } #kwick .opt0 { background-color : transparent; outline : none; } #kwick .opt1 { background-color:transparent; outline: none } #kwick .opt2 { background-color:transparent; outline: none } #kwick .opt3 { background-color:transparent; outline: none } #kwick .opt4 { background-color:transparent; outline: none } #kwick .opt5 { background-color:transparent; outline: none } #kwick .opt6 { background-color:transparent; outline: none; } #kwick .opt7 { background-color:transparent; outline: none } #kwick .opt8 { background-color:transparent; outline: none } #kwick .opt9 { background-color:transparent; outline: none } #kwick .opt10 { background-color:transparent; outline: none } #kwick .opt11 { background-color:transparent; outline: none border-right: 0px none; } Thanks for taking the time to read my question. I cannot figure out how to refer to the <img> that I have inside my <a> tag in my menu so that when the user hovers over the menu item, the icon will move. I plan on using margin to make it move, I just can't seem to refer to it correctly so that it does something. Any thoughts would be appreciated. Brad HTML: Code: <div id="NavContainer"> <ul id="mainmenu"> <li id="mainmenu"><a href="grocery.htm">Grocery <img class="menuicon" src="images/shopping_cart_basket_Small.png" /></a></li> <li id="mainmenu"><a href="recipe.htm">Recipe <img class="menuicon" src="images/notes_edit_Small.png" /></a></li> <li id="mainmenu"><a href="messages.htm">Messages <img class="menuicon" src="images/Post-It_Small.png" /></a></li> <li id="mainmenu"><a href="calendar.htm">Calendar <img class="menuicon" src="images/Calendar_Small.png" /></a></li> <li id="mainmenu"><a href="phonebook.htm">Phone Book <img class="menuicon" src="images/cellphone_128_Small.png" /></a></li> <li id="mainmenu"><a href="email.htm">E-mail <img class="menuicon" src="images/mail_Small1.png" /></a></li> <li id="mainmenu"><a href="budget.htm">Budget <img class="menuicon" src="images/PiggyBank_Small.png" /></a></li> </ul> </div> CSS: Code: .menuicon { float: left; margin: 10px 0px 0px 10px; padding: 0px; } img { border-style: none; } #NavContainer ul li { display: inline; list-style-type: none; background-color: #00FF00; height: 115px; padding: 0px; margin: 0px; display: block; float: left; } #mainmenu a { padding: 5px 0px 0px 10px; margin: 0px 0px 0px 10px; height: 105px; width: 186px; background-color: #3333FF; background-image: url(images/Button1.png); background-repeat: no-repeat; background-position: top left; display: block; } #mainmenu a:link, #mainmenu a:visited, #mainmenu a:active { color: #000000; text-decoration: none; } #mainmenu a:hover { text-decoration: none; } /*This does not seem to work*/ #mainmenu a:hover .menuicon { margin-top: 10px; } |