AnyLink CSS Menu

**Heresiarch** · 07-04-2012, 03:47 PM

Hi all. I'm using a menu created with AnyLink CSS Menu (

http://www.dynamicdrive.com/dynamici...anylinkcss.htm

)

I'm using the one identified as "Demo #4" on that web page. I'm trying to center the whole thing. I added
;display: block;margin-left: auto;margin-right: auto
as part of the inline style for the IMG element (that worked), but when I add
;margin-left: auto;margin-right: auto
to the outer DIV, it still remains on the left side. I also tried that with the inner DIV and the UL (the innermost block element) with no success. Any ideas?

**jscheuer1** · 07-04-2012, 04:52 PM

A div by default is 100% width. So it probably is centered. If you give it a width, say the width of the image, that should work.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

**Heresiarch** · 07-04-2012, 06:07 PM

I tried with width 160px, with and without explicit centering. I uploaded to here:

http://fortheresy.webs.com/ztest.htm

Sorry for posting in the wrong forum.

**Heresiarch** · 07-04-2012, 11:05 PM

I also tried 30%. It kept it left aligned and stretched out the width to fill 30%.

**jscheuer1** · 07-05-2012, 12:27 AM

Don't try to position the drop down. The script does that. Position the trigger. In this case that's the p element (addition highlighted):

Code:

 . . . smenu.init("anchorclass")
</script>
</head><body>
<p style="width: 160px; margin: auto;" class="anchorclass" rel="submenu4" data-image="menu.png" data-overimage="menu.png">
<img src="menu.png" style="border-width:0        ;display:block;margin-left: auto;margin-right: auto            " /><br style="clear:both" /></p>
<div id="submenu4" class="anylinkcsscols" style="background: #FEEBAB; width:160px;margin-left: auto;margin-right: auto">
<div class="column" style="width:16 . . .

The way you had it, the trigger was default width. Like for a div, for a p that's 100%, so actually the drop down was perfectly positioned.

But a p is a poor choice. In this case a div would be better.

I'd go with:

Code:

<div style="width: 160px; margin: auto;" class="anchorclass" rel="submenu4" data-image="menu.png" data-overimage="menu.png">
<img src="menu.png" style="border-width: 0; display: block;" /></div>
<div id="submenu4" class="anylinkcsscols" style="background: #feebab; width: 140px;">
<div class="column">
<ul>
<li><a href="index.html"     >Home       </a></li>
<li><a href="preseason.htm"  >Pre Season </a></li>
<li><a href="prebowl.htm"    >Pre Bowl   </a></li>
<li><a href="conferences.htm">Conferences</a></li>
<li><a href="bowls.htm"      >Bowls      </a></li>
<li><a href="weekly.htm"     >Weekly     </a></li>
<li><a href="judgement.htm"  >Judgement  </a></li>
<li><a href="archives.htm"   >Archives   </a></li></ul></div></div>

**Heresiarch** · 07-05-2012, 01:11 AM

Thanks a bunch, John.

Thread: AnyLink CSS Menu

Thread Tools

Search Thread

AnyLink CSS Menu

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions