Resized browser moving images around

Hi,

I’m sure this has been answered a million times, and apologies for that.
But I don’t know where to even start looking to figure out this problem.
I’ve managed (after all day today) to get images to place as I want them on my site using a css stylesheet.
I’ve designed the site to be optimised for 1024*768, and the images are sitting nicely in the browser (IE, Firefox, Opera) when the browser is maximised.
However, when I resize the browser the images start shifting relative to one another.
I’d like to be able to keep the images in place so that when you resize the browser window instead of the images moving they stay put abd the user has to scroll to find them.
I hope this makes sense.
I’d appreciate any help at all as I’m a complete noob and I’m trying to help a friend get their site looking nice and funky.
If this is so basic a question that it provokes screams and rants of “RTFM” then so be it, but my brain is dead now and even a hint at what I need to do to resolve this would be greatly appreciated.

Thanks

Maybe some code could help. This sounds like you need posistion absolute or float (probably not float) maybe even fixed. You need to play around with those three and see if it works any better. It took me a long time for my site to be completely posistioned correctly.
HTMLGuy

Thanks for the reply htmlguy,

I’ve fiddled with those position settings, and still no luck.
The only ones that will give me what I need are “position: absolute” or “position: relative”.
Here’s a copy of the code I’m using, again any pointers would be greatly appreciated.
I’m trying to use css stylesheets for all my image placement, so the code in the stylesheet for one of the images (both are identical just different pics and positions) is -

img.bobby {
	position: absolute;
	top: 125px;
	left: 150px;
	}
img.jane {
	position: absolute;
	top: 350px;
	right: 150px;
	}

The corresponding html code I’m using is -

<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/1024.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>
<img src="images/bobby.jpg" width="418" height="200" class="bobby">
<img src="images/jane.jpg" width="418" height="200" class="jane">
</p>
</body>

I’ve a feeling I’m making a rudimentary mistake here, but I have no idea what it could be.
Thanks in advance to anyone who can shed some light on this for me.

Hmmm…
This is stopping me in my tracks also. The only thing I can think of is that you could make a div to surround both of them, and float those. Also if you’ve run out of ideas you could try

body {
margin: 0px;
padding: 0px;
}

img.bobby {
position: absolute;
top: 125px;
left: 150px;
}

img.jane {
position: absolute;
top: 350px;
right: 150px;
}

div#imgs {
width: x;
border: x;
position: absolute;
top: x;
left: x;
}

HTMLGuy

Tables? The obvious (and heretical) solution.

Basically, I think that unless your are pretty sure that everyone that visit the site use a 1024x728 resolution, your mistake is precisly that: designing only for 1024x728.

I would be better if you have designed your site for 800x600, for a start, or if you use liquid design. Liquid design is based on using percentages and relative measure units instead of px or other fixed measure units. In this way, the design adapts to the viewport or space available.

Hi,

Thanks for all the suggestions.
I’ve played around with the code a bit and I’ve half-solved the problem.
Instead of the code for img.jane being


img.jane {
position: absolute;
top: 350px;
[B]right[/B]: 150px;
}

I’ve changed it to


img.jane {
position: absolute;
top: 20%;
[B]left[/B]: 40%;
}

This matches the img.bobby code and means the “Jane” picture doesn’t move off the screen when the browser is resized horizontally.

There is still a problem with the images on the page overlapping when the browser is resized vertically.
For some reason it’s always the “Jane” picture that overlaps the “Bobby” picture.

Thanks htmlguy for the tip pn using DIV, but it doesn’t seem to have helped, probably I’m not using it right!
I’ve definetly got tables as a last resort. But I’d rather get this thing working in CSS first.
Thanks molona for the % tip, as you can see I’ve used it and it seems to have made a difference. I’m planning to create a few stylesheets for the different screen resolutions people use, I found a Java applet that will do that apparently.
Which all sounds very adventurous considering I can’t even get one stylesheet to work properly!
Thanks again, and if you have any other suggestions I’d like to hear them.

p.s.
I’m hoping to get it so that the images won’t move on the page at all, but at this stage if they didn’t overlap I’d be happy.

woohoo!

It seems to be ok now.
The left value helped.
And I reverted to the px value to place things exactly rather than relatively.
Thanks a million for all the input.
Here’s the final code.


img.bobby {
	border-style: outset;
	border-color:#3399FF;
	position: absolute;
	top: 150px;
	left: 45px;
		}
img.jane {
	border-style: outset;
	border-color:#3399FF;
	position: absolute;
	top: 375px;
	left: 450px;
		}

