More Precise Aligning?

Something better than align="left"...?

Page 1 of 1

6 Replies - 1406 Views - Last Post: 02 June 2009 - 09:52 PM

#1 eZACKe  Icon User is offline

  • Garbage Collector

Reputation: 120
  • View blog
  • Posts: 1,276
  • Joined: 01-June 09

More Precise Aligning?

Post icon  Posted 02 June 2009 - 09:15 PM

I'm trying to make just a basic website about video games using HTML. I have a title on top, then I want three pictures right underneath the title.

So I just insert the pictures, and align them to the left, center, and right. It's that simple! At least I thought it was, but I guess it isn't haha.

When I run the webpage all of my pictures don't fit side by side. Though, I know they would fit if I could adjust exactly where they were. Is there a way to do that? Like, is there a way to say , "I want this picture to be 3 inches from the left, then I want this one 2 inches to the right of that, and the last one 2 inches to the right of that." Obviously you can't say inches, but I was just using that to get my point across.

Here's my code, hope it helps(everything under Hello World really means nothing so you can ignore it haha):


<html>
<head>
<title>
Video Game Central
</title>
<head>
<body bgcolor="silver" text="black">
<center>
<h1>
Video Game Central

</h1>
<img src="master.jpg" align="left"><img src="effect.jpg" align="center"><img src="gears.jpg" align="right">
</center>
<BR clear="all">
<p>
Hello World!
</P>
<p>
I like to play video games, and run track!
</p>
<h2 align="center">
My Favorite WebSites:
</h2>
<p align="center">
<a href="http://www.ign.com">IGN<a/>
</p>
<p align="center">
<a href="aboutme.html" align="center">About Me</a>
</p>
</body>
</html>



Thanks! :)

This post has been edited by eZACKe: 02 June 2009 - 09:16 PM


Is This A Good Question/Topic? 0
  • +

Replies To: More Precise Aligning?

#2 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 200
  • View blog
  • Posts: 1,561
  • Joined: 20-January 09

Re: More Precise Aligning?

Posted 02 June 2009 - 09:26 PM

Yes there is - it is called CSS - or Cascading Style Sheets.

Here you go.

HTML:
<div id="images">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
</div>


CSS (Put this just before your </head> tag):

<style>

html {
   text-align: center;}

#images {
   margin: 0 auto;}

#images img {
	 float: left;
	 margin: 5px 3px 0 0; /* Top, right, bottom, left */}

</style>


So the above will allow you to position not only the containing divs placement, but the pixels that each image are away from each other.

Let me know if you need more hlep.

--

Greg

This post has been edited by gregwhitworth: 02 June 2009 - 09:26 PM

Was This Post Helpful? 1
  • +
  • -

#3 eZACKe  Icon User is offline

  • Garbage Collector

Reputation: 120
  • View blog
  • Posts: 1,276
  • Joined: 01-June 09

Re: More Precise Aligning?

Posted 02 June 2009 - 09:35 PM

Quick question:
Where do I put the top code? You said I put the 2nd one before the </head>, do I put the first one in the same spot?

Thanks!

Edit: Never mind, figured it out. Though, there is still a slight problem. Now my heading is below the pictures. Why did this happen?

This post has been edited by eZACKe: 02 June 2009 - 09:41 PM

Was This Post Helpful? 0
  • +
  • -

#4 t2kocurek  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 10
  • Joined: 17-February 09

Re: More Precise Aligning?

Posted 02 June 2009 - 09:39 PM

Sure eZACKe. This is where that CSS comes into play. In this case I would use inline styles since the positioning will only apply to these specific images and not be a global property set for all images. Try this:
<html>
<head>
<title>
Video Game Central
</title>
<head>
<body bgcolor="silver" text="black">
<center>
<h1>
Video Game Central

</h1>
<img src="master.jpg" style="left:225px; padding-right:100px;"><img src="effect.jpg" style="padding-right:150px;"><img src="gears.jpg">
</center>
<BR clear="all">
<p>
Hello World!
</P>
<p>
I like to play video games, and run track!
</p>
<h2 align="center">
My Favorite WebSites:
</h2>
<p align="center">
<a href="http://www.ign.com">IGN<a/>
</p>
<p align="center">
<a href="aboutme.html" align="center">About Me</a>
</p>
</body>
</html>


As you see I applied the LEFT CSS property which sets how far the left edge of the element is from the parent element. See the PADDING-RIGHT CSS property is used to set the spacing of an element to the right of that element to 100px away.

BTW: 225px=3 inches/150px = 2 inches.
Was This Post Helpful? 1
  • +
  • -

#5 eZACKe  Icon User is offline

  • Garbage Collector

Reputation: 120
  • View blog
  • Posts: 1,276
  • Joined: 01-June 09

Re: More Precise Aligning?

Posted 02 June 2009 - 09:43 PM

Thanks man! That helps a lot!
Was This Post Helpful? 0
  • +
  • -

#6 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 200
  • View blog
  • Posts: 1,561
  • Joined: 20-January 09

Re: More Precise Aligning?

Posted 02 June 2009 - 09:45 PM

Quote

Where do I put the top code? You said I put the 2nd one before the </head>, do I put the first one in the same spot?


Like so:

<head>
.... head stuff ....

<style>

.... styles ....
</style>

</head>

Was This Post Helpful? 0
  • +
  • -

#7 eZACKe  Icon User is offline

  • Garbage Collector

Reputation: 120
  • View blog
  • Posts: 1,276
  • Joined: 01-June 09

Re: More Precise Aligning?

Posted 02 June 2009 - 09:52 PM

Never mind, figured it out and don't know how to delete post.

Thanks again Greg!

This post has been edited by eZACKe: 02 June 2009 - 09:54 PM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1