Can you review my code?

Dev Articles Community Forums Sponsor:

July 30th, 2005, 09:46 PM

theresandy

Registered User

Join Date: Jul 2005

Posts: 1

Time spent in forums: 7 m 22 sec
Reputation Power: 0

Can you review my code?

Hi,
I just made my first tableless XHTML and CSS layout, but I really need some experienced people opinion on it.
First, let me say it validates, and looks just how I want it to look on firefox, IE6 and Opera (didn't test other browsers than those).

Anyway, let me know what you think:

XHTML:

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" xml:lang="pt" lang="pt">

<head>
    <title>[*title*]</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="robots" content="all" />
    <meta name="keywords" content="[*keywords*]" />
    <meta name="description" content="[*descrição*]" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="stylesheet" type="text/css" media="all" href="/css/main.css" />
</head>

<body>
    <div id="header">
        <div id="logo">
            <h1>[*h1*]</h1>
        </div>
    </div>
    <div id="nav">
        <div id="menu">
            <ul>
                <li><a id="menu1" href="/">Home</a></li>
                <li><a id="menu2" href="/[*item1*]/">[*item1*]</a></li>
                <li><a id="menu3" href="/[*item2*]/">[*item2*]</a></li>
                <li><a id="menu4" href="/[*item3*]/">[*item3*]</a></li>
                <li><a id="menu5" href="/[*item4*]/">[*item4*]</a></li>
            </ul>
        </div>
    </div>
    <div id="content">
        <div id="left">
            <div class="preview">
                <a href="/[*item1*]/"><img src="/imagens/prev1.gif" width="120" height="92" alt="[*item1*]" class="thumb" /></a>
                <h3><a href="/[*item1*]/">Emoticons</a></h3>
                <p>[*item1*]</p>
            </div>
            <div class="preview">
                <a href="/[*item2*]/"><img src="/imagens/prev2.gif" width="120" height="92" alt="[*item2*]" class="thumb" /></a>
                <h3><a href="/[*item2*]/">[*item2*]</a></h3>
                <p>[*item2*]</p>
            </div>
            <div class="preview" style="margin-bottom: 0px">
                <a href="/[*item3*]/"><img src="/imagens/prev3.gif" width="120" height="92" alt="[*item3*]" class="thumb" /></a>
                <h3><a href="/[*item3*]/">[*item3*]</a></h3>
                <p>[*item3*]</p>
            </div>
        </div>

        <div id="right">
            <div id="news">
                <h3>[*news*]</h3>
                <br /><br />

                <h4><img src="/imagens/newsico.gif" width="16" height="16" alt="" class="newsico" /><a href="novidades/1.html">[*news*]</a></h4>
                <p>[*news*].</p>
                <div class="hr"><hr /></div>

                <h4><img src="/imagens/newsico.gif" width="16" height="16" alt="" class="newsico" /><a href="novidades/2.html">[*news*]</a></h4>
                <p>[*news*]</p>
                <div class="hr"><hr /></div>

                <h4><img src="/imagens/newsico.gif" width="16" height="16" alt="" class="newsico" /><a href="novidades/3.html">[*news*]</a></h4>
                <p>[*news*]</p>
            </div>
        </div>
    </div>
    <div id="footer">
        <address>Copyright © 2005 <span class="validator"><a href="http://validator.w3.org/check/referer" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">XHTML</a></span><span class="validator"><a href="http://jigsaw.w3.org/css-validator/check/referer" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">CSS</a></span></address>
    </div>
</body>

</html>

CSS:

Code:

body, ul, li, p {
    margin: 0px;
    padding: 0px;
}

body {
    background: #FFFFFF;
    margin-top: 70px;
}

#header, #nav {
    width: 728px;
    height: 62px;
    margin: 0px auto;
}

#header {
    background: url(/imagens/header.gif) no-repeat;
}

#nav {
    background: url(/imagens/nav.gif) no-repeat;
}

#logo {
    width: 295px;
    height: 65px;
    margin-left: 12px;
    background: url(/imagens/logo.gif);
    position: absolute;
    top: 37px;
}

#logo h1 {
    display: none;
}

