Alright, if you go to www.tchops.net/menus.html you see how the menus aren't all separated and aligned to the left? Will someone tell me what's wrong with my code? <a href="images/CCF03252010_00000.jpg"><img src="images/CCF03252010_00000(2)tn.jpg" height=250 width=250 alt="Dinner Menu"> - Dinner Menu (Click to enlarge)<p></a> <a href="images/lunch_menu.jpg"><img src="images/lunch_menutn.jpg" height=250 width=250 alt="Lunch Menu"> - Lunch Menu (Click to enlarge)<p></a> <a href="images/tchops specials.jpg"><img src="images/tchops specialstn.jpg" height=250 width=250 alt="Specials Menu"> - Specials Menu (Click to enlarge)</a> HTML:
You got your code, you had unclosed P (paragraph) tag on the A (anchor) tag. Try wrapping the caption on with P, i.e : <a href="images/CCF03252010_00000.jpg"><img src="images/CCF03252010_00000(2)tn.jpg" height=250 width=250 alt="Dinner Menu"><p> - Dinner Menu (Click to enlarge)</p></a> Code (markup): If your page width sufficient with the accumulated images width it should be ok.
Just checking it with Firefox and Firebug. I see that the <a > width goes through the edge of the page. Now, lets try this. Open your css and add this : a.menuitem{ width:250px; float:left; } .clear{ clear:both; } Code (markup): this define a class for anchor tag, with the width of 250 pixel. The floating is used so the anchor would be aligned horizontally. next, on your menu code add class for the ancor so its looks like this .. <a class="menuitem" href="images/CCF03252010_00000.jpg"><img src="images/CCF03252010_00000(2)tn.jpg" height=250 width=250 alt="Dinner Menu"><p> - Dinner Menu (Click to enlarge)</p></a> Code (markup): after that menus end, add this code <div class="clear"></div> Code (markup): this is common practice to clear floats box. so overall the html part should look like this : <a class="menuitem" href="images/CCF03252010_00000.jpg"><img src="images/CCF03252010_00000(2)tn.jpg" height=250 width=250 alt="Dinner Menu"><p> - Dinner Menu (Click to enlarge)</p></a> <a class="menuitem" href="images/lunch_menu.jpg"><img src="images/lunch_menutn.jpg" height=250 width=250 alt="Lunch Menu"><p> - Lunch Menu (Click to enlarge)</p></a> <a class="menuitem" href="images/tchops specials.jpg"><img src="images/tchops specialstn.jpg" height=250 width=250 alt="Specials Menu"><p> - Specials Menu (Click to enlarge)</p></a> <div class="clear"></div> Code (markup): I'm watching this thread, keep me posted how it goes
Unless I did it wrong, it isn't working. I added the css and here is the code I used. <div id="images"> <div class=clear> <a class="menuitem" href="images/CCF03252010_00000.jpg"><img src="images/CCF03252010_00000(2)tn.jpg" height=250 width=250 alt="Dinner Menu"><p> - Dinner Menu (Click to enlarge)</p></a> <a class="menuitem" href="images/lunch_menu.jpg"><img src="images/lunch_menutn.jpg" height=250 width=250 alt="Lunch Menu"><p> - Lunch Menu (Click to enlarge)</p></a> <a class="menuitem" href="images/tchops specials.jpg"><img src="images/tchops specialstn.jpg" height=250 width=250 alt="Specials Menu"><p> - Specials Menu (Click to enlarge)</p></a></div> Code (markup):
No, the <div class="clear"> should not wrapped the menuitems, it should be after the menuitem. so its structure is like this : <div id="images"> <a class="menuitem"></a> <a class="menuitem"></a> <a class="menuitem"></a> <div class="clear"></div> </div> <div id="images"> <a class="menuitem" href="images/CCF03252010_00000.jpg"><img src="images/CCF03252010_00000(2)tn.jpg" height=250 width=250 alt="Dinner Menu"><p> - Dinner Menu (Click to enlarge)</p></a> <a class="menuitem" href="images/lunch_menu.jpg"><img src="images/lunch_menutn.jpg" height=250 width=250 alt="Lunch Menu"><p> - Lunch Menu (Click to enlarge)</p></a> <a class="menuitem" href="images/tchops specials.jpg"><img src="images/tchops specialstn.jpg" height=250 width=250 alt="Specials Menu"><p> - Specials Menu (Click to enlarge)</p></a> <div class="clear"></div> </div> Code (markup):