Creating a clickable Region


I’m using the following CSS for my homepage and some “non-member sneak-peek” pages. Is there a way to make the “background” be clickable so that if they’re on one of my sneak-peek pages, they get sent back to the homepage?

#header {
	background: url('/images/Banner.jpg');
	height: 120px;
	width: 960px;
	position: relative;

<div id="header">

<div id = "login">
<form id="form1" name="form1" method="POST"><table  border= "0" cellspacing="0" cellpadding="0">
   <tr><td>Username: </td>
    <td><input name="username" type="text" id="username" size="10" /></td>
    <td>Password: </td>
    <td><input type="password" name="password" id="password" size="10"/></td>
  <td align="right"><input type="submit" name="signin" id="signin" value="Sign in!" /></td>


Thank you,


You could perhaps absolutely position a link over the top of the page, set to display block, but it’s probably a bit awkward.

As Ralph said just absolutely position (position:absolute; top:0; left:0; width:960px ;height:120px ) an anchor from within #header and give it the same dimensions as #header and the whole area will be clickable. Of course nothing else underneath will be clickable but I guess that’s what you wanted.

Thanks guys!

And, I appreciated the heads up about nothing else being clickable. As it turns out, if user screws up the login, they get a clickable “Forget password?” link in the top left corner. My solution (that works at least on Safari) was to to create a span tag around the “banner link”, but with a top margin of 16px as opposed to 0px. Could either of you see any potential issues with this?

Thanks again…


We’d probably need to see the whole thing to check in detail. If the forget password link is added dynamically then you could probably just apply a higher z-index (+ position:relative if not absolutely placed) to keep it on top but it does depend how its placed into the structure.

That would be super helpful. Much appreciated! The homepage (still under construction…) is If you need anything else, please let me know.

And, regardless of whether I need a higher “z - index” could you please explain that concept to me?

Thanks again.

Can you give me a temporary login to use so that I can see the error message? I tried to make one up but it doesn’t give an error message.

And, regardless of whether I need a higher “z - index” could you please explain that concept to me?

z-index applies to positioned elements only (position:relative, position absolute or positioned fixed) and determines which element should be on top should they overlap in some way. A positioned element with a z-index:2 will be on top of one with a lower z-index and cover it up.

However it’s ultimately the positioned parent that determines whether a child will overlap another child so if the parent is only z-index:1 then a child of z-index:9999999 still will not overlap an element outside the current context that has a z-index of 2.

That’s why I need to see the structure of the page and error message to determine if z-index will work in this scenario.

As I mentioned before if you find the code for the error message and then if the element is not positioned add position:relative to it and then give it a high z-index - say z-index:999 and see if anything happens.

Yikes! Try not typing anything and then hitting submit; it should give you a “Forgotten Password” error (that’s a link) in the top left-hand corner. If this doesn’t work, then my apologies; if this is the case I’ll have to check out my php code and then get back to you. (I may have to revisit it anyway…if you typed stuff in, and also hit submit but didn’t get an error then I’ll have to take a look)

Please let me know if the Forgotten Password error appears.

Regardless, I never knew about the z-index: definitely a concept that will come in handy.


OK, I see it now.

You can arrange it like this:

.homepagelink a {
    width:960px ;

To be honest I would have made the header an h1 and used image replacement techniques for it.

Something like that:

<div id="container">
<h1 id="logo">My Algebra <small>A different kind of Math Book&hellip;</small><span></span></h1>

Then use a gilder levin image replacement technique to hide the text.

Why all the inline styles on the men u:

    <li><a class="nyroModal" href="#members_only" style="font: 100% arial,sans-serif;
  font-size: 14px;
  font-style: normal;text-decoration: none; padding: 12px" >Making Connections</a></li>
                        <li><a class="nyroModal" href="#members_only" [B]style="font: 100% arial,sans-serif;
  font-size: 14px;
  font-style: normal;text-decoration: none; padding: 12px" [/B]>Introduction</a></li>

They’re all the same and there’s loads of them adding tons of mark up to the page. You can style all those from the css and probably not need any classes either as they have a unique context. Just style them via the parent id.

As a rule of thumb if you find yourself repeating a set of rules or class names to elements then you are probably doing something wrong.


Thanks so much for both the solution and the “better” way of doing it; I’ll take a look at the link and see I can figure things out.

Regarding the 50 gazillion repeated styles…I agree that it’s bad, bad, bad. :slight_smile:

It wasn’t a pain to write in since I just used a loop to generate the menu, but to be honest, I played around with it for a while and was continually getting the incorrect font, so I thought that I’d go hard-core and add it inline which seemed to work.

With that said, I didn’t try styling them via the li tags…I was trying span tags to no avail (I think that the nyroModal class was overriding things…).

Anyway, it’s officially on my TODO list. I’ll give it a shot in the upcoming week and send out a post if it’s not working.

Thanks again for your clear and detailed responses!