Thanks again, I’ll post a link to the page when I’m finished so you can see what all the fuss was about.

Hi,

I’ve put the firstpage of the website live, and it’s linking to the old site.
It’s - http://www.lacticburn.com
As you can see I haven’t managed to sort out the images moving when the browser is resized horizontally.
Plus the text at the bottom squishes up when you resize this way too.
But all in all I’m happy enough with it.
I haven’t manage to get the javascript working that assigns a different stylesheet depending on the screen resolution of the person viewing the page.
The css script is made from a template that comes with Dreamweaver, so there’s alot of redundant stuff there that I’ll get rid of wen I’ve finished the rest of the site and decide I don’t need it anymore.
I’ve used the

<p>&nbsp;</p>

thing to space the elements vertically on the page.
Like I say, I’m happy enough with the outcome, but I would like to resolve a few of the issues I’ve mentioned - images moving when resizing horizontally, image placement horizontally, text wrapping when resized horizontally.
Any input would be greatly appreciated, or even just a general pointer on what I can do to improve my coding of the page.
And thanks again for the input earlier, as you can see I’ve used some of it, and all of it was a help in getting my head around this thing they call cascading style sheets!

Do you know what the end page should look like? The thing is that it is really hard for me to give you a specific solution if I don’t know the effect I am looking for.

I normally draw a draft first, using photoshop or any graphic program, and when I have placed all the items and I know what I want, then I code. So if you have a jpg of what you want, post it and I will try to guide you through the process.

Hi molona,

I’m quiet happy with the design at the moment, I know it’s not amazing or anything but the guy I’m doing it for is really happy.
What I’d like to do is solve the issue of the image of “Jane” sliding around and out of position relative to the image of “Bobby” when the browser resizes.
There is also the issue of the text at the bottom of the screen wrapping when the browser is made really small.
I’m really interested to learn more about “Liquid Design” that you mentioned earlier, is there anywhere I can learn about it? Or book I can get?
Thanks in advance.

Well, if you are going to use liquid design then things are bound to move around. Liquid design is, to put it basically, using relative measure units (such as ex, em, %) instead of fixed units (like px). That means that the text and the layout will adapt to the size of the screen (=things move around)

Now, it is easier to create a layout that will work on a 800x600 resolution (you should consider a work space of 770x580 due to the scrollbars) and then using liquid design to expand it for higher resolutions.

You only have two choices for what you want to do:

1.- using the min-width property. It is a CSS2 property. It is well understood for all the browsers that follow w3C standards (opera, mozilla). That means that IE will screw up.


<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr" lang="en">
<head>
	<title>Example</title>

<link rel="stylesheet" type="text/css" media="all" href="stylesheet.css" />

<style>
html, body {
width: 100%;
min-width: 780px;
width:expression(document.body.clientWidth < 800? "800px": "auto" );
}
</style>

This solution uses the DOM to check the browser’s width and then set the width. The expression() method is only understood by IE, so that should work.

You could also use what it’s called the underscore hack:


<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr" lang="en">
<head>
	<title>Example</title>

<link rel="stylesheet" type="text/css" media="all" href="stylesheet.css" />

<style>
html, body {
width: 100%;
min-width: 780px;
_width: 780px;
}
</style>

Underscored properties are only understood by IE

You can also opt for what it’s called the “holly hack”. Since it is quite long to explain, I will give you a link to read it yourself.

http://www.webreference.com/programming/min-width/2.html

2- Change stylesheet according to screen resolution, although this is only a partial solution since, if the user minimize the window, everything will wrap and move.
You do need a little bit of Javascript to do this, and you need to take into consideration that a 20% (aprox) of users set javascript.

There are various style sheet switchers if you look for them. (sorry, got bored of writing :))

Hi molona,

Thanks for the quick reply, and I’ll give those suggestions a try.
That looks like what I’m looking for.
When I redesign the other pages on this site, I’ll do it for a 800*600res.
Saturday night, so I’m going to drink some beer and watch Pop Idol! funfunfun!
I’ll let you know how I get on with your suggestions.

Take care.

Hi molona,

That’s worked great, I’ve used both bits of code and tested in IE6, Firefox, & Opera.
Thanks for all the input.
I’ve got plenty of experimenting to do now.

You and all of us. This is a neverending story :wink:

Just be aware of one thing. If you use the expression() method, remember to include this line in the <head> section of your page, but place the rest of your style rules in an external document, or at least place it at the very end of your style sheet rules, because any rule under this method will be invalidated.

You might try this :

leftimage
{
float:left
}

the image to the right of “leftimage” should be glued to the right side of it.