Avatar of edvinson
edvinson
Flag for United States of America asked on

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 ):
MY GOAL
and here is what my HTML/CSS looks like:
My Screwed up version
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!
CSSHTML

Avatar of undefined
Last Comment
Tom Beck

8/22/2022 - Mon
Tom Beck

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.Showing slices in PhotoshopWhen 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

ASKER
Thanks for the reply, but I am looking for a CSS solution.
ASKER CERTIFIED SOLUTION
Ishaan Rawat

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Tom Beck

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.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck