PDA

View Full Version : Chromestyle CSS help please



nrvus19
08-04-2008, 06:21 PM
1) Script Title: Positioning issue with css/script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

3) Describe problem: I am having a problem positioning the dropdown for a menu item i am working on. It would seem that the dropdown is relative to the black arrow which indicates a menu is available. This sends my dropdown list to the right of the actual mouseover target area. I have changed the 'ul' to my own image and it has lost all of the properties which the original seemed to hold. if I attempt to include a mouseover image it will also show up to the right of the original.

I have replaced the black down arrow with a transparent gif in attempt to correct the positioning.

Is there a way I can get this thing to dropdown immediately below the text rather than off to the right?

http://northjerseycustoms.com/indexDIV.htm
Thanks.

ddadmin
08-05-2008, 05:43 AM
Most of the positioning problems with the drop down menus can be solved by making sure the HTML for the drop down DIVs themselves is outside any container tag on the page other than the BODY. So in your case, try moving all the drop down DIVs to the bottom of your page, just above the "</body>" tag:


<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://#m/">Part 1</a>
<a href="http://#">Part 2</a>

<a href="http://#">Part 3</a> </div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

</body>

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice: http://www.dynamicdrive.com/notice.htm

nrvus19
08-05-2008, 08:35 PM
Yikes, sorry about that, will see that it gets amended.

Also tried to move the DIV tags but the positioning is still not moving.
Thank you for the response.

Also, Ive noticed the second item in the dropdown menu does not adhere to the attributes like the rest do...

ddadmin
08-06-2008, 07:28 AM
The drop down menu now tries to position itself correctly, but since the anchor link you've defined for it is "out of place", so will the position of the drop down menu. In your source, the anchor link for the menu is defined as:


<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="#" rel="dropmenu1"></a></li>
</ul>
</div>

This won't work, as you're basically defining a blank anchor link, and expecting the script to know that this anchor actually should match up with the image link somewhere above it. Instead of the above, remove it, and try something like the below instead:


<table style="width: 760px" cellspacing="0" cellpadding="0" id="chromemenu">
<tr>
<td><a href="index.htm">
<img alt="" src="nav07/home.gif" width="81" height="34" id="img1" class="style2" onMouseOut="FP_swapImgRestore()" onMouseOver="FP_swapImg(1,1,/*id*/'img1',/*url*/'nav07/homedown.gif')" /></a></td>
<td><a href="about_us.htm" rel="dropmenu1">
<img alt="" src="nav07/aboutus.gif" width="85" height="34" id="img2" class="style2" onMouseOut="FP_swapImgRestore()" onMouseOver="FP_swapImg(1,1,/*id*/'img2',/*url*/'nav07/aboutusdown.gif')" /></a></td>
<td><a href="our_bikes.htm">
<img alt="" src="nav07/ourbikes.gif" width="90" height="34" id="img3" class="style2" onMouseOut="FP_swapImgRestore()" onMouseOver="FP_swapImg(1,1,/*id*/'img3',/*url*/'nav07/ourbikesdown.gif')"></a></td>
<td>

Or if that doesn't work, what you really want is a drop down menu that can be easily associated with any link on the page, such as one of your image links. Try Anylink CSS Menu (http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm).

nrvus19
08-06-2008, 03:44 PM
ah yes, Anylink CSS Menu is exactly what i needed.
Many thanks again.
Definitely a big help.