Im going to start using css today and i have looked at the w3schools site but i cant find any code relating to creating headers, footers, nav bars, etc. Could someone post some code for me to use?

I take it that you can create boxes for those things and theyll stay the same size no matter what is inside (like if i have a box for text / main content of a page).

Have a play with some of these -> http://www.candsdesign.co.uk/page-templates/

use the "Click here to see this layout." and the "Show Code" links to grab the HTML & CSS

I had a look at that link and i couldnt find anything about code for creating a header, but ill have another look.

Heres what i have so far :

http://leafarmusic.wordpress.com/

Is there a way to get rid of that left column?

You can check out W3 info on creating navs and div layouts here (Jump to "classification" section)
http://www.w3schools.com/css/css_examples.asp

You can also look at http://css.maxdesign.com.au/floatutorial/ AND
http://css.maxdesign.com.au/listutorial/

Div boxes will only "stay the same size" if you tell them to by width and height. But maybe more common with main content areas to just specify a width and let the div grow naturally with your text flow.

Is there a way to get rid of that left column?

You can remove that div all together, but you won't have those links available for archiving, LOG IN, etc.! Wordpress looks for that class="sidebar" to display that data from the database.

To remove you have to remove the code within the div that holds that information. But you should make sure of what you are deleting! ie everything between the sidebar opening<div> and its closing</div>.

You should watch this before diving into a full custom design for Wordpress:
http://css-tricks.com/video-screenca...ress-part-one/

Hope this all helps!

Ill look into all that. As a beginner, should i just work with whats there for now, and customise around it as best as i can?

I watched a few minutes of the video and it seems to be about wordpre.org. Im with .com

I am quite confused then...

it seems to be about wordpre.org

Your site seems to be a Wordpress-based site to me?

What am I missing?

It is. I created a wordpress.COM account, paid for being able to use CSS, and i cant do anything.

For example, i copied and pasted this code from some website (its supposed to create a header) :

/* Reset Body Property */
body{border:0; margin:0; padding:0;}
#navbar-container{background:#000000;}
#int-site-container{
background:url(img/int-bg.png) left top repeat-x;
height:166px;
}
#logo, #navbar, #int-site{
width:800px;
margin:0 auto;
}
/*------------------*/
/* LOGO */
#logo{height:54px;}

/*------------------*/
/* Nav Bar */
#navbar{
height:26px;
line-height:26px;
}
#navbar a:link, #navbar a:visited, #navbar a:hover{
color:#FFFFFF;
font-weight:bold;
margin-right:20px;
text-decoration:none;
}

And it did nothing. If CSS is so easy to use and so versatile etc etc etc etc,why is it a nightmare to create a header / footer / nav bar?

This is impossible. I cant move on with my site at all. Every "easy" tutorial goes so in depth that i dont know what to read and i dont know what to do. The people that write this stuff should write in clear english, defining what things mean, so that idiots like me can understand.

Geez, all i want is a page with a header/footer/nav bar. I could scream.

First of all, you're not an idiot.

What you may be missing is that CSS sort of "tells" the HTML page where to put things, what color to make text and LOTS of other information. However, all of the CSS information will mean nothing if you don't connect it to the div(or section) on the HTML page in which it represents with either an "id" or a "class" name.

For instance; if you wanted a header that is 960 pixels wide and 150 pixels tall with a black background then in your CSS file you would have to put something like:

#header {
width:960px;
height:150px;
background-color:black;
}

And in your HTML page you would need a div like this:
<div id="header"> then your content within the header could go here </div>

Do you see how #header on the CSS page matched the id="header" on the HTML page? The "#header" is a way of saying "the item on the HTML page with an "id" that equals "header" should follow these rules."

CSS is not "so easy to use", I don't care how many people after me in this post say it's simple. When I started out, it was confusing.
Do trust when I say that if your knowledge of CSS is limited, starting off by customizing a Wordpress theme may be quite a challenge.

I hope this helped you.

I tried that and this is what i got :

