Forum Moderators: not2easy
I've been asked to build a site based on some designs that have been put together by a client and a graphic designer.
The site only consists of a few pages and from a web design point of view the design is very poor eg text on the far right of the page, no room for navigation links, etc but it does look pretty! Unfortunately, despite my attempts to tell the client that the design is likely to make the site extremely user unfriendly they are adamant that it must look like this.
Each page consists of a large background image, with other elements layered on top, including other images that need to be positioned quite precisely in relation to the background image. Of course I am having trouble as the images are not appearing in the same places in different browsers and I need to understand how to overcome this.
I am setting the background image as a background image of a container element rather than the body of the page to allow it to be centred depending on the screen resolution, aiming at a minimum width of 1280.
I've not had to deal with an issue such as this before as I would personally never use a background image in such a fashion when building a site.
Any suggestions or pointers of where to look would be much appreciated.
thanks
Tim
you should be able to position other related elements using both relative and absolute positioning (position:relative is required on the parent for the position:absolute to work properly on the direct children).
hope it helps.
Perhaps I haven't explained the situation properly. Imagine the background image is a house with the details (windows, etc) removed. The elements I want to overlay are the doors, windows, etc. Simply using relative and absolute positioning means the doors and windows will not be in the same places when viewed in different browsers...
body {
background-image: url(house.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: top center;
}
Would center your image on the background, showing the center part of the huse even if the viewport is smaller than the house.
So how do you position stuff over this ?
absolute positioning is your friend:
#door {
position: absolute;
height: 300px;
width: 150px;
top: 400px;
left: 50%;
margin-left: -75px /* half of the width */
background-color: red; /* or something more useful */
}
Yeah nice I hear, but how do I put a window 200px more to the right and left?
#window1 {
position: absolute;
height: 100px;
width: 100px;
top: 400px;
left: 50%;
margin-left: -375 px /* how far from the center to the left */
background-color: red; /* or something more useful */
}
#window2 {
position: absolute;
height: 100px;
width: 100px;
top: 400px;
left: 50%;
margin-left: 275 px /* how far from the center to the left */
}
The elements to put in it: just drop them in the html in any order.
Starts with a reset of padding and margins and it'll all fit in the same spot.
* {
padding:0;
margin:0;
}
Perhaps my analogy of a house was misleading, it's more like the background image is a street map and the overlaying images are particular locations.
The issue I'm having is that particular locations are correct in relation to a street in Firefox but not correct in IE (or vice versa).
I'm not sure I understand the use of margin-left. Why is this necessary? Is it better the use % for top and left and then adjust with margin-? rather than using px for top and left?
Lastly I don't understand whereabouts to put this:
* {
padding:0;
margin:0;
}
Lastly I don't understand whereabouts to put this:* {
padding:0;
margin:0;
}
I'm not sure I understand the use of margin-left. Why is this necessary? Is it better the use % for top and left and then adjust with margin-? rather than using px for top and left?
The trick used is to know that left:50% is in the middle of the page. Now to position something e.g. in the center, I use a margin-left:-Xpx with X=half the width of the element I'm positioning.
Now add more of less on that margin and you can move things about as you please.
Basically it's a poor-man's version of math: I'd rather have left:(50%-75px);, but that's not possible, so ...
The issue I'm having is that particular locations are correct in relation to a street in Firefox but not correct in IE (or vice versa).
Make sure your images tolerate this one pixel off positioning, as I know of no fix whatsoever for this.
Do you have a simple example you can post code to show the difference you get ?
If it's more than just a pixel, you can try to use conditional comments and just put it where you need it for IE independently from all the other browsers (IE just is weird at times, you can spend lots of hours trying to figure it out, or just fix the result to look nice enough not caring what the bug is).
The info you have provided has been extremely useful and I think I've got to a point where I can locate the images successfully, the slight difference between browsers is tolerable.
thanks again
Let's say I have an image that is 1150 x 707 in size set as the background using the following css:
body {
background-image: url(images/backround-image.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
padding:0;
margin:0;
}
in firefox in 1024x768 the background image starts in the immediate top left corner of the screen whereas in IE there's a gap on the left (but not the top) before the image starts.
In firefox the position of the images that are overlaid is incorrect in relation to the background when I change the resolution. In IE they stay in the correct positions (relative to the background).
I have used absolute positioning and % values to position the overlaid images and over items.
Any suggestions?
Thanks
