Image disappearing off to right of webpage

markst33 · 30-04-2013 09:13AM #1

Hi there,

i am designing a website for myself and coding using HTML. I am doing this on a 21"iMac at home and it looks fine, yet when I view the site on a monitor in work the image on the right top is disappearing off to the edge of the page as is the slide show.

I have included the code I am using below along with the section of the stylesheet. Can some tell me what I can do to prevent this from happening please.

<head>
<div id="apDiv2"><img src="D200.png" width="200" height="210" /></div>
</head>

#apDiv2 {
position:absolute;
width:230px
height:310px;
z-index:2;
left: 1350px;
top: 5px;

Would percentage values be better and if so how do I use them ?

Thanks in advance.

Mark.

smash · 30-04-2013 09:24AM

You're setting it to "left: 1350px;" so on a lot of screen it's going to be off the edge.

markst33 · 30-04-2013 09:26AM

So how do I make it appear at the right edge of all monitors ? It looks fine on the imac

Kenny Logins · 30-04-2013 09:41AM

markst33 wrote: »

So how do I make it appear at the right edge of all monitors ? It looks fine on the imac

Not everybody uses the same screen...

Not sure if this works, but have you tried right: 0px ?

smash · 30-04-2013 09:54AM

Kenny Logins wrote: »

Not everybody uses the same screen...

Not sure if this works, but have you tried right: 0px ?

This

markst33 · 30-04-2013 10:31AM

Nope, that did not work. I think I need to use a percentage value so that no matter the monitor size the image is always going to be x% to the right of the screen/page

markst33 · 30-04-2013 10:41AM

Think I got it.

#apDiv2 {
position:absolute;
width:230px
height:310px;
z-index:2;
left: 70%;
top: 5px;
}

Kenny Logins · 30-04-2013 10:47AM

markst33 wrote: »

Think I got it.

#apDiv2 {
position:absolute;
width:230px
height:310px;
z-index:2;
left: 70%;
top: 5px;
}

Hmmm, 70% of what? The browser window?

markst33 · 30-04-2013 10:51AM

Yes, now to check it for definite I will have to see how it displays at home. But the logic is to have div containing the image starting to display 70% across the page from the left side.

I'll let you know how it works out

smash · 30-04-2013 10:53AM

If you want it to always appear on the right, use "right: value;" not left!

Kenny Logins · 30-04-2013 10:59AM

markst33 wrote: »

Yes, now to check it for definite I will have to see how it displays at home. But the logic is to have div containing the image starting to display 70% across the page from the left side.

I'll let you know how it works out

You don't need to go home, just resize the browser window..

Kenny Logins · 30-04-2013 10:59AM

BTW, 'right' works for me in Chrome and Firefox but not IE9.

smash · 30-04-2013 11:08AM

Kenny Logins wrote: »

BTW, 'right' works for me in Chrome and Firefox but not IE9.

Have you set

HTML, Body {width:100%;}

smash · 30-04-2013 11:10AM

And why is the Div in the head tag?

smash · 30-04-2013 11:14AM

Works perfect:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="viewport" content="width=device-width">
    <style>
    HTML, Body {
    	width: 100%;
    	padding: 0px;
    	margin: 0px;
    }
    #apDiv2 {
	position: absolute;
	width: 230px;
	height: 310px;
	background-color: #ccc;
	z-index: 2;
	right: 20px;
	top: 5px;
	}
    </style>
</head>
<body>

<div id="apDiv2">Image goes here</div>

</body>
</html>

yoyo · 30-04-2013 11:16AM

If using absolute positions, as mentioned above right: 0; should put the image at the rightmost of the previous relative container, presumably your wrapper? To make the development easier make your page a fixed width (unless fluid is necessary) as it will make your design targeting for all resolutions easier. Your head tag contents shouldn't have any html code like p, div, span, table, etc. That stuff goes in between the <body></body> tags

Nick

Image disappearing off to right of webpage

Comments