CSS - Highlight A Current Page

Hey all,
I have a webpage w/a top, left column, and content column. The page has been designed using CSS. Is there anyway to load a seperate HTML page (of which I have no control) in my content column and keep the top (and possibly left) columns in place? Is there a way to do this w/CSS? (Basically I want frame functionality using CSS).

So far my instincts say no... but before I spend too much time on solution I thought I'd check here.

Thanks!
BB

I'm not sure if we are allowed to post urls here or not, didn't see anything against it but I'm sure someone will inform me if we can or can't.

Anyways I'm having problems getting the "current" class to work for the active page. I want the current page to use the rollover id.

This is a code snippet that should be enough to figure out how I am doing my navigation. I am using a single image and shifting it depending on the state it's in.


CSS Code:
Original - CSS Code .nav1 {float:left; position:relative;display:block;} .nav1 li {margin:0px; padding:0px; display:inline;} .nav1 li a {height:30px; float:left; list-style:none;} a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/ #home a{ float:left; background-image: url(images/nav_main_1.png); display: block; height: 30px; width: 132px; text-decoration: none; background-position: 0px -31px; } } #home a:hover, a.current{ background-image: url(images/nav_main_1.png); background-position: 0px 0px; } #news a{ float:left; background-image: url(images/nav_main_2.png); display: block; height: 30px; width: 131px; text-decoration: none; background-position: 0px -31px; } #news a:hover, a.current { background-image: url(images/nav_main_2.png); background-position: 0px 0px; }

  

 .nav1 {float:left; position:relative;display:block;}


 .nav1 li {margin:0px; padding:0px; display:inline;}


 .nav1 li a {height:30px; float:left; list-style:none;}


 a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/


  


 #home a{


     float:left;


     background-image: url(images/nav_main_1.png);


     display: block;


     height: 30px;


     width: 132px;


     text-decoration: none;


     background-position: 0px -31px;


 }


  


 }


 #home a:hover, a.current{


     background-image: url(images/nav_main_1.png);


     background-position: 0px 0px;


 }


 #news a{


     float:left;


     background-image: url(images/nav_main_2.png);


     display: block;


     height: 30px;


     width: 131px;


     text-decoration: none;


     background-position: 0px -31px;


 }


 #news a:hover, a.current {  


     background-image: url(images/nav_main_2.png);


     background-position: 0px 0px;


 } 

html4strict Code:
Original - html4strict Code <ul class="nav1"> <li id="home" class="current"><a href="#"><span>Home</span></a></li> <li id="news"><a href="#"><span>News</span></a></li> </ul>

  

 <ul class="nav1">


         <li id="home" class="current"><a href="#"><span>Home</span></a></li>


         <li id="news"><a href="#"><span>News</span></a></li>                    


 </ul> 

Any help is greatly appreciated, I would imagine I am missing something simple.

I have this:
Code:

img.decor{
	text-decoration:none;
	border:#CCCCCC thin solid;
	padding: 4px;
} 

My HTML:
Code:

<a href="google.com"><img class="decor" src="images/birds.jpg" /></a>

when I hover over the image "decor" in my CSS, I would like the whole image to turn grey. I tried this:
Code:

img.decor a:hover{background-color:#CCCCCC;}

but it doesn't work. Any ideas??
I just start learning CSS. thanks

Hi folks. Long time lurker, first time poster.

I've got some navigational menus that look great and work well in Firefox and Opera, but there are some odd issues in Internet Explorer. (I'm currently testing with IE7, but am fairly certain the same problems occur on IE6.)

Interesting. The system won't let me put the URL in my post as I'm a new user, but this works...

The URL for my test page is at a machine named www in the domain bobramstad.com and has the filename menu.html

Just run that all together and you'll find the page OK. I'd cut and paste it here but I use a lot of whitespace and the file is kind of long, easier to hit the URL and view source it.

For some unknown reason, under IE7, when I highlight any of the entries on the left which have submenus, the formatting of the main entry jumps around. It's odd.

I have my own theories as to why this is happening, but frankly, none of them have panned out, or at least, I'm not sophisticated enough to hit on the right solution.

FWIW, the current version of our home page uses an older mix of javascript and CSS which is not compatible with Safari or Opera and is also a bit clunky. Strangely, however, it looks fine in Firefox and IE, which might provide some clues as to what I'm doing wrong.

I've been looking at this literally for three weeks, on and off, and have made some strides... the last problem is main menu jumping around when hover occurs...

Any and all help gratefully received!

-- Bob

how can I highlight the link which I am currently viewing?

I'm using external style sheets on a couple of sites, and have the following problem:

When I click and drag down over the text, to copy & paste it into an email or whatever, all the text on that page is automatically highlighted .... I can't control the drag / selection, it's all or nothing.

When I click and drag upwards, nothing happens at all ... it won't work.

Any way to solve this? I don't get this problem with internal style sheets.

Andy

My problem is getting very frustrating been trying to fix it for ages, and its probably something simple but if i dont fix it soon my laptops going to find a river very quickly.
I have a site using CSS(duh!) and when i highlight over a link on the site some of my text moves around. then when i highlight over my javascript drop down menu it moves back. its very strange.
heres the link to one of the worse pages for jumping. http://zephyr-wgtn.co.nz/newsite/eventS.aspx
Any help much appreciated.
Regards
Dan

How do you get the input text areas and selections to highlight or glow once active? For examples, visit Zappos.com or Amazon.com - when you click in the text fields to login it sort of glows.

ok, so after i click a link it goes to the css visited link.

