So id like to get the drop menu on the right to sit about 2px from the last image on the right instead of on a new line or correcting with a table. heres the code can we just stick to the question at hand too <table border="0" cellspacing="1" width="100%"> <tr> <td width="87%"> <p style="margin-bottom: 0"><a href="320x480.htm"> <img border="0" src="logos/240x320-logo.bmp" width="100" height="64" alt="240x320 button"></a> <a href="free-samsung-omnia-hd-wallpapers-i8910-samsung-icon-wallpaper.htm"> <img border="0" src="logos/360x640-logo.bmp" width="100" height="64" alt="360x640 button"></a> <a href="free-480x800-mobile-wallpapers.htm"> <img border="0" src="logos/480x800-logo.bmp" width="100" height="64" alt="480x800 button"></a> <a href="iphone-4-wallpapers/free-iphone-4-wallpapers-640x960-iphone-wallpapers.htm"> <img border="0" src="logos/640x960-logo.bmp" width="100" height="64" alt="640x960 button"></a> <a href="free-high-definition-mobile-phone-wallpapers-720x1280-hd.htm"> <img border="0" src="logos/720x1280-logo.bmp" width="100" height="64" alt="720x1280 button"></a> <a href="http://www.techagesite.com/free-music-wallpaper-big-music-wallpapers.htm"> <img border="0" src="logos/desktop.bmp" width="100" height="64" alt="desktop button"></a> </p></td> <td width="50%"> <style> table table.menu { font-size:100%; position:absolute; visibility:hidden; } </style> <script type="text/javascript"> function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } </script> <table width="60" height="60"> <tr bgcolor="#FFFFFF"> <td onmouseover="showmenu('GraphicDesign')" onmouseout="hidemenu('GraphicDesign')"> <img src="/Thumbs/plus.png" width="60" height="60"> <table class="menu" id="GraphicDesign" width="60"> <tr> <td class="menu"><a href="/meboy.htm"> <img src="/Thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg" width="5" height="7"> </td> </tr> <tr> <td class="menu"><a href="/meboy.htm"> <img src="/Thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg" width="5" height="7"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table>
link is www.techagesite.com/new_page_9.2.htm also on www.techagesite.com/new_page_10.htm the cells on the boxes and links bar at the top are twice as big as they should be.
Also on page 10 which is done in css, how would i get the 2nd image in the sidebar (the cat) to sit under the first image? Was working fine in html
Sticking to JUST the code in question, you again have tables for nothing and non-semantic markup; you're using images for text, Javascript to do CSS' job, have presentation inlined in the markup, and in general a whole slew of markup for NOTHING. The first table just seems to be a list of choices... use a LIST, style it with CSS. When making your CSS do NOT inline it with style, work on it from the external stylesheet WHERE IT BELONGS! <ul class="sizesMenu"> <li class="double"> <a href="320x480.htm"> 240x320 and<br /> 320x480 </a> </li><li> <a href="free-samsung-omnia-hd-wallpapers-i8910-samsung-icon-wallpaper.htm"> 360x640 </a> </li><li> <a href="free-480x800-mobile-wallpapers.htm"> 480x800 </a> </li><li class="double"> <a href="iphone-4-wallpapers/free-iphone-4-wallpapers-640x960-iphone-wallpapers.htm"> 640x960<br /> iPhone 4 </a> </li><li> <a href="free-high-definition-mobile-phone-wallpapers-720x1280-hd.htm"> 720x1280 HD </a> </li><li> <a href="http://www.techagesite.com/free-music-wallpaper-big-music-wallpapers.htm"> Desktop </a> </li><li class="more"> <a href="linkToNoDropdownVersion.html"> More <span><!-- image replacement sandbag --></span> </a> <ul> <li> <a href="/meboy.htm"> <img src="/Thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg" width="50" height="70" alt="Angry Birds Wallpaper" /> </a> </li><li> <a href="/meboy.htm"> <img src="/Thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg" width="50" height="70" alt="Angry Birds Wallpaper" /> </a> </li> </ul> </li> </ul> Code (markup): is ROUGHLY what should be there for markup... EVERYTHING else belongs in the CSS. Set the LI to display:inline, the anchors to float:left; margin/pad the anchors as needed to make them the same size. The last LI set to display:block; and overflow:hidden; absolute position the dropdown, then set li:hover to overflow:visible. Though for the most part you've got a LOT of 'not viable for web deployment' design concepts going on there -- much of it forcing px metric fonts (or broken layout) and a fixed width. This section ALONE I'd pitch as non-viable, much less the rest of the page. Big advice -- start a rewrite by using semantic markup of everything you want on the page with a logical document structure WITHOUT thinking about your on-screen appearance! HTML is for saying what things ARE, NOT WHAT THEY LOOK LIKE! -- you don't have that, and it's something you REALLY should have before even attempting to apply style to the page. You want I can even make such a rewrite just to show you what I'm talking about.
Css just confuses me. How would the drop down menu look as just html? Might just leave them as images Im also interested in learning how to do what you were saying here https://forums.digitalpoint.com/threads/update-page-design-on-all-pages-as-a-template.2651725/ with my current page design and code. Can you just use the page as a template and insert the content in a defined area? say where it is on everypage in the main content area?