Images position

SteveH · 03-11-2012, 10:19 PM

Hello

I use CSS code to position images in a Web page, but have now decided to use an external CSS style sheet so that I can reproduce them on each of my five pages.

The images appear fine on my main page, though they look slightly right of centre instead of being centered.

Can I confirm that the CSS code I have is fine and that I simply need to reference the external CSS style sheet in all of my five Web pages, and use the following in the external style sheet to reproduce the images on each page?

Code:

<body>


 <div style="position: absolute; left: 500px; top: 600px;">
 <img src="twitter.jpg" alt="Twitter" height="44" width="39" border="0" />
 </div>


 <div style="position: absolute; left: 560px; top: 600px;">
 <img src="digg-button.jpg" alt="Digg" height="44" width="44" border="0" />
 </div>


 <div style="position: absolute; left: 620px; top: 600px;">
 <img src="delicious1.jpg" alt="Delicious" height="44" width="44" border="0" />
 </div>

<div style="position: absolute; left: 680px; top: 600px;">
 <img src="face1.jpg" alt="Facebook" height="44" width="44" border="0" />
 </div>

<div style="position: absolute; left: 740px; top: 600px;">
 <img src="email-icon.jpg" alt="Email us!" height="44" width="43" border="0" />
 </div>


</body>

Thanks for any advice.

sean3838 · 03-11-2012, 10:26 PM

Don't use absolute positioning. Add a class to all your inner divs and use float: left; margin: 0 0 0 60px;

SteveH · 03-12-2012, 01:02 AM

Hello Sean3838

Many thanks for your reply and suggestions. Do you mean something like this in an external Style Sheet?

Code:

div.img
{
  margin: 2px;
  border: 0px;
  height: auto;
  width: auto;
  float: left;
 }
	
div.img img
{
  display: inline;
  margin: 3px;
  border: 0px;
}

div.img a:hover img {border: 0px;}

<div class="img">
 <a target="_blank" href="newWindow.html"><img src="twitter.jpg" alt="Twitter" width="39" height="44" /></a></div>

<div class="img">
 <a target="_blank" href="newWindow1.html"><img src="digg-button.jpg" alt="Digg" width="44" height="44" /></a></div>

<div class="img">
 <a target="_blank" href="newWindow2.html"><img src="delicious1.jpg" alt="Delicious" width="44" height="44" /></a></div>

<div class="img">
 <a target="_blank" href="newWindows3.html"><img src="face1.jpg" alt="Facebook" width="44" height="44" /></a></div>

<div class="img">
 <a target="_blank" href="newWindows4.html"><img src="email-icon.jpg" alt="Email us!" width="43" height="44" /></a></div>

Thanks again.

sean3838 · 03-12-2012, 01:43 AM

Be a lot easier if I could see your site or a sample page you made. But here is what I mean:

Code:

<html>
<head>
</head>
<title></title>
<body>
 
 <div id="wrapper">
	<div class="img">
	<a target="_blank" href="newWindow.html"><img src="twitter.jpg" alt="Twitter" width="39" height="44" /></a></div>

	<div class="img">
	<a target="_blank" href="newWindow1.html"><img src="digg-button.jpg" alt="Digg" width="44" height="44" /></a></div>

	<div class="img">
	<a target="_blank" href="newWindow2.html"><img src="delicious1.jpg" alt="Delicious" width="44" height="44" /></a></div>

	<div class="img">
	<a target="_blank" href="newWindows3.html"><img src="face1.jpg" alt="Facebook" width="44" height="44" /></a></div>

	<div class="img">
	<a target="_blank" href="newWindows4.html"><img src="email-icon.jpg" alt="Email us!" width="43" height="44" /></a></div>
</div>

</body>
</html>

Then in your external style sheet:

Code:

	
#wrapper{margin: 0 auto;}
.img {float: left;margin: 0 0 0 60px;}

SteveH · 03-12-2012, 04:32 PM

Hello Sean

Thanks again.

The 'test' page using the script you, thankfully, posted is here:

http://proofreading4students.com/socialNet.html

I have tried to remove the border around the images using

border-style:0px; and as that didn't work I tried border-style:none; in my external style sheet, but that didn't work either.

I can see that your .img {float: left;margin: 0 0 0 20px; refers to the spacing between the images and it looks a lot neater than it did, thanks, but the images need to be centered near the bottom of the page.

Steve

Lerura · 03-13-2012, 03:40 AM

You do not remove borders by changing the border-style, but by changing the border-width.

border-width:0px; or the shorthand version border:0px; should the trick.