page viewed in different res settings (cont'd) — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

page viewed in different res settings (cont'd)

This page's ID: 10945

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	CRO8: No, don't give up. I think the problem is that you're misunderstanding a few key issues here--if you get those down, I don't think you'll have any problems doing what you want to do. Let me pick at your code a bit and try to explain what's wrong... body { background-image:url(images/water1280.jpg); background-repeat: repeat-x; background-color: #f0f0f0; background-position: 0% 73%; background-attachment: fixed; } 1) You shouldn't be using relative values for the position--if you do this you will [b]never[/b] get everything to line up in different size windows, since the elements will be changing in relation to each other. Use absolute values, like pixels. Determine how far down the page you want the graphic to appear, and then stick with that value. [Edit: Um, forget I just said that. After further consideration, I realize that we have to go with relative positioning to get it to work in different sized windows. See my edits at the bottom for the solution...] 2) Why are you fixing the background? The background should scroll with the page. If you fix the background and look at the page in a smaller browser window, the text elements are going to scroll over the stationary background, which is not what you want. [b]Please[/b] don't give up on this one and use tables--I [b]know[/b] this can be done with CSS, and done better. I'll see what I can do with it... [Edit: Stupid UBB!] [Edit2: OK, first take a look at this [url=http://www.liminality.org/asylum/tableless/test.html]test page[/url]. It's a bit messy, and now that I look at it I don't really like the idea of an absolute value for the height (since it will scroll in smaller browser windows), but I just wanted to show you that, yes, it is possible. Go ahead, mess around with the window size and see what happens. I've got a good idea of how we can use margins to make everything relative (more or less)... I'll get back to you in a moment.] [Edit3: Just as I thought--[url=http://www.liminality.org/asylum/tableless/test2.html]it worked[/url]. Now, take a look at the source for these two examples to see how I did them, and notice the differences between the first and second versions. In the first version, I set the vertical position for each element absolutely, so they will [b]never[/b] move. However, this is not the best solution, for the reasons mentioned above. The second version positions the element relatively, but using the same starting point for each element and then adjusting the differences with margins. If you play around with this, you'll notice that everything moves together when you resize the browser window. It is even scrollbar-less in 640 x 480 ;-). I don't usually do this sort of thing--in fact, I think this is the first time I've ever actually gone and done something for someone here (as opposed to just making suggestions), but you've put a lot of effort into this and I could tell you were getting frustrated. The reason I usually don't do things like this is because I don't want to step on anyone's toes or rob them of the thrill of success. I hope you don't mind me taking the initiative here. Let me know if you have any questions.] [This message has been edited by Suho1004 (edited 04-16-2003).] [This message has been edited by Suho1004 (edited 04-16-2003).] [This message has been edited by Suho1004 (edited 04-16-2003).] [This message has been edited by Suho1004 (edited 04-16-2003).] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu