Databases
StackOverflow2013
Postsdbo
POCan't center a div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan't center a div
    text
    copied!<p>I have a problem with setting up my menu for a website. The whole website is centrated whith margin: auto. By some reason the menu does not centrate because it's a div that contain links, the buttons. Each button link has a background image. This is because the images for the buttons are 315px wide and include the overlay images. For example, when the user holds over this image the image moves 105px to the left and shows the mouseover option. (View code)</p> <p>This is the .html: (don't mind the id names for the buttons, didn't feel like changing :D and yes I'm swedish)</p> <pre><code> &lt;body&gt; &lt;!--Banner--&gt; &lt;img src="/header/picture.png" /&gt; &lt;img src="/header/banner.png" /&gt; &lt;!--Pre-loads the images for menu--&gt; &lt;img src="/header/start.png" style="display: none;" /&gt; &lt;img src="/header/bestall.png" style="display: none;" /&gt; &lt;img src="/header/priser.png" style="display: none;" /&gt; &lt;img src="/header/omoss.png" style="display: none;" /&gt; &lt;img src="/header/support.png" style="display: none;" /&gt; &lt;img src="/header/filarkiv.png" style="display: none;" /&gt; &lt;!--Menu--&gt; &lt;div id="menu"&gt; &lt;a href="index.php" id="startknapp"&gt;&lt;/a&gt; &lt;a href="index.php" id="priserknapp"&gt;&lt;/a&gt; &lt;a href="index.php" id="bestallknapp"&gt;&lt;/a&gt; &lt;a href="index.php" id="omossknapp"&gt;&lt;/a&gt; &lt;a href="index.php" id="supportknapp"&gt;&lt;/a&gt; &lt;a href="index.php" id="filarkivknapp"&gt;&lt;/a&gt; &lt;img src="/header/box.png" id="box" /&gt; &lt;/div&gt; &lt;div id="content"&gt; &lt;p&gt;Hi!&lt;/p&gt; &lt;p&gt;This is one paragraph&lt;/p&gt; &lt;p&gt;And this is another.&lt;/p&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>And this is how I have set up the buttons in the css for the menu:</p> <pre><code> /*Startknappen*/ #startknapp { position: absolute; left: 0px; width: 105px; height: 35px; text-decoration: none; background-image:url(start.png); } #startknapp:hover { background-position: -105px 0; } #startknapp:active { text-decoration: none; } /*Priserknappen*/ #priserknapp { position: absolute; left: 105px; width: 105px; height: 35px; text-decoration: none; background-image:url(priser.png); } #priserknapp:hover { background-position: -105px 0; } #priserknapp:active { text-decoration: none; } ... and so on for the other buttons... </code></pre> <p>Here is some of the .css:</p> <pre><code> #html, body { top: 0px; right: 0px; bottom: 0px; left: 0px; width: 800px; height: 800px; margin: auto; } #menu { height: 35px; width: 800px; } #content { position: absolute; width: 800px; background-color: ; } </code></pre> <p>The problem now is that, as written above, the menu won't centrate. However when I do position: absolute; for #menu it does centrate. Only problem is that content then overlaps the menu, and I don't want that. I want content to start 0px after the bottom of menu. Here are some images of how it looks:</p> <p>Won't centrate: <a href="http://imageshack.us/photo/my-images/15/leftra.png" rel="nofollow">http://imageshack.us/photo/my-images/15/leftra.png</a></p> <p>Position: Absolute: <a href="http://imageshack.us/photo/my-images/443/centerh.png" rel="nofollow">http://imageshack.us/photo/my-images/443/centerh.png</a></p> <p>Hope someone can help me get this right. Thanks in advance :)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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