Results 1 to 15 of 15
  1. #1
    New Lounger
    Join Date
    Jan 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS cell rollover effect

    Hello,

    I am trying to work out how to do a mouse rollover on links on the calender page
    page so that is the same as the navabar (i.e. the whole of the cell changes colour).
    Any help would be appreciaetd if this is possible.

    http://clubamigos.port5.com/jan_calender.htm

  2. #2
    Plutonium Lounger Leif's Avatar
    Join Date
    Dec 2000
    Location
    U.K.
    Posts
    14,010
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS cell rollover effect

    Can't you use the same method as you used for the main nav bar?

  3. #3
    New Lounger
    Join Date
    Jan 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS cell rollover effect

    I tried but cannot get the rollover efect to cover the whole cell it just covers the text and not the whole cell.
    Any ideas what l am doing wrong?

  4. #4
    Plutonium Lounger Leif's Avatar
    Join Date
    Dec 2000
    Location
    U.K.
    Posts
    14,010
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS cell rollover effect

    Not without knowing what you are doing in the first place!
    Have you included (attempted) rollover-code in the page you link to above?

    (I'm unlikely to be able to help further - I was was just endeavouring to ascertain what you had tried.)

  5. #5
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: CSS cell rollover effect

    Ooh it appears you have changed your user name!!!!!

    The reason your navbar changes like it does is because it is in a container and the person who created the css file has used pseudo classes to get the cell to change as follows:

    #navcontainer ul li a:hover {
    color : #000;
    background : #FFCCCC;
    }

    #navcontainer a:active {
    background : #ffecd2;
    color : #fff;

    This means any unnumbered list, list item and when the mouse is hovered over a link the back will change to pink.

    The html points to a class called Calendar-Month which does not appear in the css file. You will have to create that class in the css file and then create a pseudo class similar to the above. I am assuming that css file is a mixture of different authors as the style of the script is slightly different in areas, so call back if you need further help in creating the style.
    Jerry

  6. #6
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: CSS cell rollover effect

    From what I see, there are various reasons:

    1) When putting in a tag pseudoi classes they must be in a specific order: Link, Visited, Hover, Active (known as LoVeHAte) so yours should be:


    #Calendar-Month a:link {
    color : #000;
    background : #FFCCCC;
    }

    #Calendar-Month a:hover {
    color : #000;
    background : #FFCCCC;
    }

    #Calendar-Month a:active {
    color : #000;
    background : #FFCCCC;
    }

    Small point but good t remember for the future

    Secondly, I am looking at this line of code


    <td bgcolor="#FFFFCC"><div align="center"><font color="#0000FF">Jan</font></div></td>

    and should try an experiment by putting in Calendar-Month as its class and see it that does the job as it it is looking at a class called Calendar which again is missing from the css <img src=/S/grin.gif border=0 alt=grin width=15 height=15>
    Jerry

  7. #7
    New Lounger
    Join Date
    Jan 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS cell rollover effect

    Hi,

    I forget my work username.
    The CSS l took from a template site rather than write once from scratch.
    I have modified it to suite , which is why it looks different in places.
    I will tidy it up a little when l valid to w3c standards.
    This the css l am using, for some reason is does not use the new class l created ,. any ideas?

    Very long stylesheet code moved to attachment by HansV
    Attached Files Attached Files

  8. #8
    New Lounger
    Join Date
    Jan 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS cell rollover effect

    I tried this but no luck, the nav bar is now not working:

    see: http://clubamigos.porrt5.com/jan_calender.htm

    <big>Please don't post ridiculously long pieces of code in the body of a post. Put them in an attachment.
    Next time I will just delete it. HansV</big>
    Attached Files Attached Files

  9. #9
    New Lounger
    Join Date
    Jan 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS cell rollover effect

    My apologise .

    I will include as attachment next time.

  10. #10
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: CSS cell rollover effect

    Hi there

    I would love to help but I cannot access your website at present as the link is dead.

    A small point that I have learnt recently when dealing with html and external css files is if I can access to both the files and I can then work with them locally and fix the issue without having to recreate the files with copy and paste. If you could zip up both the offending html file and the css file together in a folder it would help me and you to get this solved easily. A css file is worthless without its corresponding file...thanks <img src=/S/grin.gif border=0 alt=grin width=15 height=15>
    Jerry

  11. #11
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: CSS cell rollover effect

    Hi there,

    As I had a quite 5 minutes before bedtime I checked this out. I have created a new set of classes that mimic your navigation bar exactly except for the widths of each[*] tag which I reduced and have got rid of the table (didn't like it and served no purpose <img src=/S/grin.gif border=0 alt=grin width=15 height=15>)

    I now seem to have a hovering and similar calendar navbar that mimics your primary navbar. You will have to rename the css file if you want and ensure the links to the right calendar pages are set in the html file but that should be an easy undertaking. I have attached it as a zip for you to view.
    Jerry

  12. #12
    5 Star Lounger
    Join Date
    Mar 2004
    Posts
    924
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS cell rollover effect

    see attachment for caldner and faq files which l am having difficulty with.
    Please see my previous post:

    Help with css layout - <post:=551,487>post 551,487</post:> (see below for details of post):

    I would like some css help with the faq and contact pages in the following areas:

    1. I require a horizontal space between the photos.

    2. I would like the dotted line to moved up so that it is centred in the page.

    3. Increase in space between the dotted line and the photo.

    4. On the faq page the text is to near the dotted line.


    Any help would be appreciated as l am new to CSS.

    I have tried to do this but simply cannot work out how to do it.

    http://clubamigos.port5.com

    for the problems l am having.
    Any help would be appreciated.
    Attached Files Attached Files

  13. #13
    5 Star Lounger
    Join Date
    Mar 2004
    Posts
    924
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS cell rollover effect

    Thats great and is esactly how l would like it l would like it.
    A few amendments l would like:

    1. I would like a space between the caldner nav bar and main nav bar, l assume l can use a non breaking space for this.

    2. I would like the the caldner nav bar be the same width as the caldner.

    3. l would like to use the same principle for the main calander nav bar on the links at the bottom of the page.
    (Next , Previous and Calender home page)

    If it is not asking to much would you be able to make these changes for me?
    Any help would be greatly appreciated.

  14. #14
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: CSS cell rollover effect

    Hi there

    I feel I have done quite a lot for you here and you must have a look at what I have done in the css file, I cannot build the whole application for you as I have very limited time. To get the gap in the new calendar nav bar add margin-top: 10px; and that should provide the gap you desire.

    I have also had a go at your problem with the images and have attached a copy of my work for you to review and make changes to your site.
    Jerry

  15. #15
    5 Star Lounger
    Join Date
    Mar 2004
    Posts
    924
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS cell rollover effect

    That is not a problem, thaks for all the help you have give me.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •