Chrome drop menu positioning problem

**coyote27** · 05-08-2006, 12:30 PM

Hello all,
Here is the script for the chrome menu, http://dynamicdrive.com/dynamicindex1/chrome/index.htm

The problem that I am having, is that when I try to position an image directly below the menu, I get a space between the menu and the image that spans 40 or so pixels. I'm using Dreamweaver to put this all together, and the problem is identical whether I use tables or just try and insert an image directly below the menu. I can't figure this out at all. Any help would be greatly appreciated.

**djr33** · 05-08-2006, 06:01 PM

Can you just link to your page?

The script itself probably isn't doing this, but something about your layout and the way the script works within it.

**coyote27** · 05-08-2006, 06:49 PM

Thanks for the reply, my page isn't up yet, so I know that makes it hard to check what I'm talking about. But one thing that I did try that was easy to duplicate for testing purposes, was take the direct code from the site here,

http://dynamicdrive.com/dynamicindex1/chrome/index.htm

along with the .css and .js files from the same location and copy/paste the code into Dreamweaver. Previewing that in all browsers shows the menu working exactly like it should. But when I do a simple "insert image" to place an image directly below the menu, I get a space of like 30-40 or so pixels before the image.

Attatching my code in a notepad file, as well as a jpeg of what it looks like.
Thanks again for taking the time to help out with this, I'm still learning and am not sure how to go about fixing this on my own.

Attachment 343
Attachment 344

**ddadmin** · 05-08-2006, 11:23 PM

Does your page contain a valid doctype, such as:

Code:

<!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" lang="en" xml:lang="en">

This should be an easy problem to solve by tweaking the CSS, though without seeing the actual source code of your page, it's virtually impossible to make any concrete suggestions...

**coyote27** · 05-09-2006, 03:09 AM

Here's the code right here, and yes it begins with the valid doctype. I haven't published the page live yet, but this is the actual code copied right out of my file. I'll try and get it published soon so that it may be easier to see what it looks like. I'm curious if there's a glaring mistake in my code that I'm just not seeing, or understanding at least. The .css and .js files are direct copies from the link supplied above.

Attachment 347

**ddadmin** · 05-09-2006, 06:14 AM

Ok, try moving the HTML for the drop down menus outside the main table itself and into open space, starting with:

Code:

<!--1st drop down menu -->                                                   
<div id="dropmenu1" class="dropmenudiv">
<a href="http://napervillemusic.com/rentmain.htm">Rental Info</a>
<a href="http://napervillemusic.com/rates.htm">Rates</a>
"
"

BTW, there seems to be a lot of unnecessary markup on your page as far as the table are concerned. They can easily be converted to DIVs based.

**coyote27** · 05-11-2006, 01:59 AM

Thanks very much for the help so far. I figured out what was causing it to space the lower image down. I had changed the width value in the chromestyle.css file to 673px instead of 100%. Placing the value back at 100% places the images exactly where I want them. Only problem now is that the menu spans the entire screen horizontally. Is there a way to get the menu to span a fixed length? Yet again, this is all trial and error for me as my knowledge base in this area is fairly young. Thanks again for all the help.

#chromemenu ul{
border: 1px solid #BBB;
width: 100%; < (HERE IS THE VALUE THAT FIXED THE PROBLEM)
background: url(chromebg.gif) center center repeat-x; /*Theme Change here*/
margin-left: 0;
padding-left: 0;
margin: 0;
float: left;
font: bold 12px Verdana;
}

Thread: Chrome drop menu positioning problem

Thread Tools

Search Thread

Chrome drop menu positioning problem

Bookmarks

Bookmarks

Posting Permissions