Jump to content

[solved] Horizontal menu distorted until clicked on


VietnamTom

Recommended Posts

Hi everyone :)I was wondering if someone could help me out by looking at my website/code and tell me where i went wrong :)For some reason my horizontal menu bar/buttons are not displayed in the right way on initial view, only when you click on one of the menu links it appears as normal, i tried many things but am unable to solve it.Also for some reason, when i want to edit the appearance of my left navigation menu, the top one changes aswell..I'm guessing i messed up in the tagging of div ids/tags somewhere? i mostly build it off tutorials because i'm still learning.http://www.xs4all.nl/~deathfro/Site%20Test/Sorry if my website code gives you an headache.. any suggestions or solutions would be greatly appreciated :)ps: i checked it with the html/css etc validation services, and all say there are no errors, but i'm guessing that doesn't include layout errors or missing code hahaThank you for your replies,Tom

Link to comment
Share on other sites

you need to set the width and height of top menu anchor links, setting width to 100% will force it to be the same width as the the li tag, which has no width set either, so it will be the width of the anchor text.The width it adjusts to on clicking, is the width set by the a:visited selector below this will affect all anchor links that are clicked and in visited state. to only affect leftnav it would have to be .leftnav a:visited

.leftnav a:link, a:visited { background-color:#003100; border-bottom:4px solid #EFEFEF; color:#FFFFFF; display:block; font-family:arial; font-size:12px; font-weight:bold; height:100%; padding:7px; text-align:center; text-decoration:none; text-transform:uppercase; width:140px; }

use .topnav a to set the default styling

.topnav a{  color:#FFFFFF;display:block;font-family:arial;/*font-size:15px;*/    font-size:12px;  /*taken from left menu IF YOU WISH FOR IT TO CHANGE ON HOVER/ACTIVE MOVE TO .topnav a:hover, .topnav a:active */   font-weight:bold;/*padding:0;*/  padding:7px; /*taken from left menu*/  text-align:center;text-decoration:none;text-transform:uppercase;/*width:100%;*/  width:140px;  /*taken from left menu*/  height:100%; /*taken from left menu*/   }

And then use the pseudo class state of anchor to target the style that will change

.topnav a:hover, .topnav a:active {  background-color:#999999;  }

you need to adjust left menu from:.leftnav a:link, a:visitedto:.leftnav a:link, .leftnav a:visited

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...