PDA

View Full Version : 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/dynamicindex1/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):


. . . 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:


<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.