alias
msg:3791594 | 8:15 pm on Nov 21, 2008 (gmt 0) |
center the background on the <body>, that's the only way to make it expandable without being bound to the minimum container width. 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.
|
djmokoia
msg:3791623 | 8:51 pm on Nov 21, 2008 (gmt 0) |
I'm not sure I fully understand you. How can I centre the image if it is a property of the body tag?
I don't want the image to resize because if it does then the position of the elements will change as it resizes surely? 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...
|
swa66
msg:3791705 | 11:41 pm on Nov 21, 2008 (gmt 0) |
something like:
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 */
}
would put a door in the middle. 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;
}
|
djmokoia
msg:3799380 | 7:49 pm on Dec 3, 2008 (gmt 0) |
Thanks for your help, that has certainly helped with locating the background image however I still have some issues with placing the images over the top. 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;
}
|
swa66
msg:3799635 | 2:00 am on Dec 4, 2008 (gmt 0) |
Let's start with
Lastly I don't understand whereabouts to put this: * {
padding:0;
margin:0;
}
|
|
That's a reset of all browser default margins and paddings (they should not be there on divs, but will be on lots of other things (body, p, li, ul, ...) and will not be consistent across browsers.
The reset is used to level the playing field and get control.
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 example I gave above used a background that was centered horizontally. 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). |
|
How much is IE off ? just a few pixels ? If that's the case: IE is bad at math (some call it rounding errors). The problem with these rounding errors is that they depend on the exact size of the viewport (try to make your browser 1 pixel taller/more narrow and it flops on and off) 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).
|
djmokoia
msg:3801619 | 5:20 pm on Dec 6, 2008 (gmt 0) |
Thanks. Actually, having posted my previous response I then had a proper play around with it and figured out what I needed to do, based on your original answer. 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
|
djmokoia
msg:3857421 | 12:52 pm on Feb 25, 2009 (gmt 0) |
I managed to get this working correctly based on the above advice. However, if I change my monitor resolution to 1024x768 (it's normally 1280x800) it displays very differently firefox compared to IE. 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?
|
djmokoia
msg:3862589 | 3:03 pm on Mar 4, 2009 (gmt 0) |
No one have any suggestions on this?
Can someone please explain to me why the position of the images is changing in Firefox when I change my screen resolution? I am somewhat stumped on this and would appreciate any pointers in the right direction Thanks
|
djmokoia
msg:3862677 | 4:50 pm on Mar 4, 2009 (gmt 0) |
no worries, fixed it
|
|
