Topic: page viewed in different res settings (cont'd)

This belongs here

I know I can use CSS to position all 3 images on my page- for now I just want to position my bg image so that is does not move when viewed in lower screen resolutions. Is this possible and if so- what am I mising in my code? I think I have everything covered . . . I dunno.

Thanks.
CRO8

Hi, CRO8. How are you?

Well, I am trying to understand your question.
Would you please explain more?
I am curious about it.
Thanks.

Hiroki Kozai

OK, so you just want to make sure that your background image does not move when viewd in say 800 x 600, right?

Yep, you can do that using CSS or tables. You pick. I think that I told you how to do it with tables so I will tell you how to do it with CSS.

In your CSS:

body {

    background-image:url(images/water1280.jpg);

    background-repeat: no-repeat;

    background-color: #f0f0f0;

    background-position: 0% 73%;

    background-attachment: fixed;

    background-position: absolute;

}

Make your image smaller. You have one BIG image there. 1280px wide??!!?? That will make it look like shit at 800 x 600.
If this is a "seemless" texture, then you are going to have no problem. Find the point to where the image repeats and use that.
Does that make sense?

Then in your code, change this: "background-repeat: no-repeat;" to "background-repeat : repeat-y;"
This will make your image repeat horizontaly.

Also, you have "background-position:" set twice. The second one is going to over rul the first one.
I am not sure that you are going to have to use this: "background-attachment: fixed;" I am not sure though.

Hope that helps.


Later,

C:\


~Binary is best~

Hey Hiroki!

Yeah- Let me explain a bit . . . I used CSS to position my water image so that runs all the way across the screen, from left to right- see link I posted. I designed it in 1024x768 res screen setting. OK. Now, when I change my screen resolution setting to 800x600, the CSS positioned image moves up the screen, while the images in the table remain in place. I have a feeling I've done everything I can and may have to simply put the image as a bg in a table. My code:

body {
background-image:url(images/water1280.jpg);
background-repeat: no-repeat;
background-color: #f0f0f0;
background-position: 0% 73%;
background-attachment: fixed;
background-position: absolute;
}

Am I missing anything?

Thanks.
CRO8

hey CPrompt- I think we posted at the same time. I changed to repeat-x like you said and will decrease the size of the image! Will it help in keeping the bg image positioned when resolution settings change?

Thanks.
CRO8



[This message has been edited by CRO8 (edited 03-31-2003).]

Thanks for your reply.
Well, now I am trying to figure out...
Hmm....


Hiroki Kozai

CRO8, I think that you may have to align the image to the botton of the page also.
My fiancee is at school tonight so I can mess around with it some and post it for you if you like. I *think* I will have time to do it. Not sure until I get home though.

I was fighting with it the other night, but I didn't spend much time with it. I might be able to figure something out for you.

Oh yeah, do you have the image that is smaller than what you used? If not, I have some seamless textures that I can use for an example.

Later,

C:\


~Binary is best~

[This message has been edited by CPrompt (edited 03-31-2003).]

When I look at the page the "contact" gif overlaps the water image at 1024*768 maximised (but not when the window is just 1-2 pixels smaller). I haven't time to look at your code, but this might be something you wanna look at. (win98/IE6)

Ok I am back. At work now so I cannot resize he image- any effort is appreciated

quisja- thanks I will look into it.

thanks again.
CRO8

I think that you are going to have a lot of problems getting this to work (then again I may be making it harder than what it really is)

The *big* problem that I can forsee is that like quisja said, when you resize the browser, you're going to have an overlap of the two images. Make sense.

I am going to search for a script that I have that may be able to help out but I don't know.

Later,

C:\


~Binary is best~

I am fine with keeping the orange title and contact images in the table. Its just the bg image I want to use CSS with. I as well will look online . . .

Thanks.
CRO8

I typed in CSS in google and found this link. According to the page, both length and percentage units are relative to the screen resolution, hence my bg image location alters to fit the page. I think I am out of luck using CSS and will place the image in the bg of a table- which I am already using in the document. But I am still interested in what CPrompt, quisja, and Hiroki find out!

Thanks.
CRO8



[This message has been edited by CRO8 (edited 04-01-2003).]

You may still run into problems. That is keeping the image to the bottom without your "Contact" and "Title" images overlapping in smaller resoultions.

I hate to say this but. . . you may have to use frames.

ducks and runs away quickly

Later,

C:\


~Binary is best~

Frames, huh? I will try table bg then frames and will post my progress.

Thanks CPrompt and everyone else

CRO8

[This message has been edited by CRO8 (edited 04-02-2003).]

I have to say that I am still too confused by the question to even attempt to answer.

I have the feeling the answer may actually be quite simple, but I can't really say...

OK DL.

I want to position an image that spans the width of my webpage. Simply look at the link I provide in the first post in this thread. No white default borders on left and right ends of image. Thats what I want it to look like *exactly*. BUT, when I resize my window- the CSS positioned image moves up while the table images (interactive print photo, contact) remain in place.

Question: How can I still achieve this *exact* look- but keeping everything from moving when browser is either resized or resolution changes.

CRO8

I think I may still be a bit confused, but I'll take a stab at it...

First of all, you do realize that it is not the background image that is moving, but everything else, right? The background image is fixed, so it is always going to be in the same spot.

What I don't understand is why you are trying to do it this way. If you want to keep everything together, why don't you just either a) put it all in the background (ie, make it one single graphic and then put that as the background... would be kind of huge, though) or b) put it all in the foreground (ie, set the water as the background for an absolutely positioned div and then position the text absolutely around that). It's not like you're going to be able to put any text on top of that anyway, right?

