how would i add a second and maybe third row in the drop down? another thing i use frontpage dont laugh, is there any way to stop the entire drop down menu being displayed during editing? it kind of gets in the way with every image in the menu being visible on screen while im in fp <table border="1" cellspacing="1" width="60" height="60"> <tr> <td width="60" height="60"><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('Graphic Design')" onmouseout="hidemenu('Graphic Design')"> <img src="Thumbs/plus.png" width="60" height="60"><br /> <table class="menu" id="Graphic Design" width="60"> <tr><td class="menu"><a href="www.techagesite.com/meboy.htm"> <img src="thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg" width="100" height="150"></td></tr> <tr><td class="menu"><a href="www.techagesite.com/meboy.htm"> <img src="thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg" width="100" height="150"></td></tr> </table> </td> </td> </tr> </table></td> </tr> </table>
My question would be what makes any of that tables, where's your images off graceful degredation, why are you still writing HTML 3.2 as if this is 1997, and why are you trying to use javascript to do CSS' job? Oh, frontpage.... oh, same user. See my post in your other thread. You might want to back away from making web pages until you can do it without a WYSIWYG -- since that does nothing but delude you into THINKING you can make a website using it.
anyone got any valuable answers to add? my answer would be because i want to i may not be very good at coding but i do what i can with what i have and get enough daily traffic to be pretty pleased with it
Well, trying to work with what you have -- there is SO much wrong it still has to be thrown out... STYLE cannot go inside TABLE and doesn't even belong in BODY either, ID cannot have spaces in it, You've got two TABLE for nothing, (particularly that outer one -- if there's only one TD it should NEVER be a table! EVEN 1997 style!), there's scripting doing CSS' job, actually CLOSE the anchors, etc, etc... Also probably not helping that you are trying to put 100px wide images inside a 60px wide table. First order of business is to clean up the HTML -- assuming that the outer container is indeed alone (part of why snippets are useless and why a link to a live copy of the site would be more useful) that's just a DIV assuming no real semantic meaning can be found... the elements inside it likely being a list. <div class="plusMenu"> <img src="Thumbs/plus.png" alt="Show Menu" width="60" height="60" /> <ul> <li> <a href="www.techagesite.com/meboy.htm"> <img src="thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg" alt="Angry Birds iPhone 4 Wallpaper" width="100" height="150" /> </a> </li><li> <a href="www.techagesite.com/meboy.htm"> <img src="thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg" alt="Angry Birds iPhone 4 Wallpaper" width="100" height="150" /> </a> </li><li> <a href="www.techagesite.com/meboy.htm"> <img src="thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg" alt="Seriously dude, DESCRIBE these images for people who can't see them, have them blocked, etc, etc..." width="100" height="150" /> </a> </li> </ul> <!-- .plusMenu --></div> Code (markup): With something like this for the CSS -- said CSS belonging either inside HEAD, or even better in an external stylesheet. .plusMenu { position:relative; overflow:hidden; width:60px; height:60px; } .plusMenu:hover { overflow:visible; } .plusMenu img { display:block; /* prevent sizing issues */ } .plusMenu ul { list-style:none; position:absolute; top:60px; left:0; width:100px; } Code (markup): No javascript needed unless you REALLY want IE6 support... Which nobody, even me one of the last holdouts support-wise, really bothers with anymore -- and even then if it's needed that's what something like csshover3.htc is for. The big trick is the DIV is set to overflow:hidden, so the dropdown/flyout isn't displayed. Making the dropdown absolute positioned means it won't move the rest of the layout around when it's shown... to show it we just change the div's overflow to visible when hovered. ... and yes, I added a third one. Lather rinse, repeat, just don't make it so tall it doesn't fit smaller screens. NOT that how you are building sites this would matter, but keep in mind dropdown menus are an accessibility disaster should you ever care about mobile/tablet/non-mouse users.
oh i almost always add alts seeing its an image based website i copied this code from another user on a forum and modified it a bit but most of the code is from the original writer of it the outer table is because it prevents the image from acting funky eg say the image is 40x40 when you move the mouse anywhere to the right of the image on the page it drops the menu down pixels being off are because of the previous image i had in place and was just testing the id was already there so i left it in and have no idea what its for what is an anchor? why cant style go in table? dont understand the div bit the td bit, dont understand that either if i put the css in the head or style sheet how do i control what position on the page it shows
how do i add the rest of the code to the modified css you put up? i know nothing about css and about adding a seccond colum?
Ok, see your questions here -- this means you have NOT learned enough HTML or CSS at this point to even be ATTEMPTING to do anything you are trying to do here. You do not have a sufficient grasp of HTML or CSS to even understand ANYTHING anyone who actually knows the first thing about building websites would try to tell you. I will TRY to explain, please, TRY and keep up. Anchor is what the A in a A tag stands for, you know, these? <a href="http://www.ewiusb.com/">EWIUSB</a> That's an 'Anchor tag'. The part about TD is that whatever you were doing was building a table, around content that IS NOT A TABLE. PROPERLY written websites use this thing called "Semantic markup" -- where the HTML says what things ARE, and the CSS says what they look like! Because steaming pile of crap idiotic nube bait like Frontpage are by defintion WYSIWYGS (a broken concept since WYS is most likely NOT what the user gets!) they generate broken presentational markup that is slow, inaccessible, impossible to maintain long term and good luck diagnosing a blasted problem with them without throwing it ALL away and starting over. Really though, if you can't figure out how to apply the code I provided, you need to learn a LOT more before I even TRY explaining this: <ul class="plusMenu"> <li> <img src="Thumbs/plus.png" alt="Show Menu 1" width="60" height="60" /> <ul> <li> <a href="www.techagesite.com/meboy.htm"> <img src="thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg" alt="Angry Birds iPhone 4 Wallpaper" /> </a> </li><li> <a href="www.techagesite.com/meboy.htm"> <img src="thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg" alt="Angry Birds iPhone 4 Wallpaper" /> </a> </li> </ul> </li><li> <img src="Thumbs/plus2.png" alt="Show Menu 2" width="60" height="60" /> <ul> <li> <a href="www.techagesite.com/meboy.htm"> <img src="thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg" alt="Angry Birds iPhone 4 Wallpaper" /> </a> </li><li> <a href="www.techagesite.com/meboy.htm"> <img src="thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg" alt="Angry Birds iPhone 4 Wallpaper" /> </a> </li> </ul> </li> </ul> Code (markup): ... and this in the external stylesheet: .plusMenu { list-style:none; height:60px; } .plusMenu li, .plusMenu img { float:left; width:60px; height:60px; } .plusMenu li { position:relative; overflow:hidden; } .plusMenu li:hover { overflow:visible; } .plusMenu ul { list-style:none; position:absolute; top:60px; left:0; width:100px; } .plusMenu ul img { width:100px; height:150px; } Code (markup): Just add more outer-most LI to add more columns. I cannot put it simpler than that. You want to start doing this and understanding it, you're going to have to break down and actually LEARN HTML and CSS, NOT dragging stuff around in some stupid useless crippled WYSIWYG.