12 replies [Last post]
fambi
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Hi everyone.

I am completely perplexed as to why the anchor tags at the top right of my site do not work.

http://www.tm4b.com/index_xp.php

They are normal <a href=""> tags but for some reason hovering over them doesn't do anything, let alone clicking on them.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 8 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

How come these anchor tags don't work?

Work your way through this lot and then see what happens Wink > http://validator.w3.org/check?verbose=1&uri=http%3A//www.tm4b.com/index_xp.php

Life's a b*tch and then you die!

fambi
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

How come these anchor tags don't work?

Nice answer. Thanks!

fambi
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

How come these anchor tags don't work?

It feels so rewarding to see the blue side of the validator and read "This Page Is Valid XHTML 1.0 Transitional!"

Unfortunately, however, the anchor tags still don't work!

fambi
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

How come these anchor tags don't work?

If i remove the div that surrounds them, they work. But when i put the div back, they don't!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How come these anchor tags don't work?

If you had checked in FF using the outliner you would have seen that your top bar at 100% width positioned absolute is actualy covering the floated div and you can't click on links through a div, well you can if your IE but it's a law unto itself.

You need to play around with z-index to rearange the two layers I would also remove the inline styling on that div for the links and name it with an id in your style sheet also it may be better to rethink whether you need to position that top bar absolute, there are better ways of accomplishing what you want.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

fambi
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

How come these anchor tags don't work?

Indeed yor are a guru!

What you have said makes sense to me! I'll get onto it in a short-while.

I take it you understand what i am trying to accomplish. (i.e. put content first).

If you could be so kind as to advise me on the "better" ways of accomplishing it i would appreciate it much.

I was also wondering if it was possible to make the footer clear the left-column as well?

fambi
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

How come these anchor tags don't work?

Ok. I done a bit of googling on z-index and read about it and understand the concepts (slightly!) but when i've tried to implement it on my document, no result!

Anyone feel like giving a quick tutorial?

fambi
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

How come these anchor tags don't work?

Ok. Sorted out the anchor problem, although i'm still interested in this z-index thing!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How come these anchor tags don't work?

Hi fambi, I see that you removed the width from the #logo which has corrected the problem.

If you were to add back the width to the #logo div, covering the newly named #topbar_menu recreating the original problem then added position:relative to the topbar_menu as well as its float rule plus z-index:2; you would find that the links would once again become clickable as you have changed the stacking order of the divs the important thing to remember with z-index is that it requires an element to be able to be positioned in order to work i.e position:relative/position:absolute as these properties allow you to move an elements position and overlap them if required.

Stacking order is analogous to playing cards being laid on a table the first one laid will be at the bottom of the stack with the last one being on top thus it's the same with elements if elements overlap the order they were written in top to bottom dictates the stacking order the last element written will be the topmost one .

Hugo.
p.s I presume that you sorted the footer problem with clear:both.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

fambi
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

How come these anchor tags don't work?

Thanks for the tutorial!

Unfortunately, the footer problem remains unsolved even with clear:both.

Although my experience is very little, my feeling is that because the leftcol is positioned absolute, the clear:both doesn't work.

Excepting the overlap that occassionaly occurs, i am very happy with the overall structure of the pages.

Any recommendations would be appreciated!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How come these anchor tags don't work?

Ah yes you now experience one of the problems associated with position absolute and why it's not the best way of creating layouts .

You really should make the left column a floated one, best thing to do is to work on a copy of the page re-working the design to accommodate a furtherfloat instead, then clear:both will work for you this shouldn't be a major task .

It may help to have a look at a source ordered 3 column layout tutorial
your almost using a full source ordered layout anyway with the floated centre and right divs, so it should be easy to convert the leftcol to float as well.
http://www.positioniseverything.net/ordered-floats.html

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

fambi
Offline
Enthusiast
Last seen: 12 years 18 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

How come these anchor tags don't work?

Hi Hugo.

Thanks for the advice.

I used to have the left col as a float but the problem with it was that when the screen shrank, it got pushed to the bottom.

Can we work around that?