Is it possible to this?

[Koora]

Hi

I am a new member of this forum and a new member of web programming society. I've been wondering if it possible to make a link behind a transparent background working.

So I made 3 transparent holes in a png and used it as background, under it I placed 3 menu buttons which should react on hover.
I also added the replicas of this menu to show how they should work.
I on purpose chose the worst colors. Why? Because I can.
But weirdly I am mesmerized by the space between menu buttons when hover.
I added the attachment in *.zip format.
So what do you think, If it is possible to do this?

[RyanReese]

Instead of attaching the code can you post a link? Post it like this to avoid the spam bot
sitehere . com / page . php

Also please specify where on the page you are talking about

[Koora]

So, I made a link, couldn't find a host before.

The area what I am talking about is the area where oval shapes are placed, in the top of the site.
The oval shapes are transparent and I laid a menu under the background object using lesser z-index.
There are 3 menus on the page, to show how the hover should work.

Here's the link:
http : / / web . zone . ee / testcss /

[RyanReese]

Hi, the problem is the font size you set on hover

.menu a:hover, .menu1 a:hover, .menu2 a:hover {
font-size:16px;
background:#FF0000;
}

You decrease the font size of the anchor and since no width is set the box gets smaller and thus the others shift over. You can fix this by setting a width (or removing the changed font, but I don't think you want that )

.menu a, .menu1 a, .menu2 a {
background:#FF0088;
padding:50px;
margin-right:64px;
width:130px;
display:-moz-inline-box;
display:inline-block;
color:#000;
font-size:18px;
}

[Koora]

Nope.
The menu item size wasn't the problem.
My question is about the working of links under transparent layer.

In the top of the page are the oval openings which are set to be transparent, so it is possible to see trough this layer. Now what I have done is that I've put an exact copy of the menu like on foreground behind that background layer. And what I'm wondering is that if it is possible to make the menu items in the back of the background change on hover like the others on the page and be clickable.

[Stomme poes]

Not the way you have it, no. If anything is sitting "over" an anchor then the anchor should not be clickable. This can also happen in situations where you don't expect, like the negative-float-wrapping sidebars you see in the Holy Grail layout (adding position: relative to them, which naturally raises their z-index and sets a new stacking context for children inside, fixes this problem in FF and Safari).

Instead, with CSS you would fake it:

You'd have each anchor sit on top of #base (they'd be children of it as they are now) and they'd have a copy of just that part of the #base image as their own bg image, and you could either switch images on :hover/:focus or sometimes if IE6 is an issue you'd give the anchors all an inner child called "transparent.gif" and then set a bg image that changes (you don't have to, just sometimes people do that. I have).

Playing with z-index like that, there may well possibly be a browser who doesn't follow the rules and lets the anchors be clickable, though I don't know who. I do know of a browser (FF2 and under) who thinks negative z-indices mean "under the body" so stuff disappears.

[Koora]

Yes, that's what I was after. Thanks.
Maybe it is possible to do this with javascript.

[Stomme poes]

Maybe it is possible to do this with javascript.

Since it's always possible with CSS I'd do it with CSS first. You're using CSS now to make the anchors unclickable... it's folly to go to scripting to "fix" it. I surf regularly without scripts on. I would not have any idea that those were supposed to be clickable.

The image trick is fairly popular and works... you can always add some JS on top of a working page to make it MOAR AWESOME but it's considered a bad idea to rely on it for function (esp something as basic to a page as links).

Would you like to see an example of what I mean? Or was there some other reason I missed why you want the #basic image on top of the anchors?

[Koora]

My first idea was that it is complicated to do menu items with rounded corners and change color on hover.
So I thought why not make a rectangle and lay a picture with transparent sections on it,
so it would seem that the menu items are actually with rounded corners.

But it may be that navigation is too important to be lost in my own experiments.
If u have examples, why not.

[Stomme poes]

My first idea was that it is complicated to do menu items with rounded corners and change color on hover.
So I thought why not make a rectangle and lay a picture with transparent sections on it,
so it would seem that the menu items are actually with rounded corners.

It's definitely a brilliant idea, it's just that anchors need to be one the "top" of the stack to work... that's why CSS people use WAY too many images and containers... because the other rule we have to live with (for now) is one bg image per container. So some sites, just for rounded corners, have lots and lots of containers.

Javascript can do rounded corners just fine, but if you go that route, make sure there's something usable for the rest of us.

Here's a very quick quicky of something like what you would do if you used CSS Sprites/Sliding Doors in this menu (the images look terrible, and if this were a client's site then I probably wouldn't be messing with the margins like I did here to position the anchors, but I'd prolly use some other positioning technique):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Background CSS Image Sprites and Sliding Doors</title>
    <style type="text/css">
