1 reply [Last post]
benst
Offline
newbie
Melbourne, Australia
Last seen: 16 years 39 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2004-04-27
Posts: 1
Points: 0

Hi all,

I'm learning CSS, and relearning HTML so I can build a website for myself, and I
was wondering if someone could help me with what seems like a simple layout that I want to maintain no matter the browser window size. It would be much appreciated. If you want to view it in your browser, please go to
http://homepages.ihug.com.au/~benst/index.html.

I've modified it a bit to make the edges of each "cell" more obvious. Eventually I just want inner borders, with no border around the whole thing, but the gap (see below) between the two top cells is going to spoil that.

In Mozilla 1.5 the borders overlap, and in IE 6.0 there is a gap between the borders of the two top cells.

In Mozilla 1.5 the top left "cell" is not in the top left, as if the browser is inserting <P> before the div. If I put some text before the first div it all lines up properly in a nice grid. This is not needed in IE 6.0.

Here's the code:

<html>
<head>
<title>Home</title>
    <link rel=stylesheet type="text/css" href="basic.css" title="Home">
</head>
<body>
    <div id="heading">
        <a class=heading href=index.html>Company Name</a>
    </div>

    <div id="sub-heading">
        Products
    </div>

    <div id=menu>
        <a class=menu href=products.html>products</a><br>
        <a class=menu href=contact.html>contact us</a><br>
        <a class=menu href=aboutus.html>about us</a><br>
        <a class=menu href=news.html>news</a>
    </div>

    <div id=main>
        Main content goes here
    </div>

</body>
</html>

<!-- basic.css
body {
    font-family:        verdana, helvetiva, arial, sans-serif;
    background:         black;
    padding:            0;
    margin:             0;
    color:              #F0F050;
}

#heading {
    float:              left;

    width:              10em;
    height:             3em;

    margin-top:         1em;
    padding-top:        1em;

    margin-left:        1em;
    padding-left:       1em;

    border:       solid 2px #FFFF00;


    color:              #F00000;

    font-weight:        bold;
}

#sub-heading {
    height:             3em;

    margin-top:         1em;
    padding-top:        1em;

    margin-left:        12em;
    padding-left:       1em;

    border:      solid 2px #FF0000;

    color:              #F00000;

    font-weight:        bold;
}

#menu {
    float:              left;

    width:              10em;
    height:             100%;

    padding-top:        1em;

    margin-left:        1em;
    padding-left:       1em;

    border:       solid 2px #00FF00;

    color:              #F0F050;
}

#main {
    padding-top:        1em;

    margin-left:        12em;
    padding-left:       1em;

    border:       solid 2px #4040FF;

    color:              #F0F050;
}

-->

Thanks heaps for all replies.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 12 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

What am I doing wrong? It's just a simple layout...

Hi Ben,
Laying out a page in CSS is much harder then it first seems Smile
There is so much you need to know just to get it working in one browser then just when everything looks right you try the page in another browser.

There are plenty of free CSS layouts and a couple of good layout generators,
Cleva Trevor's and my own and some great tutorials like this http://www.maxdesign.com.au/presentation/process/

Other links Useful CSS Links

Have a good look around you will see many of the problems you have come up against have appeared here before.

Now on to try and provide some help.
Firstly I would look into doctypes, they are a little confusing at first but the difference that the right doctype makes to some browsers is astounding.

Then you need to clear after the subheading, I suggest you put both heading and subheading in a div thats just positioned relative and has a height set.
You can then clear after that div by setting it to clear right or both;
That should then put the next div which is menu to the left and with content floating next to if you should be on the way.

There will be more to do but I don't have time to write a book just now
Smile

Hope that helps