http://leafarmusic.wordpress. com/

Ok, one thing you must know - ID's MUST be unique. You have <div id="header"> more than once, that's not proper. If you want to re-use a set of CSS rules, then you create a CLASS, so you'd change your html to <div class="header"> and change your css from #header to .header (period followed by the name).

You might want to check out this article: http://www.webmaster-talk.com/css-fo...he-basics.html

I sure hope that red and purple is just for testing purpose.. it hurts my eyes

CSS has a very definite learning curve, but once you get it, you'll be glad you took the time to learn it.

Seriously, i dont get it. could you just post some code that i could use, and then i can look at it and tweak it.

All i want is a header and footer (ok i have that), a vertical nav bar on the left, and two boxes for content, one above the other, in the middle. And for some reason the colour of the main content bit in the middle is always the same as that of the header.

Its like someone somewhere is trying to make my life difficult, and playing tricks on me.

And i cant seem to be able to embed widgets or webpages. How do i do that with CSS? I can do it with html on another site that i have but not on wordpress.COM. I put the code in the html editor and nothing happens.

Pictures is another one. I upload a picture, with the intention of using it later, and when i try, it doesnt work. I can only do it if i do it immediately after uploading it. And now, i cant do it at all.

Ive realised now that the people who invent this make it deliberately tricky to create an industry to get money from those who need help. In 2009 theres no excuse for making people go through all this.

But anyway could you just post some code please. Im totally stuck.

This won't help you in dealing with wordpress but in may help you understand CSS a little better. http://jkin.com/simple/

This was uploaded some time back in response to another post here at these forums.

You may copy, use, whatever anything you find in that folder.

Thanks.

Aaah hold on. When i put in the code, it doesnt work properly. On my site i have the sandbox theme, and as fas as i know theres no way to have no theme.

Id like to get rid of my theme and have nothing but a blank page to start with. Its like when i put in css code im superimposing it all on the theme, so its like one website on top of another. I want to get rid of all the c.r.a.p. thats there so there wont be any weird conflict.

Ok, then here's a whole lot of blank layouts:
http://blog.html.it/layoutgala/

Thanks for your effort. Im looking at all your links and they are slowly getting me there. As ive mentioned im using wordpress, but it has become a nightmare to deal with. Im going to my old site on officelive. Ill use css if i can get my head around it, or ill use their own editting facilities, or both.

Ive said before that i dont believe that i have to become a techhead to have a decent enough website. And i also think that in some ways i am getting very biased information here sometimes. Biased in that its coming from people who are really into this coding stuff and probably dont think much of the standard editting facilities that come with some sites, like officelive. As far as im concerned, if something does the job, thats that. Also everyone has a slightly different opinion and im not in a position to judge for myself whats best.

Ah, I remember when CSS frustrated the heck out of me when I was trying to make a simple header/footer/content area.

Just read read and read!

Don't forget to actually sample as well.. all that reading and no testing will get you nowhere!

Biased in that its coming from people who are really into this coding stuff and probably dont think much of the standard editting facilities that come with some sites, like officelive. As far as im concerned, if something does the job, thats that

Except that if it's doing the job BADLY, it could do your site more harm than good. You must also get away from the idea that the website is just for YOU. If you didn't want OTHER people to use it, to visit, then there would be no point in having a web site at all. When you put something out there for the public, you MUST consider things like accessibility, usability, load times, and other such things. Badly coded sites CAN have a negative effect with search engines if certain important elements are ignored in the build process.

A lot depends on what the purpose of your site is, what your goals for it are. If it's just personal, all the stuff I mentioned may not mean squat. If you're depending on it for business, you should not be ignoring those things. If you're going to build web sites for a living, then you MUST not ignore any of it.

You don't have to be a 'tech head' to learn HTML or CSS, it's really NOT rocket science, and most people can grasp the basics in a short period of time. The challenges lie in cross-browser compatibility, and you have Microsoft to thank for the majority of that nightmare - the bane of all web designer's existence.