PDA

View Full Version : Trying to code my photoshop layout



muazasil
Mar 29th, 2007, 07:36 AM
Hello all I have been looking for a forum with some smart members to help me learn to code my photoshop layouts..

Photoshop: http://dietindex.net/george/daisylayout

My coded: http://dietindex.net/george/daisylayoutcode/

My css file: http://dietindex.net/george/daisylayoutcode/css.css

Basically, I can make it look more or less how I want it but I can't properly center the layout on all browsers. I know I went about it the wrong way.. help?

ronaldb66
Mar 29th, 2007, 09:02 AM
For starters, correct the placement of the body start tag; all content should reside within the body element.

Next, you're trying to translate a picture into markup; rather, pay attention to the desired document structure first: identify the various page sections (header, navigation, main content area--which you seem to want to divide into four more sections, etc.) and create markup to implement these sections.
Ideally, the document should be usable and logical without any styles; if it isn't, your markup needs more thought.

Then, create styles to add the presentation layer (imagery, positioning, font and color styling, etc.).

zoobie
Mar 29th, 2007, 09:06 AM
that's completely screwed up
you've got the body tag halfway down the page, the css file has been uploaded as binary, you've closed your container div right after opening it...and that was just a glance
I'd suggest a free editor to get you on your way

ahallicks
Mar 29th, 2007, 10:58 AM
Okay... start off with a document that looks something like this:



<!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" />
<title>Daisy Model - Homepage</title>

<link href="style.css" type="text/css" rel="stylesheet" media="screen" />

</head>

<body>

<div id="container">

<div id="header"></div>

<div id="leftcontent"></div>

<div id="rightcontent"></div>

<div id="rightcontent1"></div>

<div id="footer"></div>

</div>

</body>
</html>

And for your stylesheet, something like this (only change the names and sizes to suit) and this should give you your layout to start with:



* {
margin: 0;
padding: 0;
}

html, body {
background: #999;
font: 11px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

#container {
width: 738px;
height: auto;
margin: 0 auto;
overflow: hidden;
}

#header {
background-image: url(images/header.jpg);
width: 738px;
height: 500px;
float: left;
}

#leftcontent {
background-image: url(images/leftcontent.jpg);
width: 400px;
height: 500px;
float: left;
}

#rightcontent {
background-image: url(images/rightcontent.jpg);
width: 400px;
height: 250px;
float: left;
}

#rightcontent1 {
background-image: url(images/rightcontent1.jpg);
width: 400px;
height: 250px;
float: left;
}

#footer {
background-image: url(images/footer.jpg);
width: 738px;
height: 25px;
float: left;
}

muazasil
Mar 29th, 2007, 11:19 PM
http://www.dietindex.net/george/daisylayoutcode

How can I move the content boxes up??

my code

* {
margin: 0;
padding: 0;
}

html, body {
background: #333333;
font: 11px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

#container {
width: 738px;
height: auto;
margin: 0 auto;
overflow: hidden;
}

#header {
background-image: url(images/header.gif);
background-repeat: no-repeat;
width: 738px;
height: 500px;
float: left;
}

#leftcontent {
background-color: #909090;
border: 1px solid #fff;
width: 318px;
height: 441px;
float: left;
}

#rightcontent {
background-color: #909090;
border: 1px solid #fff;
width: 408px;
height: 233px;
float: right;
}

#rightcontent1 {
background-color: #909090;
background-image: url(images/thumb.gif);
background-repeat: repeat-x;
border: 1px solid #fff;
width: 408px;
height: 203px;
float: right;
}

#footer {
background-color: #909090;
border: 1px solid #fff;
width: 738px;
height: 25px;
float: left;
}

ronaldb66
Mar 30th, 2007, 08:29 AM
You've set your header height to 500px; this is far heigher than the image in it. Also, I see no reason to float it. Not floating it will eliminate the need to give it an explicit width (width: auto is the default).

muazasil
Mar 30th, 2007, 03:26 PM
http://www.dietindex.net/george/daisylayoutcode

I fixed the height of the header but I have been trying to align the content boxes with no success, any tips?

* {
margin: 0;
padding: 0;
}

html, body {
background: #333333;
font: 11px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

#container {
width: 738px;
height: auto;
margin: 0 auto;
overflow: hidden;
}

#header {
background-image: url(images/header.gif);
background-repeat: no-repeat;
width: auto;
height: 293px;
}

#leftcontent {
background-color: #909090;
border: 1px solid #fff;
width: 318px;
height: 435px;
float: left;
}

#rightcontent {
background-color: #909090;
border: 1px solid #fff;
width: 408px;
height: 234px;
float: right;
}

#rightcontent1 {
background-color: #909090;
background-image: url(images/thumb.gif);
background-repeat: repeat-x;
border: 1px solid #fff;
width: 408px;
height: 203px;
float: right;
}

#footer {
background-color: #909090;
border: 1px solid #fff;
width: 738px;
height: 25px;
float: left;
}

jlhaslip
Mar 30th, 2007, 03:44 PM
Align what? They look similar in Firefox and IE. Do you want to move them up towards the header image?
Set the margin-top: -'x'px; where 'x' is the number of px to move the content up.
example:


#leftcontent {
margin-top: -5px;
}
#rightcontent {
margin-top: -5px;
}