2
\$\begingroup\$

I am new to the world of coding as well as CSS. This is my first attempt to put together what I would consider a fully-pledged page less the content. I would appreciate if you could poke holes at it and let me know what I could have done better as well as what I should consider doing in the future.

NOTE

  • The file does not have an external CSS as yet as I am testing the style with an internal stylesheeting prior to moving it across to an external file.
  • The file also have commented out CSS i.e /** **/ where it gives you an idea of what I attempted to achieve using position as opposed to float. I am still unclear on as when to use either. I would appreciate any input.
  • The page has been designed on a larger screen so will not adapt to a smaller screen. That is my next challenge to try and adapt it to a smaller screen.

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

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

    <title>Example</title>

    <base href="" />

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

    <style type="text/css">

        * {

            margin: 0;
            padding: 0;

        }

        html, body {

            height: 100%;

        }

        #wrapper {

            min-height: 100%;

        }

        #header {

            background-image: url('images/bg-inner-page.gif');
            height: 200px;

        }

        #logo {

            float: left;
            margin-top:  50px;
            margin-left: 100px;

        }

        #topnav {

            float: right;
            margin-top: 50px;
            margin-right: 1250px;

        }

        #topnav ul {

            word-spacing: 10px;

        }


        #topnav ul li {

            list-style-type: none;
            display: inline;

        }

        #columns {

            width: 400px;
            float: left;
            margin-top: 20px;
            margin-left: 200px;

        }

        #col1 {

            float: left;
            margin-right: 10px;
            width: 100px;
            border: 1px solid #ffffff;
            border-radius: 5px;
            height: 80px;

        }

        #col2 {

            float: left;
            margin-right: 10px;
            width: 100px;
            border: 1px solid #ffffff;
            border-radius: 5px;
            height: 80px;

        }

        #col3 {

            float: left;
            width: 100px;
            border: 1px solid #ffffff;
            border-radius: 5px;
            height: 80px;

        }

        #content {

            float: left;
            background-color: orange;
            width: 500px;
            margin-top: 10px;
            margin-left: 500px;
            overflow: auto;
            padding-bottom: 150px;

        }

        #footer {

            position: relative;
            margin-top: -150px;
            height: 150px;
            background-color: #cccccc;
            clear: both;

        }

        #sidebar {

            float: left;
            width: 100px;
            margin-top: 10px;
            background-color: gray;

        }

        /**

        #logo {

            width: 20px;
            position: relative;
            top: 50px;
            left: 100px;

        }

        #topnav {

            width: 500px;
            position: relative;
            top: 14px;
            left: 150px;

        }

        #topnav ul {

            word-spacing: 10px;

        }

        #topnav ul li {

            list-style-type: none;
            display: inline;

        }
        **/


    </style>
</head>

<body>

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

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

            <div id="topnav">
                <ul>
                    <li>home</li>
                    <li>about</li>
                    <li>browse</li>
                    <li>faq</li>
                    <li>contact</li>
                </ul>
            </div>

            <div id="columns">
                <div id="col1">col1</div>
                <div id="col2">col2</div>
                <div id="col3">col3</div>
            </div>

        </div>
        <div id="content">content</div>
        <div id="sidebar">sidebar</div>
    </div>

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

</body>
</html>
\$\endgroup\$
3
\$\begingroup\$

The first thing you should think about, is if you really need to use XHTML. XHTML has virtually no advantages and many disadvantages compared with HTML 4.01 Strict (or HTML 5). See for example http://www.webdevout.net/articles/beware-of-xhtml .

The basic idea of HTML and CSS is that everything "flows" and adjusts itself. When doing web design one thing many designers do wrong (in my option at least) is to disregard this "flow" and to "think" and design in pixels. This can easily go wrong, because the user can (and should) easily override many things (most importantly font size), which will break rigid pixel-based designs. This happens usually because of fixed heights or badly absolutely positioned elements.

In your case this would apply to the "header" and the "columns", which contain text and you gave a fixed pixel height. Try out what happens, if the font size is larger or there is more text in them than you expect.

Consider using less generic IDs. Especially "column" and "col1/2/3" don't give any information on what they contain.

You can simplify and shorten your CSS by applying more complex selectors to take advantage of the "cascading" part of CSS. For example, you repeat the same properties for "col1/2/3", which could instead be moved to a rule with the selector #columns > div (or #columns div if you have to support IE 6):

