miCRoSCoPiC^eaRthLinG 0 Report post Posted January 27, 2007 Hey guys, I'm helping out a friend in designing a site for his business and got stuck with JS/CSS Dropdown menu. Searching around I found one of the easiest to implement scripts at Dynamic Drive. I managed to implement the script partially, i.e. got the top menu showing up. Looked good so far. Here's the screenshot: After defining the menu divs, you're supposed to call the script that performs the dropdown action using a code like this: <script type="text/javascript">cssdropdown.startchrome("name_of_main_menu_div");</script> When I call the function, my page layout gets totally garbled and the dropdown function never works. Here's how it looks like... Do the web-design pros out here have an idea why it's getting messed up like this ? The example layout can be viewed at: http://forums.xisto.com/no_longer_exists/ Also attached along with this post is a zip containing the site files so far. Any help will be greatly appreciated. Cheers, m^e Site Files: Share this post Link to post Share on other sites
pyost 0 Report post Posted January 27, 2007 There are just two things that need to be fixed, both in the index.html file. First of all, let's take a look at the header. Over there, you load the JavaScript file that contains the necessary function. You used the following code: <script type="text/javascript" src="js/chrome.js"> However, this way, the text that goes after (including a big part of the HTML code) is inside the <script> tag and considered JavaScript. That's why you need to close the tag in the header:<script type="text/javascript" src="js/chrome.js"></script> OK, so we've got the whole page being displayed, but it's still not working. Why? Another JavaScript problem, except now it's about calling the function. After the menu, you did it like this:<!-- <script type="text/javascript">cssdropdown.startchrome("chromemenu");</script> --> As you probably know, <!-- and --> are used to indicate comments or code that will not be displayed/executed. By removing these, you get a fully functional menu <script type="text/javascript">cssdropdown.startchrome("chromemenu");</script> There is one more thing, though. I'm sure you didn't put those comments without a reason - yes they should be around there, but like this:<script type="text/javascript"><!--cssdropdown.startchrome("chromemenu");--></script> We have to do this in order to deal with browsers that don't support JavaScript. Be careful, the code must be just like this, with a new line for each element, otherwise it would again be a comment, if you put it like this:<script type="text/javascript"><!-- cssdropdown.startchrome("chromemenu"); --></script> Since the starting and ending point for the comment are alone and in separate lines, a JavaScript browser will ignore them because those are not JS commands. Older browsers will comment the JS function, because they don't recognize the <script> tags. Share this post Link to post Share on other sites
..::FoH::..Adm.HiDdEn 0 Report post Posted January 27, 2007 Hey, Post here the CSS script Share this post Link to post Share on other sites
pyost 0 Report post Posted January 27, 2007 You have in the file attached with the first post, but the problem is (I believe) already solved Share this post Link to post Share on other sites
TavoxPeru 0 Report post Posted January 28, 2007 Great job pyost, first i try directly the code and nothing works, after make the corrections you give it works perfectly. Now, if you plan to validate your website to be xhtml 1.1 you need to remove the comment tags because if you dont your page do not pass the validation process and also, if you plan to be a valid xhtml 1.0 then you need to do some little modifications to conform the validation. The first modification you need to perform is to declare correctly the DOCTYPE because it is not correctly typed, you need to change this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN https://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd xmlns="https://w3.org/1999/xhtml/;to this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; <html xmlns="https://w3.org/1999/xhtml/;" lang="en" xml:lang="en">BTW, m^e thanks for your code, i will modify it to use on another website, but dont worry, i will only use your page structure because is very simple and clean, not your data Best regards, Share this post Link to post Share on other sites
miCRoSCoPiC^eaRthLinG 0 Report post Posted January 30, 2007 Damn guys - that was such a silly blunder and got fixed in one go Thanks to all of you... However, I'll be back with more questions soon.As of now, there's an issue with the site - do you know of any way to fix the footer below ? What I mean is that, if I stuff in a lot of content in the Center column, it expands below and covers up the footer. What's the CSS trick, that'll make it move down along with the content ?? Share this post Link to post Share on other sites
pyost 0 Report post Posted January 30, 2007 Ugh.. The way you created the layout is a bit confusing I am sure the problem can be easily solved if you used floats for the sidebar. This way, however, I cannot think of a solution. Share this post Link to post Share on other sites
miCRoSCoPiC^eaRthLinG 0 Report post Posted January 30, 2007 Hmmm.. what's the float story ?? Any way I can modify my css and make the sidebars float instead?? Share this post Link to post Share on other sites
pyost 0 Report post Posted January 30, 2007 Take a look at this page for more information concerning positioning your sidebars with float:left and float:right properties: http://forums.xisto.com/no_longer_exists/ When you do so, you will need to add clear:both to your footer in order for it to be at the end of all the columns. Share this post Link to post Share on other sites
miCRoSCoPiC^eaRthLinG 0 Report post Posted January 30, 2007 I got the 3 column layout from one of the CSS Tutorial sites and the biggest advantage of my layout is that the Center column comes up first. That is a MUST if you're concerned about SE-Optimization of your pages. The layout you've shown makes the two side columns come up first. Crawlers don't like that kinda sites Otherwise it'd have been a good layout. Any alternatives ??? Share this post Link to post Share on other sites
Markymark2 0 Report post Posted January 30, 2007 Well an old trick would be to make a div with the content in that you want to be searched..make it first in positoning then make it hidden...but I hear that some search engines penalise you for doing this.. Share this post Link to post Share on other sites
iGuest 3 Report post Posted May 24, 2008 css textbox Need Help With JS/CSS Dropdown Menu Css textboxt input (textfield) style - examples - - http://forums.xisto.com/no_longer_exists/ -reply by chester Share this post Link to post Share on other sites
