Topic awaiting preservation: td as a link $Pages that link to <a href="https://ozoneasylum.com/backlink?for=22921" title="Pages that link to Topic awaiting preservation: td as a link" rel="nofollow" >Topic awaiting preservation: td as a link\$

Author	Thread
thomasjojo Neurotic (0) Inmate Newly admitted From: Insane since: Aug 2004	posted 08-13-2004 10:34 HI Folks, I wonder how: to link a whole tabel cell, the td it self, not only the link inside it. as u see in my workpad: http://www.ide-design.no/clients/mediapost/ the menu on left is what I would like to link the whole td. capice? thanks in advance
kuckus Paranoid (IV) Mad Librarian From: Berlin (almost) Insane since: Dec 2001	posted 08-13-2004 10:44 Hi there, all you need is a bit of CSS - each of the menu links gets a class="menu" attribute, then you add <style type="text/css"> a.menu { display: block; } </style> in the pages' <head> and voilà.
thomasjojo Neurotic (0) Inmate Newly admitted From: Insane since: Aug 2004	posted 08-13-2004 11:04 u mean I simply add display: block; in my links class: .leftmenu { color: #424242; font-family : Verdana, Geneva, sans-serif; font-weight : normal; font-size : 10px; padding: 4px; padding-left: 8px; display: block; } ... ? thanks
kuckus Paranoid (IV) Mad Librarian From: Berlin (almost) Insane since: Dec 2001	posted 08-13-2004 11:16 Ah you have a class for those links already - I didn't look at the code before posting that. Yep, adding it there should do it. Though you might have to remove all those  s for it to work properly and add some more padding instead if needed. kuckus
thomasjojo Obsessive-Compulsive (I) Inmate From: Insane since: Aug 2004	posted 08-13-2004 11:53 i work on it locally. I do not have any nobreakspace in the cells, but display: block; only add more space to the cell, but does NOT make the cell a link, thats what I want
MajorFracas Nervous Wreck (II) Inmate From: Insane since: Jul 2003	posted 08-13-2004 12:40 I think what you really want is for your link to fill the TD. So instead of adding display:block to the classes for the TD (since that is already displaying as a block), add display:block to the class(es) for the Anchor. Padding from the TD classes should be moved to the Anchor classes so that the Anchor tag fills the TD. Try these changes: code: .leftmenu { color: #424242; font-family : Verdana, Geneva, sans-serif; font-weight : normal; font-size : 10px; padding: 0px; } .leftmenuactive { color: #424242; background-color: #c6c6c6; font-family : Verdana, Geneva, sans-serif; font-weight : normal; font-size : 10px; padding: 0px; } .leftmenuhome { color: #424242; font-family : Verdana, Geneva, sans-serif; font-weight : bold; font-size : 10px; padding: 8px; padding-left: 16px; display:block; } a:link.leftmenuhome, a:active.leftmenuhome, a:visited.leftmenuhome { color: #424242; font-family : Verdana, Geneva, sans-serif; font-weight : bold; font-size : 10px; padding: 8px; padding-left: 16px; text-decoration: none; } I should point out that you have some duplicate rules. Note that the last two rules above are virtually identical which meant the padding changes had to be made in two places...I'd suggest you remove the latter.
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 08-13-2004 18:36 What you want to do is stop having them all be <td>'s. If you must use a table to do your layout, then make the whole menu be in one <td>, and then do what Kuckus said. (Edited by DL-44 on 08-13-2004 18:37)
MajorFracas Nervous Wreck (II) Inmate From: Insane since: Jul 2003	posted 08-13-2004 21:27 Good point. This sort of approach using <ul> <li> tags is well documented and lends itself to the semantic structure expected for menus. The key point is that if you want the clickable area on each menu item to be the same (and not vary based on the length of the text displayed) then the <a> tag should be display:block.
kuckus Paranoid (IV) Mad Librarian From: Berlin (almost) Insane since: Dec 2001	posted 08-13-2004 21:58 Yep, that's true. Here's some reading material: http://www.alistapart.com/articles/taminglists/ http://www.gurusnetwork.com/discussion/thread/2243/

Topic awaiting preservation: td as a link\$

Author

Thread

thomasjojo
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Aug 2004

posted 08-13-2004 10:34

HI Folks,

I wonder how: to link a whole tabel cell, the td it self, not only the link inside it.
as u see in my workpad: http://www.ide-design.no/clients/mediapost/ the menu on left is what I would like to link the whole td.

capice?

thanks in advance

kuckus
Paranoid (IV) Mad Librarian

From: Berlin (almost)
Insane since: Dec 2001

posted 08-13-2004 10:44

Hi there,

all you need is a bit of CSS -

each of the menu links gets a class="menu" attribute, then you add

<style type="text/css">
a.menu { display: block; }
</style>

in the pages' <head> and voilà.

thomasjojo
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Aug 2004

posted 08-13-2004 11:04

u mean I simply add display: block; in my links class:

.leftmenu {
color: #424242;
font-family : Verdana, Geneva, sans-serif;
font-weight : normal;
font-size : 10px;
padding: 4px;
padding-left: 8px;
display: block;
}

... ?

thanks

kuckus
Paranoid (IV) Mad Librarian

From: Berlin (almost)
Insane since: Dec 2001

posted 08-13-2004 11:16

Ah you have a class for those links already - I didn't look at the code before posting that.

Yep, adding it there should do it. Though you might have to remove all those  s for it to work properly and add some more padding instead if needed.

kuckus

thomasjojo
Obsessive-Compulsive (I) Inmate

From:
Insane since: Aug 2004

posted 08-13-2004 11:53

i work on it locally. I do not have any nobreakspace in the cells, but display: block; only add more space to the cell, but does NOT make the cell a link,

thats what I want

MajorFracas
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2003

posted 08-13-2004 12:40

I think what you really want is for your link to fill the TD.
So instead of adding display:block to the classes for the TD (since that is already displaying as a block), add display:block to the class(es) for the Anchor.
Padding from the TD classes should be moved to the Anchor classes so that the Anchor tag fills the TD.

Try these changes:

code:

.leftmenu {

   color: #424242;

	font-family : Verdana, Geneva, sans-serif;

	font-weight : normal;

	font-size : 10px;

	padding: 0px;

}





.leftmenuactive {

   color: #424242;

	background-color: #c6c6c6;

	font-family : Verdana, Geneva, sans-serif;

	font-weight : normal;

	font-size : 10px;

	padding: 0px;

}





.leftmenuhome {

   color: #424242;

	font-family : Verdana, Geneva, sans-serif;

	font-weight : bold;

	font-size : 10px;

	padding: 8px;

	padding-left: 16px;

	display:block;

}



a:link.leftmenuhome, a:active.leftmenuhome, a:visited.leftmenuhome {

   color: #424242;

	font-family : Verdana, Geneva, sans-serif;

	font-weight : bold;

	font-size : 10px;

	padding: 8px;

	padding-left: 16px;

	text-decoration: none;

}

I should point out that you have some duplicate rules. Note that the last two rules above are virtually identical which meant the padding changes had to be made in two places...I'd suggest you remove the latter.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 08-13-2004 18:36

What you want to do is stop having them all be <td>'s. If you must use a table to do your layout, then make the whole menu be in one <td>, and then do what Kuckus said.

(Edited by DL-44 on 08-13-2004 18:37)

MajorFracas
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2003

posted 08-13-2004 21:27

Good point. This sort of approach using <ul> <li> tags is well documented and lends itself to the semantic structure expected for menus.

The key point is that if you want the clickable area on each menu item to be the same (and not vary based on the length of the text displayed) then the <a> tag should be display:block.

kuckus
Paranoid (IV) Mad Librarian

From: Berlin (almost)
Insane since: Dec 2001

posted 08-13-2004 21:58

Yep, that's true. Here's some reading material:

http://www.alistapart.com/articles/taminglists/
http://www.gurusnetwork.com/discussion/thread/2243/