HTML & CSS
On this link:
It is currently done in css but every page has its own menu bar in html. In template , there is t be only one html file which will be called on multiple pages. so the navigation menu would have to auto=adjust to the page it is called upon.
If you're going to make them ALL the same width, then you are probably fine and it's easy to change. If you give each one it's own width so it doesn't look like ass, someone wants to add or change a menu item they have to go diving to give it the new appropriate width.... that's a pain in the ass when:
Sticking with 100% dynamic by not stating a fixed width means you never even have to bother in the first place.
Which is why generally I won't use BOLD on a hover state unless it's a VERTICAL menu. It's just not worth it in most cases and there's plenty of other things you can do on hover.
To me that's the key to good design - do NOT get your heart set on a visual effect if it's going to be a pain to implement, more code than it's worth to implement, or not REALLY adding to the user experience.
Just part of why the whole drawing a pretty picture in photoshop first approach seems completely back-assward to me. It's putting the cart before the horse and often saddles you with crap that results in 200K+ of markup and CSS for 5k of plaintext. That's not good web design no matter how pretty it is in photoshop.
is it really a nightmare, not really , imagine doing a multiple find and replace on tags , "the bad old days" to change the widths on each menu and then it all going wrong, thats a nightmare, changing a width on a style sheet isnt really is it. Mind you you have a dynamic php site , so maybe I'm not realising all the implications of not having automated widths in this situation. Correct me if I'm wrong Death.
Bold changes the dynamic width, and there's no predictable way to adjust for that on each item across all the different fonts or font renderers the page could end up on. The only REAL solution is either to 'fake' bold using color (which I think is what you settled on) or to fix the width of each anchor and do text-align:center on them - which usually looks like ass if they are all different widths, or requires changing the width of each one to fit - a maintenance nightmare when someone in the future tries to update the menu.
Note how in the source, the anchor (any element can have it really, hte <li> for example, as long as you update the CSS) has the ID of "current". Once the ID is set in the HTML then as long as you have CSS for it, it will style it (thus you can style it as if it's the current page (with whatever styles you want))
If you want dynamic styling depending on what page you are on, that's just not feasible to do and I'd recommend just getting an ID in there
ok I resolved the above issue of bottom content jumping down.
but I have another one. I think it is a comon one.
The site link now is:
The menu links are coded to change color on :hover. On :active they are supposed to go bold as well. but while going bold, they make the whole menu links jump left or right.
How can this be avoided? I tried changing the margins and paddings on a:active but it did not work. Anybody has a better solution?
PHP (the stuff for current page) is highly basic and if you even know the slightest bit about PHP you could write a current page script (it's really not that hard )
Just to clarify
I knew I coulnt compete with deathshadow. He's a goodun, try and answer my ones deathshadow, you'll easily do them, text aligning in ahref's is really doing my head in.
Sorry I don't understand. What do you mean by "attach that triangle cutout to the bottom of .current in a padded space".
I want the menu to be automatically highlight according to the current page. Which includes color change, bolder font and an arrow at the bottom of the link. These changes should take place according to the link selected in the navigation. But there are no separate html pages for each link. Html will have to stay same and only the middle content of it will change for each link. So the menu has to change to highlight the current link in use.
Though the page you linked to also has non-semantic markup, tables for nothing, etc, etc... from the <body> tag to the end of the second menu line it's what, 2.3k? With semantic markup there's no reason for that to be more than half that. H1, two UL, done. NONE of the DIV apart from #container should even be in there, NONE of the tables are doing anything that needs a table to be done, even the strong tag and extra DIV's shouldn't be there, much less the use of the deprecated CENTER tag (which has NO PLACE in modern markup).
Also that ASP form crap that doesn't do anything but waste bandwidth is a great argument for switching to PHP. :lol: -- also funny it's designed to exactly 1024 so it's NOT 1024 friendly.
To make each page unique you have to make the markup for each page unique - it's just a matter of minimizing how much content you have to change.
The way I prefer to handle that would just have a class on it thus:
Another approach some people use (I dislike it because of the amount of CSS involved) puts a class on every link and the parent wrapper (either your width wrapping div or body) and uses inheritance to set it up. This might be easier for you to code the server side logic for since all you need to do is swap the class on BODY.
On that one you just change the class on BODY to the current page, and the CSS will handle the rest.
In either case though you still have to swap out some markup server-side, but that's what server-side scripting is FOR. The trick is to minimize how much has to be changed server-side for each page.
Your code is really good. I'll try to cut my code down as per your page.
However, there is one problem in the current page (besides the ones you have mentioned :)).
Thank you for all the help.
Just slap 'class="current"' on the current page's menu item and attach that triangle cutout to the bottom of .current in a padded space. You wouldn't even need to be nesting the two menus since there are no hover states! It's all just static content.
If your main nav's <li>'s (assuming a <ul> <li> structure here) then all you would need to do is make sure you do not unfloat the <li>'s for the sub-nav, and then just make sure the sub-nav <ul>s' width is wide enough to fit multiple items on the same line, aka if each subnav <li> is 100px wide, then make sure the subnav <ul> is at least 200px (it will fit 2 items then, etc etc)
If my main nav is horizntal, how do I make the sub-nav horizontal as well?
Display:inline on the sub-nav's ul?
Please take a look at the page below:
[ ddtabmenu.definemenu("nav", auto) ]
I wouldn't go with option 3 on there, I'd go with either option 1 or 2 (depending on which you would find easiest
You could adapt your menu to just be like a current page indicator, check out this link
you mean I just have to include the little PHP code above the navigation menu?
<?php $pageName = "Home"; ?>
The "Home" will automatically change to whatever the current page is?
next page →