...

View Full Version : Fixing A PSD Conversion Service



CoolAsCarlito
10-28-2011, 09:48 PM
I tried the psd2htmlconverter.com service for 4 bucks but what I was given is not the best of job. So I'm trying to work with it and create something close to it.

Converted PSD:
http://kansasoutlawwrestling.com/crap/admintemp/testing/index.html

My Version:
http://kansasoutlawwrestling.com

Any ideas how to fix my header and footer areas?

Excavator
10-28-2011, 10:14 PM
Hello CoolasCarlito,
You seem to have a little divitis going on maybe. I'm not sure what #page-wrap div is going to be for. It's fine if you're going to use the nested divs for another background but it's not needed in this or the other layout you link to.

Instead of using ap on your footer, try this instead -

div#footer {
min-height: 201px;
width: 1280px;
clear: both;
background: url("../images/footer.png") no-repeat;
}
Then you can let your content push it down as needed.

CoolAsCarlito
10-28-2011, 10:18 PM
Thank you for the reply but something just isn't looking right still.

Excavator
10-28-2011, 10:32 PM
Thank you for the reply but something just isn't looking right still.

You'll need to be a little more specific. What exactly are you trying to change?

CoolAsCarlito
10-28-2011, 10:34 PM
Well I'm just trying to figure out the right css to add to my version from the index page of the conversion that I was given.

Excavator
10-28-2011, 10:37 PM
All of these are directed to a ul that does not exist

div#footer div ul li {
text-align:center;
text-transform: uppercase;
}

div#footer div ul li a {
color: white;
text-decoration:none;
font-weight:bold;
padding-right:2px;
}

div#footer div p {
margin-bottom:1.5em;
font-size:8px;
margin-top: 1.5em;
}

Delete those bits highlighted in red and see if that helps.

CoolAsCarlito
10-28-2011, 10:38 PM
the footer image itself isn't right though

Excavator
10-28-2011, 11:35 PM
Have a look at this approach:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kansas Outlaw Wrestling</title>
<style type="text/css">
html, body {
margin: 0;
color: #ccc;
background: #000;
font: 1em/1 verdana, arial, sans-serif;
}
#page-wrap {
width: 1280px;
margin: 0 auto;
background: #000 url("http://kansasoutlawwrestling.com/assets/images/bg.png");
}
#header {
}
#header a#logo {
height: 168px;
width: 442px;
margin: 0 auto;
display: block;
}
#navigation {
height: 25px;
background: #666666;
text-align: center;
}
#content {
height: 300px;
background: #000;
}
#footer {
height: 201px;
width: 1280px;
clear: both;
overflow: auto;
background: url(http://kansasoutlawwrestling.com/assets/images/footer.png) no-repeat center;
}
p#footerLinks {
margin: 115px 0 0 0;
color: #fff;
text-align: center;
text-decoration: none;
font-size: 0.6em;
}
p#footerLinks span {margin: 0 6px;}
p#Copyright {
color: #ccc;
text-align: center;
font-size: 0.5em;
}
</style>
</head>
<body>
<div id="page-wrap">
<div id="header">
<a href="http://kansasoutlawwrestling.com/" id="logo">
<img src="http://kansasoutlawwrestling.com/assets/images/logo.png" alt="Kansas Outlaw Wrestling" />
</a>
</div>
<div id="navigation">Nav goes here</div>
<div id="content"> </div>
<div id="footer">
<p id="footerLinks">
HOME<span>|</span>ROSTER<span>|</span>LIVE EVENTS<span>|</span>MEDIA<span>|</span>SOCIAL<span>|</span>RADIO<span>|</span>FORUMS
</p>
<p id="Copyright"> Copyright 2010, All rights reserved.</p>
<!--end footer--></div>
<!--end page-wrap--></div>
</body>
</html>

CoolAsCarlito
10-28-2011, 11:41 PM
The footer image doesn't seem to be as spread out and the links I have as an UL because it makes more semantic reason to list them as a unordered list of links since that is what they are.

Excavator
10-28-2011, 11:57 PM
They are different images. http://kansasoutlawwrestling.com/crap/admintemp/testing/images/Layer_72.png is probably the one you want to use there.

CoolAsCarlito
10-29-2011, 12:06 AM
If you refresh my page it looks better but now stressing about the header.

CoolAsCarlito
10-29-2011, 12:08 AM
Actually the footer images still look different.

Excavator
10-29-2011, 12:28 AM
One error needing fixed - http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fkansasoutlawwrestling.com%2F

CoolAsCarlito
10-29-2011, 12:30 AM
Why do the two footer images still look different?

Excavator
10-29-2011, 02:14 AM
Why do the two footer images still look different?

They have different names but they are the same image.
Remove this bit in red and things start to look a little different...but not for the footer. -

#content {
height: 300px;
background: #000;
}

CoolAsCarlito
10-29-2011, 06:15 PM
Okay I want to continue this thread just a little further because of me not as understanding of it but more of what ways I could handle this.

With the navigation am going to have a dropdown for each of those AND they have different states of hover and what not but here's the thing.

I am building a CMS that pretty much will dynamically create my links through my db if they were just text link but with this layout and my links being images its not going to be able to do that. So I need to figure out what I'm going to do.

I'm not trying to figure out how I should layout my html for my nav bar with this in mind? I'm not even sure if I should just apply my nav_bg image to the navigation div or add different divs for more active state layers or what?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum