aligning image with css

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

aconite

Thread Starter
Joined
Feb 1, 2006
Messages
210
hi,

I am trying to align the left image of the baby using css, a bit closer to the center but am having trouble, I tried using padding, margin and even margin-left but it doesn't seem to work. Below is the css, html and the image

CSS
body {
background-color: #ffffff;
font-family: "Walkway Round";
font-size: 62.5%;
color: #000000;
font-weight:normal;
}

#wrapper {
background-color:#ffffff;
height:auto;
width:750px;
margin-right:auto;
margin-left:auto;

}

#headerimage {
width:50%;
height:215px;
float:left;
}

#headerimageRight {
width:50%;
height:215px;
float:right;
}

HTML

<div id="headerimage">
<img src="images/redeye before&after together.jpg" width="298" height="215" alt="fixing_red_eye" /></div>

<div id="headerimageRight">
<img src="images/tornPhoto_before&after_together.jpg" width="298" height="215" alt="fixing_torn_photo" /></div>

thanks
 

Attachments

Joined
May 15, 2006
Messages
125
Hi aconite,

Without seeing ALL of the code, it's impossible (for me at least) to tell exactly what's going on

But... looking at the screenshot, I can see some clues

The headerimage div is left aligned as per the header logo ¶P Photo Restoration Expert

Some of your code is, I think, overkill

Misc:

files names for images
:( redeye before&after together.jpg
:) redeyeBeforeAndAfterTogether.jpg
:( tornPhoto_before&after_together.jpg
:) tornPhoto_beforeAndAfter_together.jpg

Just to illustrate how it works, I have changed the width and height of the 2nd image
from width="298" height="215"
to
width="198" height="105"
and used vertical-align: middle; in the myImage class to align them


----------

This is valid CSS and HTML

Hopefully it'll help

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-GB">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<style type="text/css">
			body {
				background-color: #FF0000;
				font-family: "Walkway Round", Arial,Verdana,Helvetica,sans-serif; ;
				font-size: 62.5%;
				color: #000000;
				font-weight:normal;
			}
			
			#wrapper {
				background-color:#FFFF00;
				height:auto;
				width:750px;
				padding:10px;
				margin-right:auto;
				margin-left:auto;
				
			}
			
			.c	{
				text-align: center ! important;
				background-color:#0000FF;
			}
			
			
			
			/* vertical-align can be top, middle or bottom */
			
			.myImage {
				vertical-align: middle;
				background-color:#FF00FF;
				padding:10px 20px 30px 40px;
			} 
			
			/* adjust padding values to suit (order: top, right, bottom, left) */
			
			
		</style>

		
		<title>	aligning image with css
		</title>
	</head>
	<body>
		<div id="wrapper">
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec in purus a dui venenatis laoreet. Integer faucibus convallis urna. 
				Maecenas iaculis justo non leo. Duis eget tortor eu dui dapibus sagittis. Integer nec diam. Maecenas tristique auctor ligula. In 
				egestas. Nunc interdum magna id felis. Sed hendrerit nunc non quam. In fringilla erat id erat. In vitae nulla congue mauris fringilla 
				iaculis. Sed gravida tellus eget purus. Sed pulvinar aliquam turpis. Curabitur metus magna, pretium ac, egestas in, bibendum sit 
				amet, pede. Proin tristique. Curabitur fringilla euismod libero. Aenean pulvinar, massa vitae sodales rutrum, nunc dui adipiscing 
				enim, in aliquam lacus urna id tellus. Quisque bibendum sollicitudin orci.
			</p>
			<p class="c">
				<img class="myImage" src="images/redeye before&after together.jpg" width="298" height="215" alt="fixing_red_eye">
				&nbsp;
				<img class="myImage" src="images/tornPhoto_before&after_together.jpg" width="198" height="105" alt="fixing_torn_photo">
			</p>
			<p>
				Aliquam vel mauris. Fusce ultrices, mi et pellentesque tincidunt, nisi risus dignissim libero, ac vulputate orci sem ut nibh. Etiam lacus dolor
				donec neque. Duis felis. Nulla enim. Donec mollis felis vitae odio. Nam ultrices ante vitae urna. Proin sit amet justo eu purus pellentesque 
				mollis. Etiam sagittis orci quis felis. Aliquam a nulla vel urna tristique auctor. Vestibulum eleifend. Pellentesque habitant morbi tristique 
				senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac 
				turpis egestas. Nulla id orci sit amet purus tempus dictum. Phasellus tincidunt.
			</p>
		</div>	
	</body>
</html>
<edit>PS I used a mix of random (and garish) background colours simply to show what's going where</edit>
 
Joined
Nov 22, 2003
Messages
6,052
since you have a set width for the area and the images are set widths as well, you can use something like this: (assume both images are 200px wide, and that there is 100px between the left edge of the left header and the left edge of the area)

#headerimage {
width:200px;
height:215px;
position:absolute;
margin-left:100px:
}

#headerimageRight {
width:200px;
height:215px;
position:absolute;
margin-left:450px;
}
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Staff online

Top