so, i'm not really experienced with coding, like, at all. i pretty much just fiddle and faff about until things are where i want them, looking the way i want them to. and for the most part, this has worked fine. but there are a couple of things i am still having some trouble with.
first: when i position divs by using position:absolute and adjusting the top and left values, they never actually go where they should. i measure out how many pixels each section should be from the top and from the left in order to line up with the background… but when i use those values, the sections are always off by fifty or so pixels in either direction, so my measurements are useless and i have to resort to adding and subtracting random amounts of pixels to get things lined up. does anyone know why this may be and how to fix it?
second: my divs are very… floaty. by which i mean, when you scroll the entire page (not within an individual div, but the whole page itself), the divs move around. so if you scroll down, the divs float up, and if you scroll right, the divs float left. it's not a huge issue, because they always pop right back to their original positions, but it's kind of annoying and i think it looks a little unprofessional. you can see an example of this effect on my pet bow tie's page (ignore the wonky treasure chest, i'm testing out something unrelated). again, any ideas what causes this and how to fix it?
i really appreciate any help anyone can offer.
I'm the same with coding (all the fiddling and faffing haha), but maybe this article can help with the absolute positioning issue? Err, if that isn't the issue, would you have an example of a div where these values were off?
For the floaty thing, I am not quite sure what you're referring to as the scrolling seems normal to me? (I'm using Chrome?)
i just checked on chrome, you're right, the floatiness doesn't happen there - i use safari, though, and it happens on all the profiles i make, but not on most other people's profiles so there must be something i'm doing differently.
as for the positioning, that's not the issue. i'm not trying to position things relative to another div, i am trying to position them "absolutely" (that is, relative to the top left corner of the page). so for instance, if i position something 200 from the top and 500 from the left, i would expect there to be 200 pixels between the top left corner of my div and the top of the page, and 500 pixels between the top left corner of my div and the left of the page.
i'm actually having trouble replicating the problem now, but… i swear it happens every time i'm actually trying to position stuff! i'll have the profile's background image open in my art program and i will make boxes the size i want each section to be, then i place each box on the part of the background i want it to show up, and then i use more boxes to measure the amount of space there should be above and to the left of the section. but when i code in the section using all of those numbers (the height, width, and position), it shows up too far down or right or whatever, and not by a tiny amount that could be accounted for by human error, either, but by large amounts that don't line up at all with what i measured out earlier. and yes, i am certain the image i use to test these measurements is the same size as the image i am actually using as the profile background… it's weird though, going back and doing the measurements again right now, they actually line up with the values i have in the profile, but i'm sure they didn't when i first did it! ugh this is so weird, maybe i'm just really stupid or something. :/
In that case, I hope someone else can chime in and hopefully know what the issue is! (On a side note, mind checking one of my completed profiles and see if the floatiness occurs? Maybe I can compare my code to your's if it doesn't?)
Oh yeah! What I was trying to say was since there's already codes for the page, so maybe that's why the positioning is weird? I'm not sure, but would any newly created divs have their reference point for (0,0) be the top left corner of the pet_desc (instead of the browser) since they'd be in the pet_desc div?
And for other divs that are already there like TCs or minions or pet image or the pet description itself, they might already be affected by other divs like column_2 and and ?
I'm not entirely sure myself since I sometimes have the same problem (or I feel like I sometimes have the same problem, maybe I'm just miscalculating?) and sometimes I don't and I really should just try to figure out and understand all of the positioning of things for the next profile I code lol
you might be right - i just tried adding a new div and its position was accurate to the values i put in… but then i tried doing the same to an existing div and it also showed up where it was supposed to, so i have no idea anymore.
regarding the floaty thing (there's got to be a proper name for it), i checked all your profiles and it didn't occur on any of them.
I'll have to try fiddling with positions sometime and try to figure it out!
I'm just going to call it the floaty thing since I'm still not entirely sure what it looks like haha ;;; `oohOOOH wait I just tried in it IE (can't believe I didn't think of that before) and I think I see what you're talking about. I think it might be in this code of your's maybe?
html,body{ background-color:; background-image:url(http://i.imgur.com/Oj4UEiR.png); background-position:left top; background-repeat:no-repeat; background-attachment:fixed; }
Specifically the fixed background-attachment part? (Since to me when I scroll the background moves/doesn't move so that its left corner stays fixed in the left top of the screen when you scroll yet the div's don't seem to be positioned like that hence they appear to move?) Maybe see what happens if you take that part out? (I'm not sure though but worth a try!)
oh wow, that fixes it! i never would have thought of that, thanks.
sweet it looks fixed in IE too! np, glad I could help (: