Forum Moderators: not2easy
How can I get the white image to stay when it is on the selected page?
css:
<style type="text/css">
#menu {
height: 30px;
margin: 0em 0; padding:0 1em;
}
div.outer {
float: left;
width: 110px; height: 30px;
margin: 0 3px 0 0;
background: url( 'but1.gif' ) 0 -50px no-repeat;
}
div.outer a {
display: block;
margin: 0; padding:0;
width:100%; height:100%;
overflow:hidden;
font: bold 13px/1 Georgia, serif;
color:#990000;
text-decoration: none;
background: url( 'but2.jpg' ) top left no-repeat;
}
div.outer span {
display: block;
margin:0; padding: 13px 0 0 15px;
}
div.outer a:hover
{
display: block;
margin: 0; padding:0;
width:100%; height:100%;
overflow:hidden;
font: bold 13px/1 Georgia, serif;
color:#990000;
text-decoration: bold;
background: url( 'but1.jpg' ) top left no-repeat;
}
div.outer a:active {
color: black;
background: url( 'but1.jpg' ) top left no-repeat;
}
</style>
html:
<td bgcolor=#990000><div id="menu">
<div class="outer"><a href="template.html#"><span>Home</span></a></div>
<div class="outer"><a href="buytickets.html"><span>Buy Tickets</span></a></div>
<div class="outer"><a href="#"><span>Third</span></a></div></div>
</td>
for example, on the FOOTBALL page, you'd have something like this:
<body id="football-page">
<li><a href="blah" id="football">Football</a></li>
<li><a href="blah" id="rugby">Rugby</a></li>
<li><a href="blah" id="swimming">Swimming</a></li>
and in the CSS:
li{
background:red;
}
#football-page li#football{
background:white;
}
think i can probably figure that out now! cheers!
[edited by: Xapti at 10:47 pm (utc) on April 7, 2007]
what i used to do when i had frames, is i changed the navframe to another one with a javascript redirect, called from the top of whatever content page was showing.
but that meant that i needed several different navframe pages, tailored to whatever the content page was. which kind of ruined the whole point of using frames.
you could do it a lot better with php though. do you know php?
The reason I sometimes use Iframe navigation is that I do not alwats have access to SSI. I certainly don't want to re-write 20 pages every time I want to add a link to a navbar either (but that's only one reason).
I'm fine and content with just not using this frivilous feature. Hell, both the the page title, and large header tell you where you are, if you don't notice those... yeah...
...And :visited links show what pages have been visited still, so it's not too bad.
<body id="channelName">In my case, one thing that is diffent on all pages is the function which is set (e.g. index.html?fx=contact). Can one make use of this function somehow in the CSS or will this require JavaScript?
It's not really viable to split all these pages into separate channels and as such giving each page an individual ID in the BODY tag, although that would (easily) solve the problem.
<script>
document.write('<body id="whatever" class="'+fx+'">');
</script>
<noscript>
<body id="whatever">
</noscript>
you'd then use that class in the CSS.
it wouldn't work for people with javascript turned off, though. (they'd just see whatever is in the <noscript> bit.) so i wouldn't fancy using it myself. you'd be better off looking into php.
