Home/ Questions/Q 8218509
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T12:49:06+00:00

I have a problem with setting up my menu for a website. The whole

  • 0

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)

This is the .html: (don’t mind the id names for the buttons, didn’t feel like changing 😀 and yes I’m swedish)

    <body>
    <!--Banner-->
    <img src="/header/picture.png" />
    <img src="/header/banner.png" />

    <!--Pre-loads the images for menu-->
    <img src="/header/start.png" style="display: none;" />
    <img src="/header/bestall.png" style="display: none;" />
    <img src="/header/priser.png" style="display: none;" />
    <img src="/header/omoss.png" style="display: none;" />
    <img src="/header/support.png" style="display: none;" />
    <img src="/header/filarkiv.png" style="display: none;" />

    <!--Menu-->
    <div id="menu">
    <a href="index.php" id="startknapp"></a>
    <a href="index.php" id="priserknapp"></a>
    <a href="index.php" id="bestallknapp"></a>
    <a href="index.php" id="omossknapp"></a>
    <a href="index.php" id="supportknapp"></a>
    <a href="index.php" id="filarkivknapp"></a>
    <img src="/header/box.png" id="box" />
    </div>

    <div id="content">
    <p>Hi!</p>
    <p>This is one paragraph</p>
    <p>And this is another.</p>
    </div>
    </body>

And this is how I have set up the buttons in the css for the menu:

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

Here is some of the .css:

    #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: ;
    }

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:

Won’t centrate:
http://imageshack.us/photo/my-images/15/leftra.png

Position: Absolute:
http://imageshack.us/photo/my-images/443/centerh.png

Hope someone can help me get this right. Thanks in advance 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    hasn’t been closed, I don’t know if you haven’t closed the body tag either or just cut that off of your copy-pasting.

    Also, the style for#menu should include “position: relative” if you are setting the menu items with position absolute, that way they will be positioned relative to the menu container and not the body of the page.

    Also, I’m not sure what this code will do:

    #html, body 
    {
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        width: 800px;
        height: 800px;
        margin: auto;
    }

    You’re trying to position it centrally with a width, but then saying that it should stretch to every corner with the portion that says “top: 0; right: 0 etc”

    It would be much better to have a wrapper like such:

    HTML:

    <div id="wrapper">
    All content in here
</div>

    CSS:

    #wrapper { margin: 0 auto; width: 800px; }

    Edit: Also just noticed, nice to see someone else using Ubuntu 😉

    Edit2: It would be much better if you positioned your nav items with floats instead of “position: absolute” for more information see here

    For more information on positioning, which you might also want, see here

    • 0