3 Replies - 978 Views - Last Post: 28 February 2011 - 09:28 PM

#1 SashaC  Icon User is offline

  • New D.I.C Head

Reputation: 6
  • View blog
  • Posts: 37
  • Joined: 08-April 10

Graphic moves out of place when screen is resized.

Posted 28 February 2011 - 03:46 PM

Hi,
This is my first website and it's giving me a little trouble. I added a small post-it note on top of another large graphic. When I view the site in Google Chrome, the post-it appears slightly on the background (blue and off white) but it should appear in content area (white portion 1/2 inch from the top and left side). I used exact pixels to position the graphic but it still appears incorrectly. If I make the page smaller, the graphics moves to another position on the page. In Internet Explorer, the graphic does not appear at all. I'm not sure what's causing the problems I am having. Please point me in the right direction. Thanks!

My code is attached.

Is This A Good Question/Topic? 0
  • +

Replies To: Graphic moves out of place when screen is resized.

#2 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Graphic moves out of place when screen is resized.

Posted 28 February 2011 - 03:48 PM

There is no code. This is actually expected. Your web pages won't look the same in all resolutions and web browsers.
Was This Post Helpful? 0
  • +
  • -

#3 SashaC  Icon User is offline

  • New D.I.C Head

Reputation: 6
  • View blog
  • Posts: 37
  • Joined: 08-April 10

Re: Graphic moves out of place when screen is resized.

Posted 28 February 2011 - 03:56 PM

View PostSashaC, on 28 February 2011 - 03:46 PM, said:

Hi,
This is my first website and it's giving me a little trouble. I added a small post-it note on top of another large graphic. When I view the site in Google Chrome, the post-it appears slightly on the background (blue and off white) but it should appear in content area (white portion 1/2 inch from the top and left side). I used exact pixels to position the graphic but it still appears incorrectly. If I make the page smaller, the graphics moves to another position on the page. In Internet Explorer, the graphic does not appear at all. I'm not sure what's causing the problems I am having. Please point me in the right direction. Thanks!

My code is attached.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chantelle Dawson </title>
<link rel="stylesheet" href="resume.css" type="text/css"  />
</head>

<body>
<div id="wrapper">
	<div id="logo"> <h1><a href="index.html"><img  src="images/logo2.gif" width="289" height="131" alt="Chantelle Dawson " border="0" /></a></h1> 
    </div>
    
    
	<div class="nav"> <p> <a href="index.html"> <img src="images/home.gif" border="0" alt="Home"/> </a> <a href="aboutme.html"> <img src="images/aboutme.gif" border="0" alt="About Me"/></a> <a href="education.html"> <img src="images/education.gif" border="0" alt="Education"/> </a> <a href="portfolio.html"> <img src="images/portfolio.gif" border="0" alt="Portfolio"/> </a> <a href="contact.html"> <img src="images/contact.gif" border="0" alt="Contact"/> </a> </p> </div>

	<div class="content"> <a href="aboutme.html"><img id="postit" src="images/yellowpostit.jpg" width="200" height="197" alt="Hi! My name is Chantelle" /></a> <a><img id="shoe" src="images/heel3.jpg" width="798" height="563" alt="High Heel Typographic  " border="0"/></a>

</div>

<div id="footer"> <p>Copyright &copy; 2011 <a href="mailto:dawson.chantelle@yahoo.com">Chantelle Dawson </a> </p>
<p> <a href="index.html"> Home </a> |<a href="aboutme.html"> About Me </a> |<a href="education.html"> Education </a>| <a href="portfolio.html"> Portfolio </a>| <a href="contact.html"> Contact </a>   <a href="http://www.twitter.com/PINKsmartiPants" target="_blank"><img src="images/twitter.png" alt="Follow PINKsmartiPants on Twitter"/></a>  </p></div> 

</div>

</body>
</html>




/* CSS Document */


#wrapper {width: 800px;
			margin-left: auto;
			margin-right: auto;
}
logo {background-color: #fff;
	border: none;
	text-align: left;
	
}

p {background: #Fff;
}

.nav {text-align:center;
		
}

body { background-image: url('images/backgroundblue.jpg');

}

h1 {
	background-color: #fff;
	padding: 0px;
}

.content {
	background-color:#FFF;
	color: ##E20969;
	text-align: center;
			
}

#form {color:#C6C;
}

.content h1{text-align:center;
}

#footer {background-color: #fff;
			color: #f6c;
			font-size: 12px;
			text-align: center;			
}

#postit {border: none;
	position: absolute;
	top: 301px;
	right: -112;
	margin-left: 2px;
	z-index: 2;
	left: 398px;
}
#shoe {z-index:1;
}


Was This Post Helpful? 0
  • +
  • -

#4 Crimson Wings  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 13
  • View blog
  • Posts: 215
  • Joined: 11-July 09

Re: Graphic moves out of place when screen is resized.

Posted 28 February 2011 - 09:28 PM

As it was mentioned above, it is normal for your website to look messed up in different browsers. Unfortunately, browsers don't implement the same rendering engine. The only popular browsers that share a rendering engine are Chrome and Safari, so if your site looks good in Chrome or Safari it will look good in the other.

I can think on one technique you could use to attempt to achieve similar results in every browser. BUT this is a technique I know a little about and never used it myself, so use it at your own responsibility. Google CSS Reset. If you do that, make sure you read this as well.

This post has been edited by Crimson Wings: 28 February 2011 - 09:30 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1