Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts

    Fixing A PSD Conversion Service

    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/cra...ing/index.html

    My Version:
    http://kansasoutlawwrestling.com

    Any ideas how to fix my header and footer areas?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    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 -
    Code:
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    CoolAsCarlito (10-28-2011)

  • #3
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts
    Thank you for the reply but something just isn't looking right still.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Quote Originally Posted by CoolAsCarlito View Post
    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?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts
    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.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    All of these are directed to a ul that does not exist
    Code:
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    CoolAsCarlito (10-28-2011)

  • #7
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts
    the footer image itself isn't right though

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Have a look at this approach:
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    CoolAsCarlito (10-28-2011)

  • #9
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts
    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.
    Last edited by CoolAsCarlito; 10-28-2011 at 11:45 PM.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    They are different images. http://kansasoutlawwrestling.com/cra...s/Layer_72.png is probably the one you want to use there.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    CoolAsCarlito (10-29-2011)

  • #11
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts
    If you refresh my page it looks better but now stressing about the header.

  • #12
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts
    Actually the footer images still look different.

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    CoolAsCarlito (10-29-2011)

  • #14
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts
    Why do the two footer images still look different?

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Quote Originally Posted by CoolAsCarlito View Post
    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. -
    Code:
    #content {
    	height: 300px;
    	background: #000;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    CoolAsCarlito (10-29-2011)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •