i make this navigation bar i want to change background image& fontcolor when i onMouseOver on it.
<html>
<head>
<title>New committee</title>
<style type=text/css>
.navigation
{
PADDING-LEFT: 10px;
FONT-WEIGHT: bold;
FONT-SIZE: 12pt;
COLOR: #872224;
FONT-FAMILY: Tahoma;
TEXT-DECORATION: none
}
</style>
</head>
<body onload="date();">
<table width=15% border=0 cellpadding=0 cellspacing=0>
<tr>
<td height=30 background=images\bck_menu.gif><a href=http://www.webdeveloper.com/forum/archive/index.php/"conflist.html" class=navigation>Conference</a></td>
</tr>
<tr>
<td height=30 background=images\bck_menu.gif>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"comlist.html" class=navigation>Committee</a></td>
</tr>
<tr>
<td height=30 background=images\bck_menu.gif>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"memblist.html" class=navigation>Member</a></td>
</tr>
<tr>
<td height=30 background=images\bck_menu.gif>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"vollist.html" class=navigation>Volunteer</a></td>
</tr>
<tr>
<td height=30 background=images\bck_menu.gif>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"delegation data.html" class=navigation>Delegation Data</a></td>
</tr>
<tr>
<td height=30 background=images\bck_menu.gif>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"follist.html" class=navigation>Follows</a></td>
</tr>
<tr>
<td height=30 background=images\bck_menu.gif>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"guestlist.html" class=navigation>Guests list</a>
</td>
</tr>
<tr>
<td height=30 background=images\bck_menu.gif>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"medialist.html" class=navigation>Mediamen list</a>
</td>
</tr>
</table>
</body>
</html>why use tables at all in that you can easily do it without tables by just using padding and margin with CSS...
that way the page size would be smaller and you would not have to worry about the tables.
its simple to do,
#navigation { width: 15%; margin: 0; padding: 0; position: relative; }
#navigation a { font-color: #000; background: url(bck_menu.gif); display: block; padding: 10px 5px; margin: 0; }
#navigation a:hover ( font-color: #ccc; background: url(hover_menu.gif) no-repeat; }
of course there would be a little tweaking to your satisfaction, but really tables should not be used for navigation. If you need me to go a little more in depth let me know.
Jplz i need more explainationThe markup is shorter, cleaner, and easier to read without the table stuff:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>New committee</title>
<style type=text/css>
#navigation
{
width: 15%;
list-style: none;
margin: 0;
padding: 0;
FONT-WEIGHT: bold;
FONT-SIZE: 12pt;
COLOR: #872224;
background-color: #ccffcc;
FONT-FAMILY: Tahoma, sans-serif;
}
#navigation li {
margin: 0;
padding: 1px;
}
#navigation li a {
display: block;
margin: 0;
padding: 5px 10px;
background: transparent url("images/bck_menu.gif") repeat;
text-decoration: none;
}
#navigation li a:hover {
background: #ffff99 url("images/differnt_image.gif") repeat;
}
</style>
</head>
<ul id="navigation">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"conflist.html" class=navigation>Conference</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"comlist.html" class=navigation>Committee</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"memblist.html" class=navigation>Member</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"vollist.html" class=navigation>Volunteer</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"delegation data.html" class=navigation>Delegation Data</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"follist.html" class=navigation>Follows</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"guestlist.html" class=navigation>Guests list</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"medialist.html" class=navigation>Mediamen list</a></li>
</ul>
</body>
</html>Thanks NogDog...
I didnt have time to go into depth earlier but you beat me too it...
Jthank u it works wz tables too but i have 2 question :
"display: block;"what does it mean?
and if i use it ass external css it doesn't work.why?thank u it works wz tables too but i have 2 question :
"display: block;"what does it mean?
The element is displayed as a block (like a P or DIV is) instead of as an inline element. See <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop">http://www.w3.org/TR/CSS21/visuren.html#display-prop</a><!-- m --> for more info.
and if i use it ass external css it doesn't work.why?
Should make no difference. Are you sure you're linking to the css file correctly? Is the file formatted correctly? (Validate it at <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m --> .)
<html>
<head>
<title>New committee</title>
<style type=text/css>
.navigation
{
PADDING-LEFT: 10px;
FONT-WEIGHT: bold;
FONT-SIZE: 12pt;
COLOR: #872224;
FONT-FAMILY: Tahoma;
TEXT-DECORATION: none
}
</style>
</head>
<body onload="date();">
<table width=15% border=0 cellpadding=0 cellspacing=0>
<tr>
<td height=30 background=images\bck_menu.gif><a href=http://www.webdeveloper.com/forum/archive/index.php/"conflist.html" class=navigation>Conference</a></td>
</tr>
<tr>
<td height=30 background=images\bck_menu.gif>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"comlist.html" class=navigation>Committee</a></td>
</tr>
<tr>
<td height=30 background=images\bck_menu.gif>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"memblist.html" class=navigation>Member</a></td>
</tr>
<tr>
<td height=30 background=images\bck_menu.gif>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"vollist.html" class=navigation>Volunteer</a></td>
</tr>
<tr>
<td height=30 background=images\bck_menu.gif>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"delegation data.html" class=navigation>Delegation Data</a></td>
</tr>
<tr>
<td height=30 background=images\bck_menu.gif>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"follist.html" class=navigation>Follows</a></td>
</tr>
<tr>
<td height=30 background=images\bck_menu.gif>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"guestlist.html" class=navigation>Guests list</a>
</td>
</tr>
<tr>
<td height=30 background=images\bck_menu.gif>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"medialist.html" class=navigation>Mediamen list</a>
</td>
</tr>
</table>
</body>
</html>why use tables at all in that you can easily do it without tables by just using padding and margin with CSS...
that way the page size would be smaller and you would not have to worry about the tables.
its simple to do,
#navigation { width: 15%; margin: 0; padding: 0; position: relative; }
#navigation a { font-color: #000; background: url(bck_menu.gif); display: block; padding: 10px 5px; margin: 0; }
#navigation a:hover ( font-color: #ccc; background: url(hover_menu.gif) no-repeat; }
of course there would be a little tweaking to your satisfaction, but really tables should not be used for navigation. If you need me to go a little more in depth let me know.
Jplz i need more explainationThe markup is shorter, cleaner, and easier to read without the table stuff:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>New committee</title>
<style type=text/css>
#navigation
{
width: 15%;
list-style: none;
margin: 0;
padding: 0;
FONT-WEIGHT: bold;
FONT-SIZE: 12pt;
COLOR: #872224;
background-color: #ccffcc;
FONT-FAMILY: Tahoma, sans-serif;
}
#navigation li {
margin: 0;
padding: 1px;
}
#navigation li a {
display: block;
margin: 0;
padding: 5px 10px;
background: transparent url("images/bck_menu.gif") repeat;
text-decoration: none;
}
#navigation li a:hover {
background: #ffff99 url("images/differnt_image.gif") repeat;
}
</style>
</head>
<ul id="navigation">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"conflist.html" class=navigation>Conference</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"comlist.html" class=navigation>Committee</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"memblist.html" class=navigation>Member</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"vollist.html" class=navigation>Volunteer</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"delegation data.html" class=navigation>Delegation Data</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"follist.html" class=navigation>Follows</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"guestlist.html" class=navigation>Guests list</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"medialist.html" class=navigation>Mediamen list</a></li>
</ul>
</body>
</html>Thanks NogDog...
I didnt have time to go into depth earlier but you beat me too it...
Jthank u it works wz tables too but i have 2 question :
"display: block;"what does it mean?
and if i use it ass external css it doesn't work.why?thank u it works wz tables too but i have 2 question :
"display: block;"what does it mean?
The element is displayed as a block (like a P or DIV is) instead of as an inline element. See <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop">http://www.w3.org/TR/CSS21/visuren.html#display-prop</a><!-- m --> for more info.
and if i use it ass external css it doesn't work.why?
Should make no difference. Are you sure you're linking to the css file correctly? Is the file formatted correctly? (Validate it at <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m --> .)