4
Contributors
21
Replies
22
Views
6 Years
Discussion Span
Last Post by Arkinder
0

You're positioning some of these elements the wrong way. To get it to center you will have to fix that. I'll make the changes red.
First we need to remove the margin-top from navigation .

div#navigation {
    z-index: 1;
}

And place it in the body rule.

body {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 12px;
    margin-top: 450px;
}

Alright, I'm going to just use one of these as an example, but you need to change them all.

div#accessories {
    float: left;
    margin-left: 470px;
    margin-top: -290px;
    position: absolute;
}

Needs to be:

div#accessories {
    float: left;
    left: 470px;
    top: -290px;
    position: absolute;
}

When using position: absolute; You can use the top and left properties to move elements on a page. This move them around a little. Add 8 pixels to the left for each element. So the above rule would be.

div#accessories {
    float: left;
    left: 478px;
    top: -290px;
    position: absolute;
}

This will shove a few things to the top of the page. Don't worry, it's supposed to happen.

div#navigation {
    position: relative; /* This will move the images back down and is what allows the properties below to work */
    width: 1135px; /* A set width is needed. Unfortunately this number is just what works for my screen. You could also use 94em. */
    margin: 0 auto; /* This is what's actually centering the images */
    z-index: 1;
}

Regards
Arkinder

0

Thanks Arkinder! I will try with your code :)

Edited by alanlee9898: n/a

0

Try changing your CSS code in the file style_company.css at line 6 from:

img.bg {
    background: none repeat scroll center center transparent;
    height: 100%;
    left: 0;
    min-height: 900px;
    min-width: 1024px;
    position: fixed;
    top: 0;
    width: 100%;

to

img.bg {
    background: none repeat scroll center center transparent;
    height: 100%;
    left: 0;
    min-height: 900px;
    min-width: 1024px;
    position: absolute;
    top: 0;
    width: 100%;

L.

Edited by luceduce: n/a

0

The stealbar is stick with the background now, but it has the white gap on the right, how can it solved? Thanks!

Edited by alanlee9898: n/a

0

Remove width: 100%; from this CSS rule.

div#navigation {
    height: 350px;
    position: absolute;
    text-align: center;
    width: 100%;
}

Regards
Arkinder

0

It's still have the white gap on the right, when you view the browser in smaller size, it has the white gap on the right.

Anyone know how to fix? :(

0

Oh,

Remove this:

img.bg {
  left: 50%;
  margin-left: -512px;
}

And change min-width: 1024px; to 101em. I suggest using the em unit for min-height too.

img.bg {
  min-height: 74em;
  min-width: 101em;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0pt;
  left: 0pt;
}

Regards
Arkinder

0

Since you're able to use position: fixed; with this page you could probably just remove the min-height .

Regards
Arkinder

0

If I remove the min-height, there will be white box on the footer.

It will effect bigger screen size too?

0

Sorry, I really should look at it before saying anything. Try this:

img.bg {
    display: block;
    left: 0;
    min-height: 100%;
    min-width: 100%;
    position: fixed;
    top: 0;
    width: 100%;
}

Regards
Arkinder

0

Tried already, its stretching the background image when you resize your browser.

I guess I have to separate the logo with the background. That's the only option I have now.

0

its stretching the background image when you resize your browser.

Well yeah. What else is it supposed to do when the original image is only 1341x768?

Regards
Arkinder

0

Yeah, if it were bigger then it wouldn't have to stretch on larger screen resolutions. The solution I provided causes it to be 100% on 1341x768 and down, but the image just isn't large enough to compensate for anything larger without stretching.

Regards
Arkinder

0

hey why dont you use auto margin!
it can bring image at the center of the screen

0

hey why dont you use auto margin!
it can bring image at the center of the screen

Because that problem was already solved by the second post in this thread, and was followed by two more questions. Please read threads before posting in them.

Regards
Arkinder

0

Thanks for the help, I have separated the logo with the background. Fixing the image to the center of the page. :)

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.