.menu_1a a:link {color:#666666; text-decoration: none;}
.menu_1a a:hover {Background: #666666; color:white;}
.menu_1a a:visited {color:#666666; text-decoratoin: none;}

is my code. after i have clicked a link and i hover over the link again the background color is #666666 and the color is #6666666. i need the visited link to have the same exact thing as the original link

any ideas?
-kevin

Hey, y'all, can you help me out here?

Well, first, here's an example I'd like to accomplish at http://www.sparkplug.com/

I'd like to type the text OVER or ON an image but it's not part of the image so you can highlight it.

I found some examples from Google using layers, however, these layers are positioned differently using different browsers. I tested using Firefox, IE 6 and Safari.

I'm pretty sure that a 'professional' website like sparkplug does not use an amateur-ish technique as layers. :S.

P.S Don't suggest me to include the text IN the image, lol, that's not what I would like.

-Respect & thanks!

Hi guys,

just want to ask for help and if this is possible?

I have a textlink inside of a row ,and I want to highlight the row color when mouseovers on that row or textlink.
(maybe row color white will change to gray.)

pls help.

thanks in advance

Here's the problem: aparently Opera places an inverse color highlight on links that receive the keyboard focus (see Javascript Development: How do I hide focus on Opera?), and I'd like to hide it. CSS3 property Code:

outline-style

is useless here, and I've also tried setting the JScript Code:

hideFocus

property, but aparently this only works on IE. In fact, I've tried everything I can think of except blurring the link, which would completely defeat my purpose. I tried Javascript Development and got nothing, so maybe the answer is not Javascript. Is there possibly some proprietary CSS extension in Opera that would hide the highlight? If so, what is it and how do I use it?

Hello,

I can't seem to figure out how to make my CSS drop down menu work the way I want it to. I am using an id in the body tag and a class in the navigatin links so the style sheet will mark what section of the site you are in by making the background change color. This works.

The problem is, now that I have the sections being marked, the highlight no longer works. How can I get the highlight to work in the section you are in? I have been experimenting for hours but I can't make it work.

http://www.tpxdesign.com/test/Valliant/alpha/index7.php

My nav menu code and nav style sheet:

Code:

<!--[if !IE]><!-- start nav --><![endif]-->
<div id="side_nav_bar" class="floater">
<div id="nav_menu">
<ul id="nav"> 
  <li><a href="demoreel.php" class="port">Portfolio</a> 
    <ul>
      <li><a href="demoreel.php" class="port">Demo Reel/s</a></li>
      <li><a href="shorts.php" class="port">Shorts</a></li>
	  <li><a href="musicvid.php" class="port">Music Video</a></li>
	  <li><a href="comvid.php" class="port">Commercial</a></li>
	  <li><a href="miscvid.php" class="port">Misc. Video/Film</a></li>
	  <li><a href="gallery.php" class="port">Photo. Gallery</a></li>
    </ul>
  </li> 
  <li><a href="services.php" class="serv">Services</a> 
  </li> 
  <li><a href="newupdate.php" class="newe">News & Events</a> 
    <ul>
      <li><a href="newupdate.php" class="newe">News/Updates</a></li>
      <li><a href="eventblog.php" class="newe">Event Calendar</a></li>
    </ul>
  </li>
  <li><a href="bio.php" class="about">About Valliant</a>
    <ul>
      <li><a href="resume.php" class="about">Resume</a></li>
      <li><a href="bio.php" class="about">Biography</a></li>
	  <li><a href="contact.php" class="about">Contact</a></li>
    </ul>
  </li> 
  <li><a href="links.php" class="link">Links</a></li>
  <li><a href="index7.php" class="home">Home</a></li>
</ul> 
</div> 
</div>
<!--[if !IE]><!-- end nav --><![endif]-->

Code:

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 199px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 198px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
		
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
li:hover ul, li.over ul { display: block; } /* The magic */

#home .home, #about .about, #link .link, #newe .newe, #serv .serv, #port .port
{
color: #000;
background-color: #eee;
}

I am 99.99999% sure that there is no way to do this in pure CSS but just in case.

I have tabbed navigation. When a user clicks on a link it loads that page from the server (a page refresh). The corresponding nav tab should then be in its active state.

Does CSS support this at all? I am happy to run a server side script to set an item to "current" but I would like to know if there is any way around it.

Thanks.

Hi all. I've read through a lot of posts and for the life of me I can't figure out why this isn't working. I have navigation tabs at the top of the page, and my "tabber" function to change the clicked tab's className to 'on' for highlighting:

CSS
#header li a {
display: block;
width: 100%;
color: #fff;
padding-top: 7px;
}
#header li a.on,
#header li a:hover { background-color: #333; color: #9c0; height: 20px; }

JavaScript
<script language="JavaScript" type="text/javascript">
function tabber (tab) {
if (document.getElementById('header')) {
var getLinks = document.getElementById('header');
var links = getLinks.getElementsByTagName('a');
for (var i=0; i<links.length; i++) {
if (links[i].name == tab) {
links[i].className == 'on';
} else {
links[i].className == '';
}
}
}
}
</script>

HTML
<div id="header"><div>
<ul>
<li><a href="#" name="home" class="on" onClick="tabber(this.name);">Home</a></li>
<li><a href="#" name="stories" onClick="tabber(this.name);">Stories</a></li>
<li><a href="#" name="featured" onClick="tabber(this.name);">Featured</a></li>
<li><a href="#" name="contact" onClick="tabber(this.name);">Contact</a></li>
</ul>
</div></div>


The tabber function is finding matches for the clicked link, but the matched tab is never highlighted. I can highlight a tab using onClick="className='on';" but I need to be able to turn all other tabs off with a blank className at the same time.

Thank you!