Of course, if you really wanted to do it this way, the way to go about it would be to absolutely position the (fixed) background image and then use CSS (not tables, that's not what they're for) to absolutely position the text graphics. You need to make sure everything is positioned with top and left, otherwise you're going to have things moving around. The top left corner of the screen is always 0,0, so things positioned absolutely from top left will always be in the same spot (even though they may look like they're moving down the page). The point is that all of the elements need to have the same reference point if you want their positions relative to each other to stay the same. Did that make sense?

Maybe I'm misuderstanding you, but this doesn't strike me as a very difficult problem to solve. You just seem to be going about it in a very difficult way. Apologies if I have misunderstood.





www.liminality.org

quote:

---

it is not the background image that is moving, but everything else, right? The background image is fixed, so it is always going to be in the same spot.

---

When I make the window smaller I can see the bg water image moving closer to the top of the screen- that is why I assumed it was the bg image that was moving and not the table.

Also, keep in mind that the words will be hyperlinks so I will need them to be in the foreground. I will dive back into my dhtml book and position all elements (contact and menu images) absolutely. I will repost with my progress.

Thanks.
CRO8

you see the image "move" because the screen is getting smaller...it is positioned in relation to the browser window....so it has to adjust.

But the other elements are actually moving around.

Suho is on the right track, I imagine, though I'm still confused and I think you are definately making this more complicated for yourself than it should be.

OK. I will go with SuHo's sugestion and report back.

Thanks.
CRO8

Could the 984 px wide graphic be the problem?

^--Quick answer: no.

CSS to the rescue.

Thanks all
CRO8

ahhh, there ya go.

Now, just a quicl question - what is your target resolution here? I'm at 1280 and get a horizontal scroll bar still...

Yeah DL- its a bit large. I plan on designing it based on 800x600 as most of my target audience will have older computers. I plan on shortening the image!

Thanks again
CRO8

Hmm... but if you do it this way you're going to run into a problem if the browser window is not the exact size you designed for (and I mean to the pixel): if the browser window is too small, you're going to get a scroll bar, but if it's too large you're going to get white space after the image ends. Would it be possible to use a repeating image? It could repeat every 600 pixels or so, it doesn't really matter--as long as it repeats. Then you could use this as a repeating background for the div (hmm... you're using spans, ok) and make the div (whatever) stretch to fit the screen.

