Basic website CSS help

That Weirdo In The Corner · Jul 23, 2009

I am very new to making my own website. As you can see from the code below I don't really know what I'm doing, but that's where you start on the learning process.

A problem I had was that after I created #left frame the #main frame was stuck below the #left frame, the only way I found to move it to the right place, next to the #left frame was this kludge. What is the right way of doing it?

oh and I added #page as part of that kludge but i think i can remove it and nothig would change.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Untitled 1</title>

<style type="text/css" >
#page {
postition: absolute; top: 0px; left: 0px; width: 800px; height: 1200px;
}
#photo_header {
postition: absolute; top: 10px; margin-left: 20px; width: 90%; height: 180px;
border-style: double; text-align:center

}

#textheader {
postition: absolute; margin-top: 10px; margin-left: 20px; width: 90%; height: 30px;
border-style: double; text-align:center
}

#left {
postition: absolute; margin-top: 50px; margin-left: 20px; width: 20%; height: 700px;
border-style: double; text-align:center

}

#main {
postition: absolute; margin-top: -20px; margin-left: 220px; width: 315%; height: 700px;
border-style: double; text-align:center
}

#footer {
postition: absolute; margin-top: 40px; margin-left: 0px; width: 450%; height: 50px;
border-style: double; text-align:center
}

</style>
<script>
</script>
</head>

<body>
<div id="page">
<div id="photo_header">Linlithgow photo header goes here</div>
<div id="textheader">Linlithgow text header goes here</div>
<div id="left">navigation menu goes here
<div id="main">main text goes here</div>
<div id="footer">footer goes here</div></div></div>

</body>
</html>

Thank You

Robert Maxwell · Jul 23, 2009

You're right, #page is not needed.

The reason each layer is positioned vertically below the previous one is that it's just how CSS works, unless you use the CSS "table" directive.

See this page for details: http://www.quirksmode.org/css/display.html

It shows you what directives have what affect on your page layout.

kv1at3485 · Jul 23, 2009

Try something like:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled 1</title>
    <style type="text/css" >
        #page {
            margin:10px auto 0 auto;
            width: 90%;
            min-width:760px;
        }
        #photo_header {
            border-style: double;
            text-align:center
        }
        #textheader {
            margin-top: 10px;
            border-style: double;
            text-align:center
        }
        #left {
            margin-top:10px;
            margin-right:10px;
            margin-bottom:10px;
            float: left;
            padding-left:10px;
            width:20%;
            border-style: double;
            text-align:center;
        }
        #main {
            margin-top:10px;
            margin-bottom:10px;
            overflow: hidden;
            border-style: double;
            text-align:center;
        }
        #footer {
            clear:left;
            border-style: double;
            text-align:center
        }
    </style>
</head>
<body>
<div id="page">
    <div id="photo_header">Linlithgow photo header goes here</div>
    <div id="textheader">Linlithgow text header goes here</div>
    <div id="left">
        <ul>
            <li>Stuff</li>
            <li>Stuff</li>
            <li>Stuff</li>
            <li>Stuff</li>
            <li>Stuff</li>
            <li>Stuff</li>
        </ul>
    </div>
    <div id="main">main text goes here</div>
    <div id="footer">footer goes here</div>
</div>
</body>
</html>

And there's probably no need to use XHTML 1.0 Trans. May as well just use HTML 4.01 Strict.

Deckerd · Jul 23, 2009

Yes, use float left/right to put divisions side by side.

Basic website CSS help

That Weirdo In The Corner

Commander

Robert Maxwell

memelord

kv1at3485

Commodore

Deckerd

Fleet Arse

We value your privacy