New to CSS Layout

[tapster]

Hi all

I'm new to both this site and CSS layouts. I have basic knowledge of CSS having used it for text styles within tables etc for years. I am trying to broaden my knowledge.

I would like to know whether this style of layout is possible to be created purely with <div> etc. I am aware that the content from the DB will need to be in tables.

http://www.notionsforpotions.co.uk/t...eideaframe.jpg

I have created a nav bar using unordered list and have styled it. I am however having problems in positioning it. Wherever I place it, it always displays about 10px south of where it should be. Is this a common problem with this style of navagation, and if so, is there an easy fix.

Here's the code I have used; (taken and edited form listmatic)

HTML: Select all

#navcontainer ul {
        position:absolute;
        display: block;
        list-style: none;
        font-family: times, serif;
        font-size: small;

    }

#navcontainer li {
        border: 1px solid #fff;
        background-color: #cccc9e;
        color: #ffffff;
        font-weight: bold;
        font-style: italic;
        display: block;
        float: left;
    }

#navcontainer a:link,
#navcontainer a:visited {
        background-color: #cccc9e;
        color: #666632;
        text-decoration: none;
        padding-left: 1em;
        padding-right: 1em;
    }

#navcontainer a:hover {
        background-color: #666632;
        color: #fff;
    }

#navcontainerclear {
        display: none;
    }

html>body #navcontainerclear {
        display: block;
        clear: both;
    }

#navcontainer li#active a {
        background-color: #666632;
        color: #fff;
    }

I am currently reading Beginning CSS Web Development by Simon Collinson
Its an informative book, but if anyone is aware of a good book to help self teach me this skill, I would be very appreciative.

Best regards

Tapster

[alexgeek]

try putting
* {margin: 0px; padding: 0px}
at the top of your stylesheet

[Marc]

Can we see the HTML to go with the CSS, please?

[alexgeek]

Originally Posted by Marc

Can we see the HTML to go with the CSS, please?

better yet host (freewebs if you don't have a host)

[MikeHopley]

Why are you using position: absolute on your navbar <ul>?

[karinne]

Originally Posted by alexgeek

try putting
* {margin: 0px; padding: 0px}
at the top of your stylesheet

Please stop suggesting this method as a cure for everything!


tapster: It would help if you posted a link to your site like others suggested so we can see the whole thing

[tapster]

Flipping heck this is a fast site. !!!

http://www.notionsforpotions.co.uk/testers

There is a link to what I have done so far. Please don't laugh at my feable attempt.!!!

[alexgeek]

Originally Posted by tapster

Flipping heck this is a fast site. !!!

http://www.notionsforpotions.co.uk/testers

There is a link to what I have done so far. Please don't laugh at my feable attempt.!!!

why would we laugh at that? It's great attempt!

[karinne]

First of all ... this is a 2-column site so ... what I would do is create 2 ID: col1 and col2

#col1 would have those 2 boxes

#col2 would house your navigation and your content

just float col1 to left and col2 to right

[tapster]

Thanks

As you can see, I have having a little trouble positioning the nav bar.

[karinne]

Oh and you're also missing a </ul> in there

[tapster]

Thanks for that. I will see how I get on with a 2 column layout.

It certainly makes sense to do it like that.

Is that the only way to be able to layout with CSS? Does it have to be something that will always fit in columns?

Its probably obvious when I switch my brain on and think about it but its getting late now
:bounce8:
Thanks again for all your replies.

[karinne]

No ... a layout doesn't "have" to be in columns.

Just look at the styles applied at the CSS Zen Garden

There's all types of layouts. Just thought that telling you to use 2 columns might be more obvious and simpler

[tapster]

Thanks. Yeah I have seen that site before. I will take another look and more notice of how things are laid out in future

[capture]

You can view my 2-column layout tutorial here:

http://lynx.tygerz.com/layouts_03.php

Also are tutorials for one-column with horizontal menu and a
three column layout (kind of a hack, but it works and keeps the
colors in the left and right columns all the way to the bottom even
if the center column is longer).

I have made webpages for clients using this 2 column layout and
they are very happy with the results:
One client's site:
http://richardhackworth.com

I hope this helps with your 2 column layout.

All the Best,
CP

[tapster]

Thanks very much for that. Since I initially posted this, I have had no time to play. But I intend to find some time this week.