OK I'm listening Suho . . . Let me hammer out a few pages and report back- that way we have more to talk about.

new CSS Like I mentioned, my priority is to design for 800x600 audience- most of my clients are small mom and pop shops. I must admit i feel like I am cheating not using any tables! All div tags . . . I hope I do not have much trouble with browser capability. Maybe i will incorporate a browser detection script . . . hmmm.

I like Suho's suggestion of making the water a bg image within the div tag (and yes, I changed from span to correct div! ) So tonight I will decrease water image to around 600px and repeat it in the div bg.
Thanks!
CRO8

[This message has been edited by CRO8 (edited 04-11-2003).]

It will probably be a challenge to get the image to repeat smoothly, but I'm sure you'll come up with something. I'm looking forward to seeing the results (I'm going to be away for the weekend, but I'll check back on Monday).

Following Suho's suggestion, I am working on trying to cut up my large white bg image and repeating it- but having trouble here. I am basically trying to put a bg property within my div tag so it looks like this. Code is:

#absolute_white {
position: absolute; top: 199px; left:0px;
background-image: url(images/white.gif);
background-repeat: repeat-x;
}

According to my CSS book this shuold work. hmmm.

Thanks.
CRO8



[This message has been edited by CRO8 (edited 04-12-2003).]

hmmmmmm. Just thnking. Maybe I can oly do a a repeating bg image in the body and not in a <div> tag? hmmmmm.

Hmmm.... sorry I didn't get back to you on this sooner, CRO8.

First off, the white image you're calling in the first example doesn't seem to exist. Secondly, you might want to specify the width of the div at 100%. Right now you have no width specified, which might cause a problem. Also, as far as I know, you need quotes for url("images/white.gif"). Any one of those things (or a combination of them) may be causing your problems.

You could, as you mentioned, just make it a page (body) background. That would look something like this:

background-image: url("images/water.jpg");

     background-position: 0px 300px; //or however far down you want the graphic to appear

     background-repeat: repeat-x;

This might be easier, since you may have problems getting the div the right width. If you did it this way it would extend from one end of the screen to the other, and you wouldn't have to worry about a horizontal scrollbar.

Thanks Suho- yeah I uploaded the image and put quotes around the url, as well as set div width=100%. Still doesn't work. My only hesitation to put it as a bg image is that when the window is resized, the bg image doesn't remain fixed. I think the last ditch effort will be to use a bg image in a table width= 100%. I think that?s the ticket.

I don't know man. I am stumped. Thanks for the assistance though.

CRO8

[This message has been edited by CRO8 (edited 04-16-2003).]

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 never 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.

Please don't give up on this one and use tables--I know 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 test page. 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--it worked. 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 never 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).]

I am speechless Let me dig in and give feedback!

First of all, I hope you had a wonderful weekend- I did not do too much- did some jogging, worked on the computer. . . . thinking how to solve this challenge

Oh man! No, I do not mind you doing it for me- thanks for taking the time to think this through- I learned a lot from your example and will look towards CSS as the first alternative in designing for my clients. Man, that div tag is a savior.

Link 1
1. Using px instead of % to set the bg. (absolute, not relative measurements so images are set according to page, not to each other)
2. Forget fixed background- its not what I need. Image will not scroll with page
3. You used px for top and % for left. As page gets smaller, it fits to page horizontally- not vertically.

Link 2

1. All images are relative (%) to each other. Before I had the bg as relative (%) but my images absolute (px) so it was my bg that was resizing while the other images were remaining constant!
2. Margins were used so when the window is resized, the images will move relative to the page, but will never overlap. Correct? But . . .

How did you determine the margin-top: -163px and margin-top: 55px ?

Thanks!
CRO8



[This message has been edited by CRO8 (edited 04-17-2003).]

