Where do I start? - new to CSS

**Eternal_Howl** · 10-24-2007, 05:42 AM

My whole reasoning for needing to learn CSS is so that I can use that instead of tables which obviously affect how long it takes and what is displayed when nested tables load.

I'm looking around the internet and I need a quick start tutorial that gets me into it straight away. I know what I want in terms of layout, but achieving it is another matter.

A header
A left column (for navigation) and a right column for the main content
A footer

I've come across terms like divs, containers and wrappers etc.

Can someone point this ignoramus in the right direction so that I can be less ignorant and get to know what I'm doing?

From what I'm guessing it's a matter of defining page elements within either the css tag on a page or linking to an external .css

.header

.navigation
position
etc etc etc

.main content

.footer

and somehow applying the attributes required.

I also need to know which is best: relative or fixed? I want the page to display with the same layout regardless of an individual's screen resolution. (You can see I'm a lil green around the gills here

I usually manage to tweak prewritten codes etc, but would be good to be able to Do it myself instead of relying on someone else's stuff. I need a quick start guide that throws me in and gives me results without confusing me...your help would be appreciated.

**Eternal_Howl** · 10-24-2007, 08:01 AM

Okay, so I'm started - very slowly, very painfully. For some reason I can't get my background colour to show black - it's still white.

But that will no doubt be easy to fix.
My first major hurdle/issue
I want two columns. So I've put a div class with stuff all attributes. It's just there and it's on the left where it should be. I'm happy with that.
And unless I figure this out before someone answers it (I'll let you know) - how do I get the column on the right (which will be the main content) to stay where it is so it displays in proportion no matter screen resolution? I don't want it to end up way over on the left or everything too spread out if someone has a higher screen resolution than say 800 x 600. I'm still surfing the web, but this is a big question and puzzle - although it's probably quite obvious to those who are proficient in CSS.

I hope I made sense. This doesn't!

**jc_gmk** · 10-24-2007, 08:11 AM

Here are some templates you can use:

http://www.dynamicdrive.com/style/layouts/category/C9/

Just by looking at the code should give you some idea how to do the rest of the css.

Also there is some good info here: http://www.w3schools.com

**Eternal_Howl** · 10-24-2007, 08:19 AM

Thanks JC. I did have a gander at the dynamic drive link you gave me. I guess I didn't realise it would be like going right back to basics and learning EVERYTHING. You know, yo uget through HTML, you can slap a bit of css in here and there where needed but now I'm actually trying to format using the css instead of traditional tables and while I stare at the templates, I dunno - I feel real thick today. I'll go check out the w3schools. That's been around for eons. Cheers

**Eternal_Howl** · 10-24-2007, 09:21 AM

To give you an idea of what I am trying to achieve in CSS, I'll post the equivalent in html
<table border="0" cols="2" width="100%">
<tr><td width="30%">Navigation </td>
<td width="70%">
Content
</td>
</tr></table>

That's about as simple as I can make it in HTML - but the point being is I want to eliminate using tables and use CSS instead.

**tech_support** · 10-24-2007, 09:23 AM

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Layout</title>
<style type="text/css">
body	{
	background-color:#000000; /* Sets background colour to black */
}
#header	{
	height:70px; /* height of the header */
}
#nav	{
	float:left; /* Floats the <div> to the left side of the document */
	width:30%; /* Sets the width to 30% */
}
#content	{
	float:right; /* Floats the <div> to the right side of the document */
	width:70%; /* Sets the width to 70% */
}
</style>
</head>

<body>
<div id="header">Header</div>
<div id="nav">Navigation</div>
<div id="content">Content</div>
</body>
</html>

**Eternal_Howl** · 10-24-2007, 09:31 AM

Hey Mr Tech Support -

Thank you for that. I'm going to try it out and see how that gets me. I've been scouring and reading all kinds of pages and for some reason I couldn't find something that looked as simple as that.

I've been putting off learning CSS for a LONGGGGG time. I relied on web tutorials and the habit of repetition for HTML and thought CSS would have been just as straight forward.

I'll give this a shot and let you know how I get on. Thanks.

**boogyman** · 10-24-2007, 12:38 PM

Originally Posted by tech_support

HTML Code:

body	{
	background-color:#000000; /* Sets background colour to black */
}
#header	{
	height:70px; /* height of the header */
}
#nav	{
	float:left; /* Floats the <div> to the left side of the document */
	width:30%; /* Sets the width to 30% */
}
#content	{
	float:right; /* Floats the <div> to the right side of the document */
	width:70%; /* Sets the width to 70% */
}
</style>

using 30% / 70% widths looks like it would do the trick but once against IE's rendering engine screws things up. I have found that every time I reduce the browser width in the one of the elements falls under the other. Thus creating the problem. To fix this I usually leave 5% padding one way or the other, and I have found that it fixes the problem in IE

**Twey** · 10-24-2007, 05:48 PM

If you're looking for a tutorial, the ones at http://www.howtocreate.co.uk/ (read the "site design" tutorial too) are the best on the web, as far as I'm aware.

**ReMaX** · 10-24-2007, 09:23 PM

Okay, Tech_Support told you the basic structure of css.
Here I'll give you two links to get further information:
http://www.selfhtml.org
- I don't know if you speak german or french but this is a very good HTML and CSS encyclopedia.
http://www.cssplay.co.uk
- This is a very interesting page concerning special triggers and the real bandwidth of css by Stuart Nichols! Check this page and you'll love him!

greetings
Max

Thread: Where do I start? - new to CSS

Thread Tools

Search Thread

Where do I start? - new to CSS

Bookmarks

Bookmarks

Posting Permissions