* {
  margin: 0;
}

ul {
  list-style: none;
}

#base {
  width: 1024px;
  height: 455px; /*only for this test*/
  margin: 0 auto;
  background: url(webzoneee.png) 0 0 no-repeat;
}

#menu {
  min-height: 148px;
  padding: 41px 0 36px 114px;
  overflow: hidden;
}
* html #menu {height: 148px;}

#menu li {
  display: inline; /*pretty much only bothered stating this for IE*/
}

#menu a {
  float: left;
  width: 196px;
  height: 72px;
  margin-right: 90px;
  color: #000;
  font-size: 1em;
  line-height: 72px;
  text-align: center;
  background: #f08 url(anchorbg.png) 0 0 no-repeat;
}
        #menu a.last {
          margin-left: 24px;
        }

        #menu a:focus, #menu a:hover, #menu a:active {
          font-weight: bold;
          font-size: .8em;
          background-color: #f00;
          background-position: 0 -73px;
        }
    </style>
  </head>
<body>
  <div id="base">
    <ul id="menu">
      <li><a href="#">AAAAAAAAAAA</a></li>
      <li><a href="#">BBBBBBBBBBB</a></li>
      <li><a class="last" href="#">CCCCCCCCCCC</a></li>        
    </ul>

    <ul class="menu1">
      <li><a href="#">AAAAAAAAAAA</a></li>
      <li><a href="#">BBBBBBBBBBB</a></li>
      <li><a href="#">CCCCCCCCCCC</a></li>        
    </ul>

    <ul class="menu2">
      <li><a href="#">AAAAAAAAAAA</a></li>
      <li><a href="#">BBBBBBBBBBB</a></li>
      <li><a href="#">CCCCCCCCCCC</a></li>        
    </ul>
  </div>
</body>
</html>

I didn't actually do any styling of the other two menus.

Because of bugs IE has when you play with the body like a container, I left it and used #base to be the box who's centered and 1024px wide. This is definitely the safer route... arg, I didn't bookmark the threads but there are some very recent, active threads where the problems with IE and doing goofiness with the body are shown and explained by Paul O'B.

http://stommepoes.nl/Tests/webzoneee/anchortest.html for you to look at. Obviously it would look better if the images had been done better.

If you turn images off in your browser (or misspell the image names/paths) then you'll see what you have is something that still works, where a background colour changes on both hover AND focus (don't forget focus!!) and active just for IE6. So the images are not doing any work (you can't rely on images to convey information like that, since not everyone is guaranteed to see them).

The moving of the background position is often called "Sliding Doors" (though the actual sliding-door technique was a single image split up among two elements so you could imitate something like a rounded-cornered tab without having images of a set width, so each tab could naturally be the width of the text inside it) and using a single image for it is often called a "CSS Sprite", with the idea that, like in older video games, a single image moves around rather than a different one for each position.

You can find a ton more about them if you google those terms.

Here's another one I did for someone on another forum (so, those aren't my images or anything): http://stommepoes.nl/Tests/lilbellas2.html

You can just grab the images from the folder and see what they look like. I'm taking down the version I made for you in about a week or so.

[Koora]

Thanks for the example.
I'm now researching about the sliding doors.

[Stomme poes]

I realised later I've got links to the articles in my second link (where I left the links blue on a black background... lawlz that was dumb of me).