mathias Posted January 8, 2007 Share Posted January 8, 2007 Hi. This is the code for a html site with a simple menu I got the code for at some CSS-site. I use Dreamweaver. When I type this into the code area, and press 'Refresh', I don't see the menu at the 'Design'-mode. But when I press 'Preview in browser', I see can see it. But I'll need to see it in the 'Design'-mode in Dreamweaver too. Anyone know why I can't see it? Thank you! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title></head><style type="text/css">/*Credits: Dynamic Drive CSS Library *//*URL: http://www.dynamicdrive.com/style/ */.suckertreemenu ul{margin: 0;padding: 0;list-style-type: none;}/*Top level list items*/.suckertreemenu ul li{position: relative;display: inline;float: left;background-color: #F3F3F3; /*overall menu background color*/}/*Top level menu link items style*/.suckertreemenu ul li a{display: block;width: 90px; /*Width of top level menu link items*/padding: 1px 8px;border: 1px solid black;border-left-width: 0;text-decoration: none;color: navy;} /*1st sub level menu*/.suckertreemenu ul li ul{left: 0;position: absolute;top: 1em; /* no need to change, as true value set by script */display: block;visibility: hidden;}/*Sub level menu list items (undo style from Top level List Items)*/.suckertreemenu ul li ul li{display: list-item;float: none;}/*All subsequent sub menu levels offset after 1st level sub menu */.suckertreemenu ul li ul li ul{ left: 159px; /* no need to change, as true value set by script */top: 0;}/* Sub level menu links style */.suckertreemenu ul li ul li a{display: block;width: 160px; /*width of sub menu levels*/color: navy;text-decoration: none;padding: 1px 5px;border: 1px solid #ccc;}.suckertreemenu ul li a:hover{background-color: black;color: white;}/*Background image for top level menu list links */.suckertreemenu .mainfoldericon{background: #F3F3F3 url(media/arrow-down.gif) no-repeat center right;}/*Background image for subsequent level menu list links */.suckertreemenu .subfoldericon{background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;}* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/padding-top: 1em;} /* Holly Hack for IE \*/* html .suckertreemenu ul li { float: left; height: 1%; }* html .suckertreemenu ul li a { height: 1%; }/* End */</style><script type="text/javascript">//SuckerTree Horizontal Menu (Sept 14th, 06)//By Dynamic Drive: http://www.dynamicdrive.com/style/var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commasfunction buildsubmenus_horizontal(){for (var i=0; i<menuids.length; i++){ var ultags=document.getElementById(menuids).getElementsByTagName("ul") for (var t=0; t<ultags.length; t++){ if (ultags[t].parentNode.parentNode.id==menuids){ //if this is a first level submenu ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon" } else{ //else if this is a sub level menu (ul) ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon" } ultags[t].parentNode.onmouseover=function(){ this.getElementsByTagName("ul")[0].style.visibility="visible" } ultags[t].parentNode.onmouseout=function(){ this.getElementsByTagName("ul")[0].style.visibility="hidden" } } }}if (window.addEventListener)window.addEventListener("load", buildsubmenus_horizontal, false)else if (window.attachEvent)window.attachEvent("onload", buildsubmenus_horizontal)</script><div class="suckertreemenu"><ul id="treemenu1"><li><a href="#" style="border-left: 1px solid black">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Folder 1</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul></li><li><a href="#">Item 3</a></li><li><a href="#">Folder 2</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Folder 2.1</a> <ul> <li><a href="#">Sub Item 2.1.1</a></li> <li><a href="#">Sub Item 2.1.2</a></li> <li><a href="#">Sub Item 2.1.3</a></li> <li><a href="#">Sub Item 2.1.4</a></li> </ul> </li></ul></a></li><li><a href="#">Item 4</a></li></ul><br style="clear: left;" /></div><body></body></html> Link to comment Share on other sites More sharing options...
AnonymousX Posted January 8, 2007 Share Posted January 8, 2007 It's a script. You won't be able to see the sub-menu's in the design view of Dreamweaver. The only place that you can see the sub-menu in Dreamweaver is in the code. If you switch to code view, you can see that the words you see in the design view are probably the ones found in the <ul></ul> tags, and that the words you can't see in design view are those that you can't see in design view. The <ul></ul> tags are the "topic" or "titles" and the <li></li> are the submenu's for those. Works something similar to this.<ul>People-------------------------->This is the Topic or Title<li>Administration</li><li>Staff</li>--------------------------->Sub Menu's for this Title<li>Maintenance</li></ul><ul>Sports--------------------------->This is the Topic or Title<li>Football</li><li>Basketball</li>-------------->Sub Menu's for that Title<li>Baseball</li></ul>And so on and so on. You don't need to be able to see it in the design view. You have to do that part in the code view as far as I know. If I'm wrong somebody please correct me, but I hope this helps you some. Link to comment Share on other sites More sharing options...
mathias Posted January 8, 2007 Author Share Posted January 8, 2007 But I can't see ANYTHING in the design view with that code. Why is that? If it's not visible in the design view, I can't move the menu exactly where I want it to be!EDIT: Well, let's say I can't view the menu in the design view. And I want to move my menu just a little bit down, and some centimeters to the right. How do I do this in Dreamweaver? I've heard you can move objects (like the menu) around like you want to, but I've never figured it out. And I am not talking about the <img align="right"> tag or anything. I want to drag my menu around on the design screen. How do I do this. Link to comment Share on other sites More sharing options...
Skemcin Posted January 8, 2007 Share Posted January 8, 2007 Design Mode has very limiting support for CSS. I love Dreamweaver and use it EVERY day, extensively. But I NEVER use Design Mode and I never will - for any editor for that matter. Since an internal Preview Window only interprets the code the way the software is programmed to, and not how an actual web browser would, you will always experience restrictions. I would strongly recommend getting used to the code (Code Mode) and move forward with having the page you are working on opened in your preferred browser. Since you should never be editing a live web page, there is no harm done working and saving code in Dreamweaver and then refreshing the file in your web browser - just have both applications open and flip back and forth between them. In short, there is no solution to your problem unless you want to make your web page as dumb as your average WYSIWYG editor's preview window. Link to comment Share on other sites More sharing options...
mathias Posted January 8, 2007 Author Share Posted January 8, 2007 Ok, thank you for that great reply. I've learned alot. Actually, I just downloaded Dreamweaver. I've always written the code in NotePad. But can you tell me how I can allign the menu? I want it to be placed on the top. (Central). The code is on the top of the page.Thank you again! Link to comment Share on other sites More sharing options...
Kevin M Posted January 8, 2007 Share Posted January 8, 2007 Don't know if this has anything to do with the menu. There are a few mistakes in your code. First off, the CSS should be in the <head> section, and possibly the JavaScript depending on how it's used. Also, the text you want to be shown on the page should be in the <body> section, it's currently floating in the midddle of nowhere.Maybe I'm wrong, but that's how most documents are. Link to comment Share on other sites More sharing options...
mathias Posted January 8, 2007 Author Share Posted January 8, 2007 No, that's correct. I just pasted it all in too fast. Thank you. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now