Problem wrapping and centering Ver img.

Jesse_james

Hello,

In need of a little help. I cant figure out how to center a vertical image for my online portfolio. Any help would be appreciated.

First, heres the problem page. http://eastportfolio.netai.net/project_page4.php

This is the php page code... I know it deals with this code.

<div id="prj_page_wrap"><!-- start prj_page_wrap -->	

  <div id="proj_page_img">
	<img src="images/projects/full_page4.jpg" alt="Full Page Image" />				
  </div>

<?php $pageName = "projects"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="all" />
<meta name="description" content="Vibrant Foto" />
<meta name="keywords" content="photography" />
<title>Vibrant Foto | Photo </title>
<?php include("include/css.php"); ?>
</head>
<body>
<div id="wrapper">

  <div id="header" class="png_fix">
    <div id="logo">
	  <a href="index.php"><img src="images/logo_small.png" alt="logo" name="logo" width="398" height="99" border="0" class="vibrantlogo png_fix" /></a>
	</div>	
  	<div id="navcontainer" class="navcontain">
  	  <?php include("include/nav.php"); ?>
	</div>
  </div>

  <div id="main" class="png_fix"><!-- start main -->
    <div id="prj_page_wrap"><!-- start prj_page_wrap -->	

  <div id="proj_page_img">
	<img src="images/projects/full_page4.jpg" alt="Full Page Image" />				
  </div>

  <div id="proj_page_text">
	<h2>Project Title \ Client</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius, risus neque venenatis arcu, a semper massa mi eget ipsum. Proin sed odio et ante adipiscing lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius, risus neque venenatis arcu, a semper massa mi eget ipsum. Proin sed odio et ante adipiscing lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius, risus neque venenatis arcu, a semper massa mi eget ipsum. Proin sed odio et ante adipiscing lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p><a href="projects.php">View all projects</a></p>
  </div>
  <div class="contentclear"></div>	

</div><!-- end prj_page_wrap -->
<div class="contentclear"></div>

  </div><!-- end main -->

  <div id="bottom" class="png_fix"></div> 

</div><!-- end wrapper -->
<div class="clear">&nbsp;</div>
<div id="footer_wrap">
  <div id="footer">
    <div id="copyright" align="center">
      <?php include("include/footer.php"); ?>
    </div>
  </div>
</div>
<?php include("include/analytics.php"); ?>
</body>
</html>

And here is the css code.

#prj_page_wrap {
	color:#333;

}

#proj_page_img {
	margin:15px;
	border:5px solid #222;
}

#prj_page_wrap h2 {
	color:#333;
}

#proj_page_text {
	margin:0 0 10px 0;
	padding:0 15px 15px 15px;

So I guess what my question is, is what do I need to do to the css code to make my image line up in the center of the page and have the boarder wrap around it correctly?

Thank you for any help with this.

Krik

Centering an element is a bit tricky. Most use "margin: 0 auto;" but its not quite that easy.

First, the parent elements need to have there "position" and "width" set.

Second, the element you wish to center must have a "position: absolute;" and its "top", "left" and "width" set.

I am sure if I missed any detail a search on google for centering with the "margin: 0 auto;" technique will yield some additional help.

Almost forgot you border issue. The <div> will automatically size itself to 100% of the available space. The best technique maybe to put the border on the image. Otherwise you would have to change the <div> to an "inline" element, however that may cause other elements around it to be displayed differently.

cretaceous

style="text-align:center" on the image div

@: you don't need to force position absolute that I know of ??

Jesse_james

Hey,

Thanks guys for your help. I used the text align center code in the div tags and it centered it.

So problem number one solved, now I just need to figure out how to get the boarders to wrap correctly. I will add them to the pic as a last resort but I rather do it with code. 🙂

Any more suggestions are appreciated. Thanks again guys!!!

cretaceous

in the actual image tag add
style='border:1px solid #ff0055'
if you want space between border and image add a padding amount e.g
style='border:1px solid #ff0055;padding:5px'

of course it's better to do this in the css rather than inline, but you get the idea

Jesse_james

Nice,

Thank you!! I've been trying to do it with css but I couldn't get it to work. I think this will be fine though. Cheers!!

Bonesnap

You don't need to wrap an image in a div to centre it. To centre the image, in your CSS write:

display:block;
margin:0 auto;

This eliminates the need for the extra div.

Also, avoid using inline styles; they're evil. Instead use an external stylesheet or write your CSS at the top of your HTML file and create a class.