Databases
StackOverflow2013
Postsdbo
POKeeping my body and menu centered together
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKeeping my body and menu centered together
    primarykey
    data
    text
    <p>I need to center this menu so when the browser is being sized it doesn't "uncenter" with the body. I've been trying to figure this out and it has just stumped me. I need the body and menu to stay together, when the browser is being sized, and always stay centered together.</p> <p>html-</p> <pre><code>&lt;div id="logo"&gt; &lt;a href="KJ's Ski Store Home.html"&gt;&lt;img src="Ski Store Logo.png" alt="logo" height="85" width="85"/&gt;&lt;/a&gt; &lt;/div&gt; &lt;div id="nav"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="KJ's Ski Store Home.html"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt; &lt;a href="KJ's Ski Store Home.html"&gt;Store&lt;/a&gt; &lt;ul id="subnav"&gt; &lt;li&gt;&lt;a href="snowboards.html"&gt;Snowboards&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="boots.html"&gt;Boots&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="helmets.html"&gt;Helmets/Hats&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="goggles.html"&gt;Goggles&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="location.html"&gt;Location&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="location.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; div style="float: left; width: 400px; height: 400px; margin-left: 5%;"&gt; &lt;img alt="slide" src="slideshow1.jpg" name="slide" width="400" height="400"/&gt; &lt;/div&gt; &lt;div style="float: left; width: 15%;"&gt;&lt;/div&gt; &lt;div id="battle" style="float: left; width: 40%;"&gt; &lt;h1&gt;Snowboarding or Skiing&lt;/h1&gt; &lt;p&gt; "&lt;strong&gt;Snowboarding has been better than skiing since it was invented&lt;/strong&gt; and nothing has changed with that in the last, roughly, 30 years. Skiers and snowboarders get along these days, share the slopes and even ride together, but snowboarding is still a superior sport. It's mellow that you followed us into the world of freestyle riding and we're happy to share our terrain parks and half pipes with you. We even let you hit our jibs. We don't mind that skiers rode our coattails into the X Games and now even the Olympics (I'm talking freestyle skiing here.) We're totally down with you guys and gals even if you are two-plankers. Nevertheless, snowboarding will always be on top."&lt;/p&gt; &lt;h4&gt;Brad Farmer, Fuel T.V.&lt;/h4&gt; &lt;/div&gt; </code></pre> <p>CSS-</p> <pre><code>body { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 20px 50px 150px; font-size: 13px; text-align: center; } ul { text-align: left; display: inline; margin: 0; padding: 15px 4px 17px 0; list-style: none; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } ul li { font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; position: relative; padding: 15px 20px; background: #fff; cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } ul li:hover { background: #555; color: #fff; } ul li ul { padding: 0; position: absolute; top: 48px; left: 0; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } ul li ul li { background: #555; display: block; color: #fff; text-shadow: 0 -1px 0 #000; } ul li ul li:hover { background: #666; } ul li:hover ul { display: block; opacity: 1; visibility: visible; } #nav a:link{ color: #000000; } #nav a:visited{ color: #000000; } #nav a:hover{ color: #ffffff; } #nav a:active{ color: #000000 } #nav a{ text-decoration: none; } #subnav a:link{ color: #ffffff; } #subnav a:visited{ color: #ffffff; } #subnav a:hover{ color: #ffffff; } #subnav a:active{ color: #ffffff; } ul{ display: inline-flex; } #logo{ text-align: center; } #battle h1{ text-align: center; } #battle p{ text-align: center; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USKStahljr
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POKeeping my body and menu centered together
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POKeeping my body and menu centered together
      1. This table or related slice is empty.
      1. VTDownMod
    1. COdid you try margin: 0 auto; in the body css?
      singulars
      1. POKeeping my body and menu centered together
      1. USKeith
    2. COHow's this different from your last question: http://stackoverflow.com/questions/20499187/centering-my-body-to-the-menu-and-the-rest-of-the-page?
      singulars
      1. POKeeping my body and menu centered together
      1. USj08691
    3. COthe margin: 0 auto didn't work... and I edited the last question. I really needed this done, and I know that if I just posted one again it would help it get answered sooner.
      singulars
      1. POKeeping my body and menu centered together
      1. USKStahljr
 

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