Click to See Complete Forum and Search --> : Mouseover question
Kon_Fused
07-26-2003, 11:40 AM
Im trying to make a menu:
Each section uses the code below
<table width="120" border="1" height="19" bordercolor="#666666">
<tr>
<td bgcolor="#333333" bordercolor="#333333" height="14" width="85">
<div align="left"><font color="#CCCCCC" size="1">>></font><font color="#CCCCCC" onMouseOver="this.bgColor='#666666'" onMouseOut="this.bgColor='#333333'"><a href="http://www.hiphopraps.com">Home</a></font></div>
</td>
<td bgcolor="#333333" bordercolor="#666666" height="14" width="19" name="one">
</td>
</tr>
</table>
I want it so that when the mouse is over the text link the lil square changes color
Plz help
Thanks
Charles
07-26-2003, 11:58 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>
<style type="text/css">
<!--
.divider {display:none}
#menu a {
background-color:#246daa;
color:#fff8dc;
display:block;
font-family:'Copperplate Gothic Light', 'Felix Titling', 'Georgia', serif;
font-size:17px;
font-weight:bold;
margin:1ex;
width:135px;
}
#menu a:link, #menu a:visited {
text-decoration:none;
background-color:#246daa;
color:#fff8dc;
}
#menu a:hover {
text-decoration:none;
background-color:#fff8dc;
color:#8b0000;
}
#menu a:active {
text-decoration:none;
background-color:#00008b;
color:#8b0000;
}
-->
</style>
<div id="menu">
<a href="fee.html">Fee</a>
<span class="divider">|</span>
<a href="fie.html">Fie</a>
<span class="divider">|</span>
<a href="foe.html">Foe</a>
<span class="divider">|</span>
<a href="fum.html">Fum</a>
</div>
Kon_Fused
07-26-2003, 01:41 PM
thats not what im after but thx for the attempt
check the menu at this address www.hiphopraps.com/temp.php
I want when the text is mouseover that the small square lights up..not the entire cell
Appreciate any further help
Charles
07-26-2003, 02:31 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>
<style type="text/css">
<!--
.divider {display:none}
#menu a {
border-right:solid 1em #000;
display:block;
margin:1ex;
width:5em;
}
#menu a:link, #menu a:visited {
text-decoration:none;
}
#menu a:hover {
text-decoration:none;
border-right-color:#aaa;
}
#menu a:active {
text-decoration:none;
border-right-color:#888;
}
-->
</style>
<div id="menu">
<a href="fee.html">Fee</a>
<span class="divider">|</span>
<a href="fie.html">Fie</a>
<span class="divider">|</span>
<a href="foe.html">Foe</a>
<span class="divider">|</span>
<a href="fum.html">Fum</a>
</div>
And note:From the HTML 4.01 Specification:
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
http://www.w3.org/TR/html4/struct/tables.html#h-11.1
Kon_Fused
07-26-2003, 02:37 PM
ur the man...well done Charles
Appreciate that
If i need further assistance i know where to ocme
Pz
Kon_Fused
07-26-2003, 03:07 PM
ok u got the basis of the idea
i suck at this
so u think u could make it a lil better even?
i really want it like the lil menu on http://www.hiphopraps.com/temp
the code u gave makes the menu a lil different
Plz i need this right
Thx
Charles
07-26-2003, 03:14 PM
But that site uses TABLEs for layout and that's very bad. Keeping in mind that you might not be able to duplicate things exactly using proper HTML, what exactly is it about that menu that is eluding you?
Kon_Fused
07-26-2003, 03:19 PM
whys that bad?
and all I want is the square to light up thats all...when the mouse goes over the text
the menu gave me changes the menu completely
Charles
07-26-2003, 03:24 PM
Originally posted by Kon_Fused
whys that bad?See the second part of my second post above.and all I want is the square to light up thats all...when the mouse goes over the textSee the first part of my second post above.the menu gave me changes the menu completely Not my second post.