Free Web Developer Tools
Advanced Search

Thread: Help with Left Aligning Image

    March 17th, 2013, 04:33 PM
    #1
  1. No Profile Picture
    acbugs
    Registered User
    Devshed Newbie (0 - 499 posts)
    Join Date
    Mar 2013
    Posts
    1
    Rep Power
    0

    Help with Left Aligning Image

    Thanks everyone!
    With the help of some generous tips from stackoverflow.com, I received several solutions to my problem. I had to use a negative margin value on the image. Thanks again!

    Hi,
    I need some help with left aligning an image using CSS. I've tried several different things including padding, margin, etc. Would you mind taking a look at this to see what I am doing wrong?

    The image I am trying to left align is called homepage_students_smaller.png.

    Just as a reference, this is what the mock up of the page I am working on currently looks like.
    http://www.nwsccmoodledemo.com/newnwscc/

    I want to align the image to the edge of the red border so that there is no space between the border and the edge of the image.

    Thanks for any assistance!

    Code:
    <style type="text/css"> /*CSS RESET*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 	margin: 0; 	padding: 0; 	border: 0; 	outline: 0; 	font-weight: inherit; 	font-style: inherit; 	font-size: 100%; 	vertical-align: baseline; } /* remember to define focus styles! */ :focus { 	outline: 0; } body { 	line-height: 1; 	color: black; 	background: white; } ol, ul { 	list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { 	border-collapse: separate; 	border-spacing: 0; } caption, th, td { 	text-align: left; 	font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { 	content: ""; } blockquote, q { 	quotes: "" ""; }  strong { 	font-weight:bold;color:#0289ce; }  em { 	font-style:oblique; }  p { 	margin:15px 0; 	line-height:25px; }  .aligncenter, div.aligncenter { 	display: block; 	margin-left: auto; 	margin-right: auto; } .alignleft { 	float: left; } .alignright { 	float: right; }  h1 {font-size:180%;} h2 {font-size:150%;} h3 {font-size:125%;} h4 {font-size:100%;} h5 {font-size:90%;} h6 {font-size:80%;}  a:link {color:#0289ce;} a:hover {color:#f64274;}  /*End RESET - Begin Full Width CSS*/ 	body { 		color:#DFE4ED; 		background:url(images/home_frame_925.gif) repeat top center; 		color:#2D1F16; 		font:13px Helvetica,  Arial,  sans-serif 		 	}  	.wrap { 		position:relative; 		padding:0 0 0 0; 		margin:0 auto auto auto; 		width:900px; 		clear:both; 	} 	 	a:link{ 		text-decoration:none; 		color:#000033;		 		} 		 	a:hover { 		color:#0066CC;  	} 	 	a:visited { 		color:#0066CC: 	} 	 	#header, #footer { 		width:925px; 		float:center; 		padding:0 0; 		height:103px; 		margin:auto; 	} 	 		 	#header { 		background:#698DA4; 	} 	 	#header .logo { 		float:left; 		/*width:400px;*/ 		padding:0 0 0 0; 		margin:0; 		/*clear:both;*/ 	} 	 	#header p { 		float:right; 		width:400px; 		margin:0; 	} 	 	#content { 		padding:30px 0px 0px 0px; 		clear:both; 		margin:0 auto auto auto; 		 	} 	 	#footer { 		background:#698DA4; 		width:925px; 		text-align:right; 		/**position:fixed;**/ 		bottom:0; 		float:center: 		z-index:999999; 		padding:20px 0; 	} 	 	#footer2 { 		 		background:#D2D8E8; 		width:925px; 		text-align:center; 		float:center; 		/**position:fixed;**/ 		bottom:0; 		z-index:999999; 		margin:auto; 	 	} 	 	#footer a { 		color:#fff; 	} 	 </style> </head>  <body bgcolor="#DFE4ED">  <div id="header"> <!--	<div class="wrap">-->     	<div class="logo">         	<a href="http://www.nwscc.edu">                       <p><img src="images/banner2.png" alt="NW-SCC Homepage Banner" /></p>             </a></div> <!--    </div>--> </div>           <div class="wrap"> 	<div id="content">                <table cellpadding="0" cellspacing="0">                <tr style="float:left;"><td style="vertical-align:top;horizontal-align:left;padding:0px;margin:0 0 0 0;"> 	    	    	   <img src="images/homepage_students_smaller.png" style="float:left;margin:0 0 0 0;border:0 none;padding:0;"><br><br>  	                  <table style="margin:auto"><tr><td style="vertical-align:top;horizontal-align:left;padding:5px"><a href=http://www.facebook.com/pages/Northwest-Shoals-Community-College/105177256819"><img src="images/facebooknew.png" width="63px" height="58px"></td></a></td><td style="vertical-align:top;padding:5px"><a href="http://twitter.com/#!/NWSCC"><img src="images/twitternew.png" width="63px" height="54px"></a></td><td style="vertical-align:middle;padding:0px"><a href="http://www.youtube.com/user/OfficialNWSCC"><img src="images/youtubenew.png" width="100px" height="51px"></a></td>               </tr></table>        </td>                <td style="padding:0px"> 	 	<table style="vertical-align:top;padding:0px 20px 20px 20px;"> 	 	<tr style="vertical-align:top;"><td style="vertical-align:top;width:40%;"> 	 	<h1>Quick Links</h1>                <p><a href="http://www.nwsccmoodle.com">Moodle</a> | <a href="http://nwscc.edu/moodlehandout.pdf">Login Instructions</a><br>        <a href="http://www.nwscc.edu/collectionfees.html">Online Services</a> | <a href="http://www.nwscc.edu/onlineserviceslogin.pdf">Login Instructions</a><br>        <a href="http://www.nwscc.edu/studentemail.html">Student Email</a><br>        <a href="http://www.nwscc.edu/classschedule.html">Spring 2013 Class Schedule</a><br>        <a href="http://www.nwscc.edu/library/library.html">Library</a><br>        <a href="http://www.nwscc.edu/onecard/nwscconecard.html">NW-SCC OneCard</a></p>         </td> 	<td style="vertical-align:top;width:40%;"><h1><br></h1>         <p><a href="http://www.nwscc.edu/applicationinfo.html">Admissions Application</a><br> 	<a href="http://nwscc.edu/calendar.html">College Calendar</a><br> 	<a href="http://nwscc.edu/bookstorecheck.html">Bookstore</a><br> 	<a href="http://nwscc.edu/financialaid/finaid.html">Financial Aid</a><br> 	<a href="http://www.nwscc.edu/businessoffice.html">Financial Data</a><br /> 	<a href="http://www.nwscc.edu/distanceeducation/">Distance Education </a></p> 	</td></tr>                <tr style="vertical-align:top"><td style="vertical-align:top;padding:0px" colspan="2">  	<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({   version: 2,   type: 'profile',   rpp: 10,   interval: 31000,   width: 475,   height: 150,   theme: {     shell: {       background: '#698DA4',       color: '#f9f9fc'     },     tweets: {     background: '#fcfcfc', 	color: '#8C0000',     links: '#063c94'     }   },   features: {     scrollbar: true,     loop: false,     live: true,     behavior: 'all'   } }).render().setUser('NWSCC').start(); </script> 	</td>        </tr>                       </table>        </td></tr></table>            </div> </div>
    Last edited by acbugs; March 18th, 2013 at 03:50 PM. Reason: Solution!
« Previous Thread | Next Thread »
IMN logo majestic logo threadwatch logo seochat tools logo