1 reply [Last post]
H.tea
H.tea's picture
Offline
newbie
Last seen: 10 years 49 weeks ago
Timezone: GMT+2
Joined: 2005-11-14
Posts: 5
Points: 0

I've been working on the Dezinerfolio "simple accordion", adapting it for my own need as a navigation menu.
Here's my result so far.

I'm having a few problems though:

1) Having added links to some buttons ("Home", "Page 2" and "Page 3") I've noticed that not the whole buttons are linkable. I've added a dotted orange outline to illustrate this.
I've played around with the margin value and putting in values for padding, separating the linked button from the rest, like this:

/* All buttons except link-buttons (general styling) */
#nav_menu h2,.df_menu_head {
/* graphic button image */
background:		gray url(../images/button.gif);
background-repeat:	no-repeat;
margin:			8px 0 0 7px;
padding-top:	8px;
}
 
/* All buttons (text style) */
#nav_menu h2,.df_menu_head,.linkbutton a {
color:		gray;
cursor:		pointer;
text-align:	center;
font-size:	10px;
display:	block;
text-decoration: none;
width:		190px;
height:		21px;
}
 
 
/* Link-buttons only (general styling) */
.linkbutton a {
border:		thin dotted orange;
margin:		-8px 0 0 -1px;
padding:	5px 0px 0px 0px;	
	}

... however, this disaligns the button text compared to the non-linkable buttons (the specific numbers are just from eye measurement and are probably wrong). Can someone tell me what I've done wrong and what I should do to get it right (have the whole linked buttons clickable while retaining the proper alignment)?

2) Click on one of the buttons which expand ("Download", "FAQ" etc) and notice how the title changes to red and gets a red line underneath the button. Why won't the title of the linked (non-expanding) buttons ("Home", "Page 2", "Page 3") change to red when they do indeed get a red line underneath?

/* Button styling when selected or pre-selected ("header_highlight" class) */
.header_highlight {
width:			190px;
/* graphic button image */
background:		gray url(../images/button_mouseover2.gif) no-repeat 0 0;
color:			red;
font-weight:	bold;
/* colored line underneath selected button */
border-bottom:	1px red solid; 
	}

3) Similarly I have a problem with the nested menu items.
Click on the "Download" button to expand it. Now click on any of the 3 nested items ("Updates", "Tools" or "Other tools") which should link you to another page.
Note how the nested item's text label has changed into bold-italic (indicating the page you're currently on), but it doesn't turn the text green as I've told it to. And the green underlining is misaligned:

/* Nested links (pre-selected -"submenu_header_highlight" in HTML code) */
.submenu_header_highlight {
text-decoration:	none; 
width:				171px;
font-style:			italic;
font-weight:		bold;
color:				green;
border-bottom:		1px green solid;
	}

H.tea
H.tea's picture
Offline
newbie
Last seen: 10 years 49 weeks ago
Timezone: GMT+2
Joined: 2005-11-14
Posts: 5
Points: 0

Does anyone have any

Does anyone have any suggestions for improving/fixing my code?
I'm stuck Sad