I am working on making another layout for my site and I have a better nav bar design on this layout than my other one. Ok here is what I am trying to do: I made 3 seperate images for each button. And what I want is when you just go to the site the nav buttons show up normal with out hovering or being clicked it shows up just normal but when you hover over it switches to the hover image. And then when you click on the button it switched to the activated image. What code do i need to use. Cause I am confused and everything I try doesn't seem to work out.
Writing the html to semantically describe the content first, followed by logical dividing of content areas, followed by the styling to get the desired look will result in much cleaner code. The html for this page could then be :
Note that even though various items will have graphical text, the actual text should be present in the html for non-visual browsers (search engines, screen readers etc). The combined images for the rollovers I have attached to this post - 8bit png graphics actually came down slightly smaller than gifs.
and assumes all graphics are directly within the "images" folder.
This is a standard minimum 100% height type layout where the footer will be at the bottom of the screen unless content pushes it down - acheived by making the wrapper 100% minimum height and pulling the footer back up into view with a negative top margin. A #footerpush div serves to clear the floated columns and prevent content from being hidden behind the footer.
The <h1> heading displays the header graphic while tha actrual text is made very small and coloured to hide it. The #navbar div gets the left-top graphic as a background, and the navigation <ul> is floated to the right.
The navigation links and <li>s are floated left and each link is given a size and the background graphic via its class name. On hover, the background is simply shifted to display the centre part of the graphic, whilst active displays the lower part. By matching the id of the page body (different depending on what page you are on) and the menu class, the menu item corresponding to the current page also displays the lower part of the background image.
The columns are simply sized (taking into account padding) and floated left and right, and given a minimum height to ensure the background graphics are displayed.
thanks alot man. i wish i could be able to fix my own coding but like i said i am a newbie. I been using dreamweaver cs3 but i guess that it's not going to work even if i use that. But anyways I can't figure out why the home button stays in the activated position and doesn't change.