#columns > div {
    float: left;
    margin-right: 10px;
    width: 100px;
    border: 1px solid #ffffff;
    border-radius: 5px;
    height: 80px;
}

#col3 {
    margin-right: 0;
}

For adapting to different window sizes, look into CSS 3 Media Queries

For your commented out part: You are using position: relative wrongly. Have a look at http://www.barelyfitz.com/screencast/html-training/css/positioning/ to see how position: relative works, and what to use it for.

You probably were thinking you using position: absolute, but you shouldn't. Layouts with position: absolute can easily break, if you do it wrong. You should consider position: absolute the last resort, if there is no other way to implement a layout. Using float as you are doing is much better as it taking advantage of the "flow".

\$\endgroup\$
6
  • \$\begingroup\$ @RoToRa - Thanks for your comments. When you say I was using position: relative; incorrectly, what was I doing incorrectly exactly? \$\endgroup\$ May 24 '11 at 22:40
  • \$\begingroup\$ @RoToRa - My understanding of relative is that the elements position is relative to a preceding element if any exists. For example, I would assume that in the code example below if I have the element footer positioned relative, it would be relative to the element content. Is that correct or would it be relative to rightcol? <div id="content"> <div id="innercontent"> Text </div> <div id="rightcol"> Text </div> </div><div id="footer">footer</div> \$\endgroup\$ May 24 '11 at 22:45
  • \$\begingroup\$ Neither. position: relative positions an element relative to it's own "normal" position. It's like cutting an article out of a newspaper page and sticking it somewher else eonto the same page. All you get is a hole (or gap) and the article then covers other things at the new position. position: relative (on it's own) is quite useless for page layout. It however does have a side effect, that absolutely positioned elements inside an element with position: relative are positioned relative to that element. Have a look at the link I posted for examples. \$\endgroup\$
    – RoToRa
    May 25 '11 at 7:11
  • \$\begingroup\$ @RoToRa - Thanks. Please correct me if I am wrong. I now understand that an element with the position: relative; is relative to its own position in the normal flow of the document. Am I correct to assume then that seeing that an element (let's call it b) with the position: absolute; within an element with the position: relative; (let's call it a), b's absolute position is restricted within boundaries of a. This would be that if a had a width of 200px and I position b top: 0px; right: 0px; it would be positioned to the top right of a. Is that correct? \$\endgroup\$ May 25 '11 at 21:53
  • \$\begingroup\$ @RoToRa - Assuming I was correct and taking note of your comment that elements with the position: relative; are useless on their own, is it better to use floats? \$\endgroup\$ May 25 '11 at 21:54
2
\$\begingroup\$

1- even for testing you should put the css in an external file, especially when it starts to have many lines.

2- relative will position an element relatively to its parent. So you need to ask yourself what is the "container", parent of this element. Read this and this and try the interactive examples.

3- for a design that fits all kind of screens you will need to use %ages or detect screen size and use multiple css files.

Anyway looking at the code and viewing the result we have no way to know what you're trying to achieve. Though it looks like a basic 3 columns + content + navigation bar design. Take a look here and see if you can find something that looks like what you want and see how they do it.

For specific coding questions ask on stackoverflow

\$\endgroup\$
4
  • \$\begingroup\$ In regards to #3, you could use absolute positions in combination with left/right/top/bottom to make a display that will scale up from a sane minimum. Another option many sites use is a container div with a set width centered on the screen to avoid scaling issues as well. \$\endgroup\$
    – Justin808
    May 24 '11 at 5:52
  • \$\begingroup\$ position: relative does not position the element relative to it's parent, it positions it relative to its own normal (static) position. However most of the time position: relative is used for its side effect, namely letting the element's absolutely positioned descendents be positioned relative itself. \$\endgroup\$
    – RoToRa
    May 24 '11 at 9:05
  • \$\begingroup\$ When you say "detect screen size", I guess you mean with JavaScript. This is however not necessary any more (unless you need to support different screen sizes in IE 6/7/8), because all relevant current browsers support CSS 3 Media Queries: w3.org/TR/css3-mediaqueries \$\endgroup\$
    – RoToRa
    May 24 '11 at 9:05
  • \$\begingroup\$ @all: It's just a fast answer to a question that has no answer. I cannot give a class about css positioning here. Thus the links and other tips on what he should do next, then I flagged the question as off topic since it's a "debugging" question. \$\endgroup\$
    – user3982
    May 24 '11 at 11:17

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.