1 Replies - 497 Views - Last Post: 28 April 2013 - 06:41 PM

#1 tembe  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 27-April 13

positioning images: so it look right on all screens

Posted 27 April 2013 - 05:21 AM

Hello everybody, first of all excuse me for my english, its not my native launge..
Im doing a school report and i've gotten stuck on this.. im wondering if somebody
can please help me out..
The basic idea is to get 9 squares to alignh perfectly on maximum screen and dont
move out of context if you minimalise the screen..
I've gotten so far but cant seem to figure out how to make it work.. when i minimalise
now everything gets out of order..
Please help me out


<HTML>
<HEAD>
<title>website.html</title>	
	<STYLE>
#squareone{
	background-image: url("immage/squareone.png");
    background-repeat: no-repeat;
	float: left;
	margin-left: 260px;
	width: 20%;
	margin-top:50px;
	clear: both;
}
#squaretwo{
    background-image: url("immage/squaretwo.png");
	background-repeat: no-repeat;
	width: 20%;
	float: left;
	margin-top:50px;
}
#squarethree{
	background-image: url("immage/squarethree.png");
	background-repeat: no-repeat;
    margin-top:50px;
    width: 35%;
    float: left;
}
#squarefoor{
	background-image: url("immage/squarefoor.png");
	background-repeat: no-repeat;
	float: left;
	margin-left: 260px;
	width: 20%;
	margin-top: 50;
	clear: both;
}
#squarefive{
	background-image: url("immage/squarefive.png");
	background-repeat: no-repeat;
	width: 20%;
	float: left;
	margin-top: 50px;
}
#squaresix{
	background-image: url("immage/squaresix.png");
	background-repeat: no-repeat;
	margin-top: 50px;
	width: 35%;
	float: left;
}
#squareseven{
	background-image: url("immage/squareseven.png");
	background-repeat: no-repeat;
	float: left;
	margin-left: 260px;
	width: 20%;
	margin-top: 50;
    clear: both;
}
#squareeight{
	background-image: url("immage/squareeight.png");
	background-repeat: no-repeat;
	width: 20%;
	float: left;
	margin-top: 50px;
}
#squarenine{
	background-image: url("immage/squarenine.png");
	background-repeat: no-repeat;
	margin-top: 50px;
	width: 35%;
	float: left;
}
	</STYLE>
</HEAD>
<BODY bgcolor="#000000">
   
    <div id="squareone"><img src="immage/squareone.png"></div>
    <div id="squaretwo"><img src="immage/squaretwo.png"></div>
    <div id="squarethree"><img src="immage/squarethree.png"></div>
    <div id="squarefoor"><img src="immage/squarefoor.png"></div>
    <div id="squarefive"><img src="immage/squarefive.png"></div>
    <div id="squaresix"><img src="immage/squaresix.png"></div>
    <div id="squareseven"><img src="immage/squareseven.png"></div>
    <div id="squareeight"><img src="immage/squareeight.png"></div>
    <div id="squarenine"><img src="immage/squarenine.png"></div>                            

</BODY>
</HTML>



Is This A Good Question/Topic? 0
  • +

Replies To: positioning images: so it look right on all screens

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4188
  • View blog
  • Posts: 11,857
  • Joined: 18-April 07

Re: positioning images: so it look right on all screens

Posted 28 April 2013 - 06:41 PM

Have you considered something like this... http://jsfiddle.net/5kERP/

Here we have the nine boxes all lined up stretching across the screen. Of course you can remove the body padding and margins etc to get the boxes to stretch all the way. But as you can see resizing the window will resize the boxes too but keep them in line. If you don't want the boxes to resize you can give them a width using pixels instead of percentages like I have done in the example.

:)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1