asked on 4/6/2013

Element Positioning - NOT working

I have tried to break down this problem into multiple questions, but that did not work.

Quite simply, here is what I am trying to accomplish ( this is a PSD ):

and here is what my HTML/CSS looks like:

Obviously I am having problems with my POSITIONING.

MY HTML

<!DOCTYPE html>
<html>
<head>
<title>PSD to HTML</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<!-- This is our main center content box -->
<div id="container">
  <!-- Begin Header -->
  <div style="clear:both" id="header">
		  
		  <img style="float:left" id="main-logo" src="images/logo.png"> 
    <span id="search-field-wrapper">
			<input size="40" type="text" id="search" name="search" placeholder="Search Tutorials"/>
  	  <img id="btn-search" src="images/btn-search.png" style="vertical-align: middle;">    </span> 
		  
		  <span id="login-wrapper">
		  	<input type="text" id="username" name="username" placeholder="Username"/>
				<input type="text" id="password" name="password" placeholder="Password"/>
				<a href="#">Forgot Password</a>
		  </span> 
		  
		 <!-- This is the LOGIN button, although it says search, just haven't got
		      around to slicing it from PSD yet --> 
		 <span>
		 	<img id="btn-login" src="images/btn-search.png" style="vertical-align: middle;">    
		 </span> 
		 
	</div>
<div style="clear:both"></div>
  <div style="clear:both"></div>
  <!-- End Header -->
</div>
</body>
</html>

Open in new window

MY CSS

/**

TABLE OF CONTENTS

[1] SITEWIDE	- General styles that apply to entire document
[2] HEADING 	- Site name, logo, search field, login username/password

***/



/***********************************************************
*  [1] SITEWIDE
***********************************************************/
body {
	background: #333 url('../images/body-rpt.jpg') repeat-x;
	color: #CCCCCC;
	
}

/* Links light so we can see them */
a {
	color:#FFFFFF;
}

/* Main Centered DIV. I have added a border
   just so I can see it while designing */
#container {
	margin-top: 20px;
	width: 945px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	border: 1px solid #FFFFFF;	
}

/* Round the corners of the input boxes */
#header input[type=text]
{
  	-moz-border-radius: 6px;
 	border-radius: 6px;
    border:solid 1px black;
    padding:5px;
	height: 12px;
}


/* Add some space between the search button
   and the search textfield */
#btn-search {
	margin-left: 10px;
}


/* !!!!!!!!!! POSSIBLE HELP NEEDED HERE ???? !!!!!!!!!!!
*
*  I needed to preciselt position this text field, so I
*  chose to use ABSOLUTE positioning. NOT SURE if this is
*  the correct way.
*/
#search-field-wrapper{
	position: absolute;
	left: 397px;
	top: 31px;	
}


/* !!!!!!!!!! POSSIBLE HELP NEEDED HERE ???? !!!!!!!!!!!
*
*  As above, I neded to position these text fields in
*  a precise spot. I don't know if this is the best way???
*/
#login-wrapper{
	position: absolute;
	float: right;
	left: 752px;
	top: 7px;
}

Open in new window

LIVE VERSION OF MY NOT WORKING HTML

My Site so far ( not working as intended )

Can someone please help me conquer this? I just want to get everything to line up. And understanding the solution would be a bonus!

CSS HTML

Last Comment

Tom Beck

4/6/2013

Tom Beck

4/6/2013

I've never designed a web page by starting with Photoshop but I have with Adobe Fireworks. The procedure is similar though. In order to convert your Photoshop image to a web page layout you need to slice it up and let Photoshop convert the slices into an html table. Once you have the structure you can go back into the html and target specific table cells and add and position individual text boxes.

Here's a Photoshop screen capture showing your design with 15 slices drawn in.

When you "Save for Web" in Photoshop, be sure to choose Html and Images from the drop down. When I did this for your design, Photoshop generated this html table structure and placed the individual image slices in a subfolder.

<html>
<head>
<title>site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (site.png) -->
<table id="Table_01" width="1007" height="161" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="3">
			<img src="images/site_01.gif" width="76" height="161" alt=""></td>
		<td colspan="7">
			<img src="images/site_02.gif" width="588" height="82" alt=""></td>
		<td colspan="2">
			<img src="images/site_03.gif" width="264" height="82" alt=""></td>
		<td rowspan="3">
			<img src="images/site_04.gif" width="79" height="161" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/site_05.gif" width="87" height="42" alt=""></td>
		<td>
			<img src="images/site_06.gif" width="77" height="42" alt=""></td>
		<td>
			<img src="images/site_07.gif" width="114" height="42" alt=""></td>
		<td>
			<img src="images/site_08.gif" width="76" height="42" alt=""></td>
		<td>
			<img src="images/site_09.gif" width="77" height="42" alt=""></td>
		<td>
			<img src="images/site_10.gif" width="78" height="42" alt=""></td>
		<td>
			<img src="images/site_11.gif" width="79" height="42" alt=""></td>
		<td>
			<img src="images/site_12.gif" width="96" height="42" alt=""></td>
		<td>
			<img src="images/site_13.gif" width="168" height="42" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="images/site_14.gif" width="684" height="37" alt=""></td>
		<td>
			<img src="images/site_15.gif" width="168" height="37" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Open in new window

edvinson

4/6/2013

ASKER

Thanks for the reply, but I am looking for a CSS solution.

ASKER CERTIFIED SOLUTION

Ishaan Rawat

4/6/2013

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

Tom Beck

4/6/2013

understanding the solution would be a bonus!

That's what I was trying to do.
Good web design starts with a solid foundation -- a structured layout that divides your entire page into content sections. A web page is more than just a header. The footer is actually more important at this point than the header. The header will always stick to the top. What should the footer do? Do you want it to stick to the bottom? That's not so easy. And if you try to do it later after the page is a complex hodgepodge of divs and css, you'll pull your hair out. You are trying to build this house from the roof down instead of from the foundation up. You will wind up with a css mess rather than a "css solution". In particular, using position:absolute will come back to bite you later. I don't like the way Photoshop uses tables to lay out a web page so I never use it for that, but it least it creates a structure to get you started if you don't know how to create a structure otherwise.