asked on

I need expert advise on my CSS/HTML from PSD

I have this PSD I am converting to a CSS based layout:

So far, my HTML/CSS is close. Here is my output:

LIVE VERSION OF MY SITE

My HTML/CSS working version online

MY QUESTION

I DO NOT THINK I have coded this properly. Although it appears to be close to what I want to achieve, I am almost 99% sure I am using my POSITIONING attributes wrong.

I have 3 ABSOLUTE POSITIONING attributes set in my code, as you will see in my CSS. THIS JUST SEEMS wrong somehow.

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"/>
    <br/>
    <a id="forgot-password"  href="#">Forgot Password? | Join Us</a> <img  id="btn-login" src="images/btn-search.png" /> </span> </div>
  <div style="clear:both"></div>
  <div style="clear:both"></div>
  <!-- End Header -->
</div>
</body>
</html>

Open in new window

MY CSS

/***********************************************************
*  [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;
}

/* This is the search button */
#btn-search {
	margin-left: 10px;
}


/* */
#search-field-wrapper{
	position: absolute;
	left: 400px;
	top: 31px;	
}


#login-wrapper{
	position: absolute;
	float: right;
	left: 752px;
	top: 7px;
}


#forgot-password {
	margin-top: 5px;
	position:absolute;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #CCCCCC;
	text-decoration: none;
}


#btn-login {
	position:absolute;
	right: 2px;
	top: 36px;
}

Open in new window

Can someone please tell me a BETTER WAY to achieve my goal? I just know that there is a better way than how I am doing it!

Scott Fell

To start, span's are for formatting pieces of text. They are not for block level.

Where you have <span id="search-field-wrapper">, the span should be changed to a div.

edvinson

ASKER

PADAS: Changed.

<!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">
   
  <div 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;"> 
  </div> <div id="login-wrapper">
  
    <input type="text" id="username" name="username" placeholder="Username"/>
    <input type="text" id="password" name="password" placeholder="Password"/>
    <br/>
    <a id="forgot-password"  href="#">Forgot Password? | Join Us</a> <img  id="btn-login" src="images/btn-search.png" /> </div> </div>
  <div style="clear:both"></div>
  <div style="clear:both"></div>
  <!-- End Header -->
</div>
</body>
</html>

Open in new window

No effect on output. I still think having three absolute positioned elements within a header is not right, is it? That is my ultimate answer I am trying to achieve, how to fix that.

COBOLdinosaur

Using absolute positioning is a recipe for disaster.

Put the elements that need to be position in div elements then for the divs specify the width of the element, float: left, and then use margins and padding to do fine adjustment.

The left float will cause the elements to align next to each other left to right. If their parent is not width enough they will wrap to the next line so it is important to get the widths correct.

To manage spacing betwen the elements us margins, and to adjust vertical and horizontal position within the divs you can use padding.

Cd&

edvinson

ASKER

Thank you for your explanation. What I am truly looking for is code showing me the correct way.

The reason for posting this question was to see in action, everything you described, however, I just don't have the skills. I believe if I see this in action, it will help me tremendously in the rest of my endeavor.

SOLUTION

Scott Fell

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

SOLUTION

COBOLdinosaur

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Chris Stanyon

@COBOL - the page is fixed because of the width assigned to the wrapper and has nothing to do with the absolute positioning. If you set a width of say, 960px to a wrapper, then it doesn't matter whether the content is absolutely positioned, floated or naturally left to it's own flow - it will still be fixed at 960px, and a smaller resolution will give you the scrollbars.

Using media queries for a responsive design does not exclude the use of absolute positioning.

COBOLdinosaur

Using media queries for a responsive design does not exclude the use of absolute positioning.

I don't believe that I made any such assertion. It does not matter if the OP decides to follow a weak design. As long as my name is not on it, then I am merely a noisy bystander trying to help.

Using position absolute when there are other tools available is foolhardy. The property generally makes maintenance more difficult and reduces options. It is a "last resort". It is handy of widgets. and it shines for special effects. But anchoring page layout to it will result in extra work both for development and maintenance 99% of the time.

However, fro EE's business point of view it is probably a good thing so the OP has to keep coming back to get help with a crippled layout.

Cd&

Chris Stanyon

Hey Cd - The first paragraph of my comment was aimed at addressing your comments regarding absolute positioning cause fixed layouts - the second paragraph was simply a statement of fact

A fixed design does not equal a weak design - that's a subjective point and a fixed design can still be responsive.

Agreed, there are several ways of positioning elements, including adding margins and padding, but if they need positioning, why not just use the positioning tools - thats precisely what they're designed for - margins and padding aren't designed specifically for positioning - they're designed for adding space in and around elements.

The only time I've seen absolute positioning being a recipe for disaster is when it's not used correctly.

edvinson

ASKER

Update. I have not had time to implement suggested solutions, but will be on this first thing in the morning. Thank you for your patience.