Css basic question

[IThurts]

Two questions i would like clarification on if you would please:

1)Would i be right in saying that in order to create different "sections" of a webpage using CSS, ie; its links section on the left and the main content in the middle, i would have to use <DIV> tags (blocked elements) in order to seperate the two.

2)The last time i did websites/webpages, tables were used for this, so CSS is very new to me. I would use the tables to seperate the different sections of a page. As i understand it from this thread and other sources, CSS are used to create a page layout and its various sections, which pose great advantages. ie; the ability to use external style sheets to edit your style and apply/link this .css page to your html pages to change the layout in its entirety.

Thanks alot for the help in advance and please keep the answers in "dummy" terms please

[tripwire45]

That's how I did it on my site. I have my pages (in general) structured with a left navigational section, a main content section and a right content section (on my main page, it's graphics of my books). Go to http://www.wiredwriter.net/, right-click on the page and select View Page Source (in Firefox) or or View Source (Internet Explorer). Then compare the page to the source to see how the <div> tags are used.

One of the best ways to learn CSS is to find web pages that are organized in the way you like or want to learn about and then use the "view page source" option to see how the page is organized. You can also Google "css layout" to find tutorials on how to use CSS to organize pages. When I want to create a site with a certain "look", I do this sort of search until I find something that approximates what I want, then I tweak the CSS until I get the effect I'm looking for.

You are right in your understanding of the advantages of using CSS. Using an external style sheet lets you edit the style of your entire site (assuming that all the pages on your site use the same style sheet) in one fell stroke. Using tables means you have to edit each page individually which is a pain-in-the-arse, especially if you have a rather large site. Also, using tables, you could lose conformity by making mistakes from one set of tables on a single web page to the next.

Hope this helps.

-Trip

[BosonJosh]

As Trip said, your understanding is correct. However, one thing you have to be careful about is using DIVs for every little piece of content you want to style. Using CSS requires a bit of planning and thinking through the layout before actually writing any code. But, a well thought out CSS layout is much easier to maintain than a table-based layout.

[IThurts]

Originally Posted by tripwire45

That's how I did it on my site. I have my pages (in general) structured with a left navigational section, a main content section and a right content section (on my main page, it's graphics of my books). Go to http://www.wiredwriter.net/, right-click on the page and select View Page Source (in Firefox) or or View Source (Internet Explorer). Then compare the page to the source to see how the <div> tags are used.

One of the best ways to learn CSS is to find web pages that are organized in the way you like or want to learn about and then use the "view page source" option to see how the page is organized. You can also Google "css layout" to find tutorials on how to use CSS to organize pages. When I want to create a site with a certain "look", I do this sort of search until I find something that approximates what I want, then I tweak the CSS until I get the effect I'm looking for.

You are right in your understanding of the advantages of using CSS. Using an external style sheet lets you edit the style of your entire site (assuming that all the pages on your site use the same style sheet) in one fell stroke. Using tables means you have to edit each page individually which is a pain-in-the-arse, especially if you have a rather large site. Also, using tables, you could lose conformity by making mistakes from one set of tables on a single web page to the next.

Hope this helps.

-Trip

Thanks Trip,
I have viewed your source code...its not as scary as i first though it may be ;)

If its not too much trouble, do you mind explaining, for example, your "<DIV id=leftnav>" element (is that an element??)...is the positioning (and code) of this nav bar and its alignement stated in your Css style sheet? I cant see anywhere where you have set up the alignment attributes are on your home page.

Im just trying to get an understanding of how it all works, so would like to know how you have "told" the html file to align the leftnav to where it is. Thanks for your help....or if anyone can help at that matter as im sure the issue and answer is a universal one.

Thanks guys...your great help.

[ThomasMc]

Hi ITHurts, if your just starting out with css you may want to have a look at W3Schools [Link], I found there css section to be a very worth while resource

[Mitzs]

Originally Posted by IThurts

Thanks Trip,
I have viewed your source code...its not as scary as i first though it may be ;)

If its not too much trouble, do you mind explaining, for example, your "<DIV id=leftnav>" element (is that an element??)...is the positioning (and code) of this nav bar and its alignement stated in your Css style sheet? I cant see anywhere where you have set up the alignment attributes are on your home page.

Im just trying to get an understanding of how it all works, so would like to know how you have "told" the html file to align the leftnav to where it is. Thanks for your help....or if anyone can help at that matter as im sure the issue and answer is a universal one.

Thanks guys...your great help.

It, yes it is an element. However align has become obsolete with html 4. I would suggest that you start to google for some of your anwsers you would get a faster response. Google the tags you don't understand. Or if you read some of the links that have been posted in both of your thread you would find them very helpfully and will anwser alot of these questions you are asking. Your just going to have to take the time if you are really serious about learning this.

[tripwire45]

Originally Posted by IThurts

If its not too much trouble, do you mind explaining, for example, your "<DIV id=leftnav>" element (is that an element??)...is the positioning (and code) of this nav bar and its alignement stated in your Css style sheet? I cant see anywhere where you have set up the alignment attributes are on your home page.

Im just trying to get an understanding of how it all works, so would like to know how you have "told" the html file to align the leftnav to where it is. Thanks for your help....or if anyone can help at that matter as im sure the issue and answer is a universal one.

No worries. If you look towards the top of the source, you'll see how the page is linked to the CSS style sheet as follows:

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

If you look around, you'll also see some local styling as well that applies only to that page, but what you are looking for is in "wired02.css". I'm attaching it to this post. Since the attachments feature on the boards doesn't support the .css extension, I renamed it wired02.txt. The content is the same, so no worries there.

[IThurts]

Originally Posted by tripwire45

No worries. If you look towards the top of the source, you'll see how the page is linked to the CSS style sheet as follows:

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

If you look around, you'll also see some local styling as well that applies only to that page, but what you are looking for is in "wired02.css". I'm attaching it to this post. Since the attachments feature on the boards doesn't support the .css extension, I renamed it wired02.txt. The content is the same, so no worries there.

right. Thank you so much trip, will give you thos rp points shortly. So i was correct..? The declaration of your "alignments" WERE indeed in your style sheet, and in your html doc you have simply "pointed" to those "unique names" and the style sheet has done the hard work so to speak. (i should really learn the terminology!)

Thanks for taking the time to help me out, it makes a huge difference for someone to take the time to explain it all. google Links are great and all and gratefully received, but there's nothing like someone understanding your issue and helping you directly.