Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
-
I am currently having a small issue with one of my projects. My client has requested the website be very image heavy, so a lot of the headers are images on the site.
There is a splash header at the top of the website that says "Welcome!", however in some browsers the image is off center. I cannot recreate this error, but my client claims it is happening. I have checked in over 40 browsers, and it does happen, but not in Firefox as far as I can tell.
Regardless, my question is the following: How can I achieve a position absolute effect, where the splash stays where it is, but have the rest of the content move when I zoom the page. Similar to what http://www.rikcat.com has done. When you zoom the page, only his content gets bigger, the images stay in the same position. Generally I don't go this image crazy, but unfortunatley it is a request, and something I am not all too knowledgeable of.
The website in question is http://djadele.pedrazzinidesign.ca , the html and css are as follows.
<div id="splash"></div>
#splash {
background: url(images/splash.gif) no-repeat;
height: 179px;
background-position: -105px 0;
margin-bottom: 3em;
}
I hope someone can shed some light on this issue I am having. Thanks!
James -
Hi nein,
could you please describe your problem more precisly? From my point of view, rikat.com shows exactly the same behavoir, like your site does. What do you mean by zoom? Well, if I zoom in rikat.com, the images are getting bigger as well...
Generally, if you want an element to stay at its position independently from scrolling, then you use position:fixed. But again, if you scroll rikat.com, the hole site moves.
Dave. -
Hi Dave,
I have uploaded two comparison images onto my flickr account for you to see.
This is what it looks like in most browsers: http://flickr.com/photos/21344606@N05/2313601600/
This is the error: http://flickr.com/photos/21344606@N05/2312791103/
The splash header is slightly skewed to the right,
When I say zooming I mean making the text bigger on the website, ctrl + scroll up / scroll down. But the problem is for some reason my client is using fire fox but seeing the splash header as slightly offset. I cannot quite figure out why this issue is occuring.
When I use position: fixed, the splash header goes away, maybe I should not use the image as a background image and place it in the html?
Thanks -
Can you not just make the background-position: 50% 0; ? Or is it the splash div itself that is getting skewed?
-
I did not try the 50%, I will try this. It is the background image that is skewing, not the div.
-
Hi nein,
thanks for your descriptions! Now that I know, what your problem is, the solution is very simple:
#splash {
background:url(splash00.gif) no-repeat;
height: 179px;
/*background-position: -105px 0;*/
background-position:center;
margin-bottom: 3em;
}
Here is an image of the error occuring in firefox.
That's how it looks with the fix above.
The only way to reproduce the error now, is to enlarge the text that far, that horizontal scrolling becomes necessary, see here.
Dave. -
Thanks a lot Dave! Helped me right out!
1 to 7 of 7