Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    553
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Horizontal Rollovers?

    I am trying to create horizontal rollovers using CSS. I want the rollover list of 3 links to appear to the right of a colored band that has a width of 100%. I set up the code below to do this. However, as I have coded it, the link fields have a height equal only to the text size rather than to the full height of the band, creating an ugly effect in the un-rolled-over menu. Is there a way to make these fields the full height of the band? (Obviously, another problem with the way I have coded it is that the separator character gets overlaid by the band color.)

    G

    <style>
    a.navcell {

    font-family: sans-serif;
    font-size: 10pt;
    font-weight: bold;
    font-style: normal;
    text-decoration: underline;
    color: #000000;
    cursor: hand;
    background: #ffffff;
    text-valign: middle;

    }

    a.navcell:hover {
    text-decoration: none;
    background: #003300;
    color: #ffffff;
    cursor: hand;
    }
    .basey {
    FONT-FAMILY: sans-serif;
    FONT-SIZE: 12pt;
    font-weight: bold;
    COLOR: #ffffff;
    BACKGROUND-COLOR: #003300;
    }
    </style>

    <table border="0" cellpadding="0" cellspacing="0" width="100%">

    <tr bgcolor="000000"><td class="basey" height="28" valign="middle">&nbsp;&nbsp;Home</td><td valign="bottom" align="right">
    <a href="xxx.html" class="navcell">&nbsp;first&nbsp;</a> | <a href="yyy.html" class="navcell">&nbsp;second</a></td></tr>
    </table>
    Last edited by gorilla1; 09-07-2002 at 03:55 PM.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    See if this is any good:


    <style>
    a.navcell {

    font-family: sans-serif;
    font-size: 10pt;
    font-weight: bold;
    font-style: normal;
    text-decoration: underline;
    color: #000000;
    cursor: hand;
    background: #ffffff;
    text-valign: middle;

    }

    a.navcell:hover {
    text-decoration: none;
    background: #003300;
    color: #ffffff;
    cursor: hand;
    }
    .basey {
    FONT-FAMILY: sans-serif;
    FONT-SIZE: 12pt;
    font-weight: bold;
    COLOR: #ffffff;
    BACKGROUND-COLOR: #003300;
    }
    </style>

    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr bgcolor="000000">
    <td class="basey" height="28" valign="middle"> Home</td><td valign="bottom" align="right">
    <a href="xxx.html" class="navcell" style="font-size:26"> first </a> | <a href="yyy.html" class="navcell"> second</a></td>
    </tr>
    </table>


    </TABLE>

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    Sacramento, California
    Posts
    132
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Post a link to an example of your page please?
    Hairynugs


    Simple is best.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Posts
    553
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Mr J,

    That perfectly creates the effect I am after. However, the hitch is that I want the smaller font size. Or, in other words, I want the font to occupy only part of the band. However, I suppose what your solution suggests is simply to create a band sized to the font and then place an additional pure color band above and below if desired to create the wider band, if desired. I guess that does work. A question, though - how do you know what font-size matches what band height (and in a reliable way)?? Thanks.

    G

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    553
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hairy,

    I can't post a link to a site, because it is not on a site - it is just something I am testing in a browser. The piece of code is very simple and can easily be loaded in a browser and tried out. Here it is below with the head and body tags.
    G

    <html>
    <head>
    <style>
    a.navcell {

    font-family: sans-serif;
    font-size: 10pt;
    font-weight: bold;
    font-style: normal;
    text-decoration: underline;
    color: #000000;
    cursor: hand;
    background: #ffffff;
    text-valign: middle;

    }

    a.navcell:hover {
    text-decoration: none;
    background: #003300;
    color: #ffffff;
    cursor: hand;
    }
    .basey {
    FONT-FAMILY: sans-serif;
    FONT-SIZE: 12pt;
    font-weight: bold;
    COLOR: #ffffff;
    BACKGROUND-COLOR: #003300;
    }
    </style>
    </head>
    <body>

    <table border="0" cellpadding="0" cellspacing="0" width="100%">

    <tr bgcolor="000000"><td class="basey" height="28" valign="middle"> Home</td><td valign="bottom" align="right">
    <a href="xxx.html" class="navcell"> first </a> | <a href="yyy.html" class="navcell"> second</a></td></tr>
    </table>
    </body>

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Try This



    <style>
    a.navcell {
    font-family: sans-serif;
    font-size: 10pt;
    font-weight: bold;
    font-style: normal;
    text-decoration: underline;
    color: #000000;
    cursor: hand;
    background: #ffffff;
    text-valign: middle;

    }

    z.navcell:hover {
    text-decoration: none;
    background: #003300;
    color: #ffffff;
    cursor: hand;
    }
    .basey {
    FONT-FAMILY: sans-serif;
    FONT-SIZE: 12pt;
    font-weight: bold;
    COLOR: #ffffff;
    BACKGROUND-COLOR: #003300;
    }

    a.navcell2{
    font-family: sans-serif;
    font-size: 10pt;
    font-weight: bold;
    font-style: normal;
    text-decoration: underline;
    color: #FFFFFF;
    cursor: hand;
    background: #00000;
    text-valign: middle;
    }

    </style>


    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr bgcolor="000000">
    <td class="basey" height="28" valign="middle"> Home</td>
    <td valign="bottom" align="center" width="50" bgcolor="white" id="one" >
    <a href="xxx.html" class="navcell" onmouseover="this.className='navcell2';one.bgColor='black'" onmouseout="this.className='navcell';one.bgColor='white'"> first </a></td>
    <td valign="bottom" align="center" width="50" bgcolor="white" id="two"><a href="yyy.html" class="navcell" onmouseover="this.className='navcell2';two.bgColor='black'" onmouseout="this.className='navcell';two.bgColor='white'"> second</a></td>
    </tr>
    </table>



  • #7
    Regular Coder
    Join Date
    Jun 2002
    Posts
    553
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That is very nicely done, Mr. J. Only one thing that I would try to add, and that is a pure CSS approach, without the javascript dependency. I have not come up with it so far this afternoon.
    G

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Sorry Gorilla1 ........ but there is no javascript in my last reply


  • #9
    Regular Coder
    Join Date
    Jun 2002
    Posts
    553
    Thanks
    0
    Thanked 0 Times in 0 Posts
    onmouseover="this.className='navcell2';one.bgColor='black'"
    Is this html or css? When you use onmouseover event handling, you are using javascript, even though there is no script tag. Apart from academic defintions, what I am referring to is dealing with folks who are running with javascript disabled. If I turn off javascript in netscape (and I choose netscape because I cant seem to get javascript disabled in IE5), then the code does not work, unfortunately. It is a very nice soltuion (there, in fact, are a number of ways to go about it using javascript), but it does use javascript.

    G
    Last edited by gorilla1; 09-08-2002 at 03:37 PM.

  • #10
    Regular Coder
    Join Date
    Aug 2002
    Location
    Sacramento, California
    Posts
    132
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i agree with gorrila the java script is not neccesary

    onmouseover="this.className='navcell2';two.bgColor='black'" onmouseout="this.className='navcell';two.bgColor='white'"

    that is still considerd javascript! just as <a href="javascript:void(null)" onclick="window.open('blah.html' 'blahwin'width=blah, height=blah') onmouseover="window.status='blah blah'; return true" onmouseout="window.status='blah blah'; return true">
    all of thoughs are cosidered Javascript!
    Hairynugs


    Simple is best.

  • #11
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Only a little bit though.



    Is it possible to do without javascript.

    even to do a simple mouseover you need this . notation

    Hmm................................................


    Food for thought

  • #12
    Regular Coder
    Join Date
    Jun 2002
    Posts
    553
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, Mr J... By the way, when it comes to a vertical pure CSS rollover menu, a common solution is to use: display: block
    However, I can't think of a way to use display to solve the horizontal rollover menu puzzle.

    G


  •  

    Posting Permissions

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