Search code examples
htmlcsspositioning

Difficulty tuning text placement on web page

I am having difficulty tuning the placement of text on my web page. Items on the page seem to float about and not lock down. I need them to stay static with respect to the background image.

For example, I have a div Item called "leftMenu" I want the left menu to stay approximately 20 pixels to the left of the background image. Things seemed to work until I had to center the background image. Now that the background image is centered, I seem to have lost the ability to lock down div positions with respect to the background.

When the screen is full size things look good, but when the page size is altered the leftMenu drifts all over the place. I'm currently going through a lot of trial and error using absolute and relative positioning, but I can't seem to get the right combination of settings to make the item stay put irrespective of the page size.

Page: http://107.22.173.10/ user: test2 pass: abc111

Any advice would be greatly appreciated.

Solution

  • Instead of using a big background taking a div of text and position it absolutely to the center, why not get a div that's exactly the size of the background image and center it using:

    CSS:

    html, body{
    height:100%;
    position:relative;
}


div.siteWrapper{
    background: !VALUE;/* your background*/
    padding: 0 0 0 0;  /* the space top, right, bottom, left from the edge of the bg image to the content box of the image*/
    width: !VALUE;     /* width of your background - (left + right padding)*/
    margin:100px auto; /* this will center your site horizontally and move it away from the top*/
}

    HTML:

    <body>
    <div class="siteWrapper">
        //everything in here
    </div>
</body>