1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

aligning image with css

Discussion in 'Web Design & Development' started by aconite, Jul 10, 2007.

Thread Status:
Not open for further replies.
  1. aconite

    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
     

    Attached Files:

  2. lavazza

    lavazza

    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>
     
  3. Big-K

    Big-K

    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;
    }
     
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 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/594170

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice