6
\$\begingroup\$

I am new to the world of coding as well as CSS. This is my first attempt to put together a page that required a negative value. I am aware that it is recommended that paddings do not use negative values and it is acceptable for margins to use negative values however am unsure if my use of negative values is acceptable.

Notes

  • I am using an internal stylesheet so that I can easily and quickly change values rather than switching between files.
  • This is the first time I used a reset stylesheet by using import

I appreciate any constructive criticisms as well as what I can do better with my coding.

<!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" />
    <meta http-equiv="Content-Language" content="en-us" />

    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>Sample</title>


    <link rel="icon" type="image/png" href="" />

    <link rel="stylesheet" type="text/css" href="" />

    <style type="text/css" media="all">

    @import url('http://meyerweb.com/eric/tools/css/reset/reset.css');

    body {

        font-family: Georgia;
        font-size: 1em;

    }

    #wrapper {

        /* background-color: #FAEBD7; */
        width: 960px;
        margin: 0px auto;

    }

    #innerwrapper {

        /* background-color: #CDC0B0; */
        overflow: auto;

    }

    #header {

        /* background-color: #8B8378; */

    }

    #logo {

        background-color: #000000;
        float: left;
        width: 100px;
        height: 70px;
        color: #ffffff;
        text-align: center;
        padding-top: 30px;

    }

    #topnav {

        /* background-color: #8B8970; */
        float: right;
        margin-top: 50px;
        width: 300px;
        text-align: right;


    }

    #status {

        /* background-color: #808080; */
        width: 100px;
        position: relative;
        top: -80px;
        left: 800px;
        text-align: center;
    }

    #topnav ul {

        word-spacing: 5px;

    }

    #topnav ul li {

        display: inline;

    }

    #separator {

        border-bottom: 1px dashed gray;
        margin-top: 20px;

    }

    #content {

        /* background-color: #68838B; */
        overflow: hidden;
        margin-top: 60px;

    }

    #innercontent {

        /* background-color: #778899; */
        float: left;
        width: 600px;

    }

    #rightcol {

        /* background-color: #CDCDB4; */
        float: right;
        width: 300px;

    }

    #rightcol p + p {

        margin-top: 1em;

    }

    #footer {

        /* background-color: #CDB7B5; */
        margin-top: 20px;

    }

    </style>
</head>

<body>
    <div id="wrapper">
        <div id="innerwrapper">
            <div id="header">

                <div id="logo">logo</div>

                <div id="topnav">
                    <ul>
                        <li>about</li>
                        <li>browse</li>
                        <li>join</li>

                        <li>faq</li>
                        <li>contact</li>
                    </ul>
                </div>

                <div id="status">login</div>

            </div>
        </div>

        <div id="separator"></div>


        <div id="content">
            <div id="innercontent">
                Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.

                Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
            </div>


            <div id="rightcol">
                <p>paragraph1</p>
                <p>paragraph2</p>
            </div>


        </div>

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

    </div>
</body>
</html>
\$\endgroup\$
8
\$\begingroup\$

Your use of negative values in this example is perfectly acceptable; you're locating a relative positioned element.

You could improve the structure of the page with the addition of headers (e.g. change <div id="logo">logo</div> to <h1>logo</h1>; use <hr /> rather than <div id="separator"></div>; etc.). Build the page without any style to start with, then start designing it.

Importing the reset CSS is okay, but there's no reason not to copy it locally as well.

And I know this just a mock-up page, but don't forget to flesh out font-family. If you like Georgia, I'd go for font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; (which comes from Aaron Boodman's 8 Definitive Web Font Stacks article).

All up, I'd say you're absolutely on the right track!

|improve this answer|||||
\$\endgroup\$
  • \$\begingroup\$ @Sam - Thanks. In terms of professionalism, how would you rate my coding? Also I didn't quite follow what you meant by but there's no reason not to copy it locally as well \$\endgroup\$ – PeanutsMonkey May 27 '11 at 9:53
  • \$\begingroup\$ Just that you're importing a stylesheet from meyerweb.com, and I'd usually copy something like that to reside next to the rest of the site's stylesheets (and then run them all through some sort of combining utility, to reduce the number of client requests). Of course, you do point out that you're using internal styles for ease of development, so I guess the @import is in the same vein. \$\endgroup\$ – Sam Wilson May 28 '11 at 5:49
  • \$\begingroup\$ As for professionalism (and taking the comments I made above into consideration), I'd say that your code is probably a bit above average. The main things I notice to be lacking are HTML strucuture, and some more advanced typographical considerations (which is far too big a topic to go into in a comment!). \$\endgroup\$ – Sam Wilson May 28 '11 at 5:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.