HTML improve code

My code is not the best. I am able to make it work, but want to improve. Any suggestions on this page to improve code would be appreciated. The template is hand made "Bathroom Sink Tutorials" "Bathroom Sink" Tutorial & faucet installation, restore, replace. -
CSS is here
http://freetutorials.name/Reference1/2 col.css
Thank you in advance
falcon

 

HTML Code

All HTML code is not the same
Even though it works (displays properly and validates) some coders are able to code with less code to do more (optimizing)
This loads faster and takes up less memory
Some optimizing is remove white spaces and remove comments,
but the best is to use code more efficiently
-
The last is what I am asking - how to improve or use the code more efficiently
-
Thank You
falcon

 

You can remove the js and css code (most of it at least) from the html and place it in separate files js and css files. Use js only when needed for example the drop-down menu could be done with minimum css.

Get rid of the browser conditionals in almost every case it can be done with the same html/css code. Also get rid of the global CSS classes and use the individual tags, some browsers take longer to go through those - * {margin:auto;}

Try to reduce unused properties from the HTML (<a name="Replace" id="Replace"></a>) and take advantage of combinations of CSS classes although it may increase slightly the html source the css code will be reduced.

There are ways to eliminate js dependencies for instance by using a framework like jquery that hooks on various events without the need of specifying the js handlers (eg: <a href="default.htm" onclick="return clickreturnvalue())......... just <a href="default.htm"......with a class or id will do. This also simplifies the html with other complex functions because you won't need the <noscript> tag to specify alternative content and have more consistency with your pages.

Check also the css properties used for each page, if you are using multiple templates for your site not every page may use the same css tags, so try to create a stylesheet with the common properties and separate ones that are page dedicated.

Use divs for layout/presentation instead of the traditional list combinations makes site management easier as you don't often need to figure out and debug conflicts between content and presentation tags.

Another thing, if you have pages with too many tiny images consider using a common image for all to reduce the number of server connections.

 

Thank You
-
will try replacing the JS dropdown with CSS first (that will allow external CSS)
-
There are two styles for total CSS dropdown menus that I know of, others use some JS for IE
-
Stu Nicholls CSS play
Stu Nicholls | CSSplay | A css only dropdown menu further examples
-
Gibson Research Corp
GRC|Script-Free Pure-CSS Menu Demo
-
Do you know of any others and which one do you recommend
-
Thank You
falcon

 

Yes these are the standard ol,ul,li combinations and from my experience complicate things a lot and you may end up with lots of browser conditionals.

Basically instead of ul/li you use divs. It's the same concept but you have way less compatibility issues with the browsers especially IE and its old versions. You do not need the conditionals. There is a menu plugin with a CMS package I published few months ago. The demo/download is here:
http://demos.asymmetrics.com
and it's also on sourceforge.net I used few themes from here for demo purposes. It also demonstrates the use of jQuery instead of the traditional handlers to the HTML elements. In this way if js is off the site uses the same exact code same goes for the user agent. The content displayed and used is the same in every case.

 

Presently making validation error and warning corrections
Tried "Wonderware" CSS menu generator
The results are here:
bottom of menu "bathroom sink tutorial"
- need to move the menu to the center (don't know how)
trying to make the CSS menu like the Java Script on the indicated page
[both the CSS and the javascript menu came from either tutorials or generators] since the css menu generator is free it does not have a lot of support.
Page below with javascript menu
"Bathroom Sink" Tutorial & faucet installation, restore, replace.
-
all the code for the css menu is on the page (view - page source)
also need to decrease the width of the menu
-
also will try enigma1 menu later. need to convert as much as possible to CSS and better code.
=
Thank You
falcon