An easy one for all the HTML and CSS gurus out there, but up until today I wasn't even aware you could change the cursor on an HTML page using CSS.
So earlier on, I have a number of DIVs that are in effect some large buttons which I have added some hover code to show highlighting etc, which of course led me to ideally need to change the cursor so the user knows clicking will be applicable. All you need is to set the cursor style to pointer - in the case a hand for links e.g
.mylink {cursor:pointer}
Now of course there are a load of other cursor values - auto, crosshair, default, e-resize, help, move, n-resize, ne-resize, nw-resize, pointer, s-resize, se-resize, sw-resize, text, wait, w-resize. Which most are fairly self explanatary I think but at least you can change them now!
Finally, and I havn't tried this but you can even go so far as providing yor own cursors! You do this specifying a url in the CSS cursor:url('path to cursor'). I haven't tried this, and may not need to, but if I do I will add new a post!!
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
Tuesday, 18 August 2009
How do you get an image to appear in an DIV, paths?
This is a silly one. I have used without a problem the CSS background-image: statement including backgrounds for DIVs, until today that is....
I have an html document in the root folder, along with two sub folders: a resorces folder for my stylesheet style.css and an images folder for all the images. Before the lightbulb switched on I referenced my images as background-image:url('images/image_name.jpg') BUT to my frustration for a good half an hour was the images did not appear - now I was trying to use a background for a DIV but it could have been any images.
The light bulb moment - I feel daft for admitting to the problem but I have seen it before and still did not remember... so the issue is simply this - the path used is relative to the stylesheet loaded and NOT the HTML document as I imagined. So, I originally used '/images/imagename.jpg' which is relative to the html, and what I needed for it to work was actually a path like '../images/imagename.jpg' which is because the stylesheet is in a resources folder, so the path needs to be a parent folder above before navigating to the images folder.
Like I said a real simple one to solve, but when I was convinced in my mind the path should be relative to the root folder it took quite a bit of head bashing to get it fixed!
I have an html document in the root folder, along with two sub folders: a resorces folder for my stylesheet style.css and an images folder for all the images. Before the lightbulb switched on I referenced my images as background-image:url('images/image_name.jpg') BUT to my frustration for a good half an hour was the images did not appear - now I was trying to use a background for a DIV but it could have been any images.
The light bulb moment - I feel daft for admitting to the problem but I have seen it before and still did not remember... so the issue is simply this - the path used is relative to the stylesheet loaded and NOT the HTML document as I imagined. So, I originally used '/images/imagename.jpg' which is relative to the html, and what I needed for it to work was actually a path like '../images/imagename.jpg' which is because the stylesheet is in a resources folder, so the path needs to be a parent folder above before navigating to the images folder.
Like I said a real simple one to solve, but when I was convinced in my mind the path should be relative to the root folder it took quite a bit of head bashing to get it fixed!
Subscribe to:
Posts (Atom)