No problem... glad I could help. And if that was enough to turn you on to CSS, then it was worth it.

quote:

---

How did you determine the margin-top: -163px and margin-top: 55px?

---

Heh... oh, that. It was a very complex and scientific process. I just fiddled around with the numbers until everything lined up.

"Scientific process"- that?s funny, I think most designers/developers are the same way! i am psyched this works without using tables. But getting back to margins, I am a bit confused how it can be a negative number. I think by definition, margins are the space surrounding an object, whether text or image (correct?).

Could you briefly explain how -163 margin helps the title?

Thanks again.
CRO8

Ah, negative margins. Yes, those confused me at first, too. My first exposure to the idea was a centering technique at BlueRobot. I must admit that I didn't really stop to think about it at the time; it was just another way to position elements. Since then, though, I have thought about it some more and have come to terms with what at first appears to be a paradoxical concept.

First off, your conception of margins is perfectly logical. Looking at the CSS Box Model, it would appear that the margin would always be positive (or at least zero). The margin specs do briefly mention that margins may be negative, but they don't really go into the implications of this.

This is the way I think of it, and maybe it will help you. Look at the box model again. There are four areas: the content, padding, the border, and the margins. The content obviously can't be negative, because then the box wouldn't exist. The padding determines how much space there is between the content and the border, so it would make no sense for that to be negative either. The border, technically, can be considered a third "space," but it is usually invisible at zero pixels or a visible line, and I've never actually seen anyone use it for spacing purposes. For most people, the border is where the "box" officially ends, and the margin controls the amount of space between it and surrounding elements.

All of that was pretty straightforward, and I'm sure you won't have a problem understanding it, but it's necessary to understand how the box model works to get a grip on margins. Now that we know that margins control the spacing between our element and surrounding elements, though, it should be easier to see where the negative margins come in. Put simply, the margins determine where the edge (the border) of the box starts. If I want a box to appear further down, I give it a positive top margin. If, however, I want the box to appear further up on the page, I give it a negative top margin. This same principal is applied at BlueRobot to achieve horizontal centering.

If you want, try turning off (commenting out) the top margins and see what happens. You'll notice that the two text elements appear at the same vertical position (for what it's worth, I would have expected them to appear at the top of the background image; I'm not sure why they appear somewhere in the middle, but it doesn't really matter as long as its consistent). Logically, if you want one to go up and the other to go down, you're going to need to use negative margins for one and positive margins for the other.

Not sure if this explanation makes any sense, but I gave it my best shot. This is how I understand negative margins, at least. Margins weren't originally intended to be used in this way, but sometimes you need to use tools in different ways to get the desired results.

OK. I definitely understand the concept of margins in general and how it can be set positively. I took out the margins in the contact image- when I resized the browser window- that image overlapped the water image. I guess positive margin set an invisible area that keep the image from "touching" other images. Correct?

I am still playing around with negative margin theory, but am confident that a few practice pages will make me understand it better! . . . . *1/2 hour later* . . .got it! You set everything relative 70%, then played with the margins. Applying negative margin to the title because it is above the water and positive margin for the contact because it is below the water! Yup! I think the more I play with it the better I will get at applying this same practice to other scenarios.

Thanks again Suho. Whew! Good stuff. I will work on it and repost later this weekend. . . . main page where I still need to cut down the water image size+ interactive page.

CRO8

[This message has been edited by CRO8 (edited 04-18-2003).]

quote:

---

You set everything relative 70%, then played with the margins. Applying negative margin to the title because it is above the water and positive margin for the contact because it is below the water!

---

Yup, that's exactly it. I guess I should've just said that from the start instead of going into a long-winded explanation, huh? Well, as long as you understand what's going on now, it's all good. I'm sure you'll get the hang of it very quickly with a little practice.

Have fun putting the rest of the site together, and if you get stuck on something drop it in here, and we'll see what we can do.

Thanks Suho.