Databases
StackOverflow2013
Postsdbo
POTrying to center a dynamic width jquery menu
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTrying to center a dynamic width jquery menu
    primarykey
    data
    text
    <p>I have a menu built with jquery from apycom.com that I am trying to center. The menu items are from a cms and dynamically created when the page loads. So this means that the menu isn't a fixed width. I have tried several methods using just css, but without having a width set for the menu, they don't want to work.</p> <p>I have found some information that leads me to believe that there may be a way to do it with javascript.</p> <p>Is there is a way to dynamically set the width of the div element around the menu and then set the left and right margins to auto to center the menu?</p> <p>If there is a better way to accomplish this, I am open to ideas.</p> <p>Thanks in advance Bjorn </p> <p>Here is a sample of what I have thus far.</p> <p>I have already tried using 'margin: 0 auto;' but without a width setting that doesn't work. Because the menu is created by looping over the menu items available from the cms, I don't know the width of the menu.</p> <p>I've tried using 'display: inline-block;' as well, and that get's me to a point that the block space the menu takes up is only the width of the menu. Now I just need to be able to center that block. I thought that there might be a way that once the menu has been created and the width is then known that you could then apply the margin settings. </p> <p>Maybe similar to the way jquery is able to apply and change style settings on the fly.</p> <pre><code>&lt;div class="top_navigation_bar"&gt; &lt;div id="menu"&gt; &lt;ul class="menu"&gt; &lt;li&gt;&lt;a class="parent" href="/en/"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="parent" href="/en/web-design"&gt;&lt;span&gt;Web Design&lt;/span&gt;&lt;/a&gt; &lt;div&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="/en/design-packages"&gt;&lt;span&gt;Design Packages&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/en/website-maintenance"&gt;&lt;span&gt;Website Maintenance&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/en/redesign-website"&gt;&lt;span&gt;Redesign Website&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/en/design-fundamentals"&gt;&lt;span&gt;Design Fundamentals&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/en/design-elements"&gt;&lt;span&gt;Design Key Elements&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt;&lt;a class="parent" href="/en/website-business-solutions"&gt;&lt;span&gt;Business Solutions&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="parent" href="/en/internet-marketing"&gt;&lt;span&gt;Internet Marketing&lt;/span&gt;&lt;/a&gt; &lt;div&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="/en/small-business-marketing"&gt;&lt;span&gt;Small Business Marketing&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/en/leveraging-the-internet"&gt;&lt;span&gt;Leveraging the Internet&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt;&lt;a class="parent" href="/en/doing-business"&gt;&lt;span&gt;About Us&lt;/span&gt;&lt;/a&gt; &lt;div&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="/en/about"&gt;&lt;span&gt;Design Team&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt;&lt;a class="parent" href="/en/blog"&gt;&lt;span&gt;Blog&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="parent" href="/en/contact-us"&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="last"&gt;&lt;a href="/en/faq"&gt;&lt;span&gt;FAQ&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p> </p> <pre><code>.top_navigation_bar { height: 46px; padding-top: 4px; background-color: #3a8658; } div#menu { height: 46px; padding-left: 24px; background: url(/site_media/template_images/images/left.png) no-repeat; _background: url(/site_media/template_images/images/left.gif) no-repeat; width:auto; } div#menu ul { margin: 0; padding: 0; list-style: none; float: left; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USbmeyer71
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POTrying to center a dynamic width jquery menu
      1. This table or related slice is empty.
      1. VTUpMod
    1. CO@bmeyer71 You could have commented on my answer, so I got notified before. Just a tip for you getting faster answers. Check my edits.
      singulars
      1. POTrying to center a dynamic width jquery menu
      1. USDave
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload