View Full Version : CSS Horizontal Rollovers?
gorilla1
09-07-2002, 03:02 PM
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"> 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>
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>
hairynugs6382
09-07-2002, 05:03 PM
Post a link to an example of your page please?
gorilla1
09-07-2002, 05:20 PM
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
gorilla1
09-07-2002, 05:28 PM
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>
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>
gorilla1
09-07-2002, 11:31 PM
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
Sorry Gorilla1 ........ but there is no javascript in my last reply
:confused:
gorilla1
09-08-2002, 03:32 PM
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
hairynugs6382
09-08-2002, 04:26 PM
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!
Only a little bit though.
:o
Is it possible to do without javascript.
even to do a simple mouseover you need this . notation
Hmm................................................
Food for thought
gorilla1
09-09-2002, 03:27 PM
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
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.