#menu {
    position: relative;
    top: -11px;
    text-align: center;
    margin-left: 20px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 13px;
}

#menu ul li {
    list-style: none;
    display: inline;
    margin-right: 20px;
}

#menu ul li a {
    padding-left: 24px;
}

#menu ul li a:link, #menu ul li a:visited {
    color: #666666;
    text-decoration: none;
}

#menu ul li a:hover {
    color: #666666;
    text-decoration: underline;
}

#menu ul li a#menu1 {
    background: url(/imagens/menu1.gif) no-repeat;
}

#menu ul li a#menu2 {
    background: url(/imagens/menu2.gif) no-repeat;
}

#menu ul li a#menu3 {
    background: url(/imagens/menu3.gif) no-repeat;
}

#menu ul li a#menu4 {
    background: url(/imagens/menu4.gif) no-repeat;
}

#menu ul li a#menu5 {
    background: url(/imagens/menu5.gif) no-repeat;
}

#content {
    width: 690px;
    margin: 0px auto;
    position: relative;
}

#left {
    width: 390px;
    float: left;
    background: url(/imagens/sep.gif) repeat-y;
    background-position: 363px;
}

#right {
    width: 300px;
    float: right;
}

#content #left .preview {
    width: 340px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 13px;
    color: #444444;
    margin-bottom: 35px;
}

#content #left .preview .thumb {
    float: left;
    border: 0px;
    margin-right: 15px;
}

#content #left .preview h3 {
    padding-top: 5px;
    font-size: 13px;
    letter-spacing: 1px;
    margin: 0px;
}

#content #left .preview h3 a:link, .preview h3 a:visited {
    color: #FF6600;
    text-decoration: none;
}

#content #left .preview h3 a:hover {
    color: #669900;
    text-decoration: underline;
}

#content #left .preview p {
    margin-top: 4px;
}

#content #right #news {
    width: 300px;
    height: 45px;
    background: url(/imagens/newsbg.gif) no-repeat;
}

#content #right #news h3 {
    padding-left: 50px;
    padding-top: 12px;
    font-family: Georgia, Arial, Verdana, Helvetica, sans-serif;
    font-size: 17px;
    color: #777777;
    font-weight: normal;
    letter-spacing: -1px;
    margin: 0px;
}

#content #right #news .newsico {
    float: left;
    margin-right: 5px;
}

#content #right #news h4 {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    margin: 0px 0px 10px 10px;
}

#content #right #news h4 a:link, a:visited {
    color: #4D7100;
}

#content #right #news h4 a:hover {
    color: #FF6600;
    font-weight: bold;
}

#content #right #news p {
    margin: 0px 0px 0px 10px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 12px;
    color: #444444;
}

#content #right #news .hr {
    padding: 0;
    margin: 14px 0px 14px 10px;
    width: 270px;
    height: 1px;
    background: url(/imagens/hrbg.gif) repeat-x;
}

#content #right #news hr {
    display: none;
}

#footer {
    clear: both;
    width: 728px;
    height: 62px;
    margin: 0px auto;
    background: url(/imagens/header.gif) no-repeat;
    background-position: center;
    padding-top: 30px;
}

#footer address {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    color: #888888;
    font-size: 12px;
    font-style: normal;
    padding-top: 35px;
    text-align: center;
}

#footer address .validator {
    margin-left: 10px;
    border-bottom: 1px dotted #999999;
    text-decoration: none;
    color: #999999;
}

#footer address .validator a:link, #footer address .validator a:visited, #footer address .validator a:hover {
    text-decoration: none;
    color: #999999;
}

let me know what think, if I should change anything on the CSS/XHTML, etc.. Thanks!

August 5th, 2005, 02:37 PM

CHornJr

Contributing User

Join Date: Nov 2002

Location: New York City

Posts: 236

Time spent in forums: 1 Day 1 h 50 m 19 sec
Reputation Power: 6

You may want to use the HTML validator and CSS validators loated at W3 (w3.org)

__________________
CHornJr
"One day I'll know what I am doing"

My Blog
Suanhacky Lodge #49
Rebel Squadrons

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: