HEllo everybody! Trying to align nav bar left, because as you notice its all screwed up. Here is the site http://tinyurl.com/yc2tgwq Any help would be awesome.
Works fine with "<img src="images/home.png" hspace="0" vspace="0" align="left" alt="home" />", but when i check the page with xhtml validator its calling it an error?
1) vspace, hspace and align are presentational attributes, and are deprecated in STRICT doctypes. You should be using margin/padding in your CSS, NOT those attributes which have no business being in a properly written page. 2) That's a menu, a menu should be an unordered list (UL) 3) Those images are presentational affectations not content - using images in that way buggers up screen readers, can result in your menu links being ignored by some search engines, and in general are an accessibility /FAIL/ - you should probably be using some form of image replacement technique like gilder-levin over text so that you have better images-off graceful degradation... which would also give you the advantage of making it easier to add hover states without resorting to any javascripted asshattery. 4) You've got a hell of a lot of unneccessary DIV and classes in there, and your heading orders don't make any sense. (h2 preceeding the h1, both empty). I see paragraphs around non-paragraph elements, double-breaks (usually if you have two BR in a row, you're screwing up), and some proper indentation would probably stop you from making a lot of these mistakes. 5) just thought I'd point out you might want to add a fade to that 'swirl' background, since at screens wider than the image it looks kinda silly how it just 'ends'. I have time later I'll run down how I'd approach that for you.
Here's a rewrite to show what I meant. http://www.cutcodedown.com/for_others/MrMoolah/template.html as with all my examples the directory: http://www.cutcodedown.com/for_others/MrMoolah is unlocked so you can grab the gooey bits. Tested working IE 5.5, 6, 7 & 8, Opera 9.62 and 10.10, FF 2 and 3.6, and the latest iterations of Safari and Chrome. While in there I also remastered all the images so that the body background could be tiled, that the menu can have hover states, and so that they now take a full quarter the bandwidth that they did in the original. To run it down quick - the h1, menu and banner get gilder-levin image replacement so that images off users have something pretty to look at and use - and so that there's ACTUAL text for search engines to see. Take a look at the page with images disabled to see what I mean. The menu one is a bit trickier than the other two - by fixing the size of the anchor and setting overflow:hidden it chops off the much larger span that's absolute positioned inside it. For each menu item we align the background on that span to show the full height of the new mainMenu.png which contains all three states (top to bottom that's unhovered, hovered and current page - I used that little 'drop' to indicate current page, just move the class 'current' in the markup). Then for .current we just slide the span's position up, and the same for our hover/active states. Doing the hovers/status this way means we don't have to say background-position for every possible combination of menu item and state. You'll also notice I adjusted how the float model was built, and moved a couple images out of the markup and into the background. Pretty routine stuff. The manufacturers I made all the same size box and redid the images accordingly, making the code for handling that a lot cleaner/simpler. Hope this helps.
dang, very nice, thank you very much!!! I will have to re-read and try this later this afternoon. It will be fun to work these techniques on the other pages .
there are three way to align in css. 1 left 2 right 3 center now,left align nav bar have following syntax: .left { position:absolute; \\declare position left:0px; }nav bar width:300px; }size background-color:#b0e0e6; \\declare bgcolor=code }