Not able to get it right

Hello,

I have designed a page with Photoshop and I'm trying to code it now. I did the (X)HTML without any problem but when it got to CSS I got stuck.

Design: http://yizi.co.uk/code/design.jpg
Code: http://yizi.co.uk/code

You can see the CSS from the source view if you need to. As you see the problems are the bar and the top and the picture. Also I couldn't manage to centre the writings. I have the HTML utopia in front of me but I still can't figure out how to sort these out, I guess its just experience and you need to learn from it.

Thanks,
Yizi

Hi Yizi,

Rather than explain everything, I just worked your code out according to your image.

I have put a border around the wrapper for demo visibility, and a body bg color for contrast. Feel free to remove them.

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Yizi | Creative Solutions</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
 
</head><body>
 
<div id="wrapper">    
    <div id="header">
        <ul>
            <li><a href="#">Login</a></li>
            <li class="last"><a href="#">Register</a></li>
        </ul>
    </div> <!-- header -->
 
<div id="content">
        <div id="logo">
            <img src="img/logo.gif" alt="logo" height="67" width="153" />
        </div> <!-- logo -->
        <div id="footer">
            <ul id="navlist">
                <li><a href="#">Blog</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">About</a></li>
                <li class="last"><a href="#">Contact</a></li>
            </ul>
        </div>            
    </div> <!-- content -->
</div> <!-- wrapper -->
</body></html>

Code CSS:

/* CSS Document */
* {margin:0; padding:0;}
 
body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    background:silver;
}
 
#wrapper {
    width:750px;  
    margin:10px auto;
    border:1px solid #333; 
    background:#fff;
}
 
#header {
    background-color: #333333;
    color: #999999;
    margin:0;
    padding:0;
    height:20px;
    line-height:20px;
    text-align: right;
}
 
#header li {
    list-style:none;
    display: inline;
    text-align: right;
    padding:0 8px;
    border-right:1px solid #999;
}
#header li a {color: #999999; text-decoration:none;}
#header li.last {border:none;}
#header li a:hover {color:#fff; text-decoration:underline;}
 
#content {
    min-height:350px;
    width:100%;
}
* html #content {height:350px;}
#logo {
    width:153px;
    height:67px;
    margin:0 auto;
    padding-top:250px;    
}
#footer {
    height:auto;
    width:100%
    clear:both;
}
#navlist {
    font-weight:normal;
    text-align:center;
}
#navlist li {
    display:inline;
    padding:0 8px;
    border-right:1px solid #999;
}
#navlist li.last {border:none;}
 
#navlist a {
    color:#009;
    text-decoration:none;
    color: #999;
}
#navlist a:hover {
    color:#333;
    text-decoration:underline;
}

Hope that helps explain things better :)

1 Attachment(s)

Hi Yizi,

Here is another alternative.

Please see the attachment.

ydesignsx™ that's what i was exactly looking for, works perfectly. Thanks very much.

You're welcome Yizi. :)