Resolution/Zoom Problems

[zobadof]

Hi There,

I know i've been posting a lot recently and I'm still semi-new to learning all the 'tricks of the trade' and I've got books such about CSS and HTML though I cannot find anyway to sort out resolution problems with images and things. I've got the image in the navigation bar but for some users they cannot see the logo, why is this and how can it be fixed? The website is teamshift.co.uk (only started coding it).

menu.css

.wrapper {
    width: 100%;
    height: 60px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#464646', endColorstr='#5a5a5a'); /* for IE */
    background: -moz-linear-gradient(center bottom, rgb(70, 70, 70), rgb(90, 90, 90)) repeat scroll 0% 0% transparent;
    background: -webkit-gradient(linear, center bottom, center top, from(rgb(70, 70, 70)), to(rgb(90, 90, 90)));
    border-top: 2px solid rgb(90, 90, 90);
    position: relative;
    margin-left: auto;
    margin-right: auto;

}

.container {
    width: 1000px;
    margin: 0px auto;
    position: relative;
}

.container img {
position:absolute;
top:5px;
left:1120px;
}

.menu {
    height: 60px;
    float: left;
}

div.menu {
    height: 60px;
}

div.menu a:first-child {
    border-right: 0;
    border-left: 0;
}

div.menu div {
    list-style: none outside none;
    float: left;
    height: 60px;
    text-align: center;
}

div.menu a {
    display: block;
    padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    line-height: 60px;
    -webkit-transition-property: background;
    -webkit-transition-duration: 700ms;
    -moz-transition-property: background;
    -moz-transition-duration: 700ms;
    }

div.menu a:hover {
    background: transparent none;
}

div.active a{

}


div.menu p:first
{

}

[JorgeM]

So some users probably cant see the image, because you set it to far off to the left for their screen size....

left:1120px;

Your "wrapper" div has a width of 100% so, you are not containing your content in the center of the page, which is fine if that is what you want to do. If you want to be able to service all of your visitors, you will need to determine what width of the page you want to set, OR...

allow the elements to move around the page depending on the width, but then the absolute positioning isnt going to work well in this scenario.. you have the image even past the width of your container element.

[zobadof]

How would I do the second one and make sure the image stays where it should?

[JorgeM]

So I would say that actually since you have the container with a set width and you are centering it, keep it the way it is. Just adjust the absolute positioning. Maybe position off of the right instead of the left to make it easier. It doesn't matter, just so that you don't exceed 1000 px which is the width of your container.

Try this instead...this will move it 10px from the right.

 .container img {
 position:absolute;
 top:5px;
 right:10px;
 }

As long as your visitor doesn't have a display less than 1000 you are ok.

[pixelsoul]

Good start so far, cool logo. Try this:

.wrapper {
    width: 100%;
    height: 60px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#464646', endColorstr='#5a5a5a'); /* for IE */
    background: -moz-linear-gradient(center bottom, rgb(70, 70, 70), rgb(90, 90, 90)) repeat scroll 0% 0% transparent;
    background: -webkit-gradient(linear, center bottom, center top, from(rgb(70, 70, 70)), to(rgb(90, 90, 90)));
    border-top: 2px solid rgb(90, 90, 90);
    position: relative;
    margin-left: auto;
    margin-right: auto;

}

.container {
    width: 100%;
    margin: 0px auto;
    position: relative;
}

.container img {
    position:relative;
    top:5px;
    float:right;
    padding:0 10px 0 0;
}

.menu {
    height: 60px;
    float: left;
}

div.menu {
    height: 60px;
}

div.menu a:first-child {
    border-right: 0;
    border-left: 0;
}

div.menu div {
    list-style: none outside none;
    float: left;
    height: 60px;
    text-align: center;
}

div.menu a {
    display: block;
    padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    line-height: 60px;
    -webkit-transition-property: background;
    -webkit-transition-duration: 700ms;
    -moz-transition-property: background;
    -moz-transition-duration: 700ms;
    }

div.menu a:hover {
    background: transparent none;
}

div.active a{

}


div.menu p:first
{

}

[zobadof]

Hmmm.. but now it's not sort of closer to the edge. If I moved it, would it cause the same issue?

[pixelsoul]

Oh, you were trying for a centered look for the logo and nav?

[zobadof]

No, I want the text to be somewhere in the center and then the logo to be on the right. But it's screwing up depending on resolutions.