Ok, this is a chat forum, so let's assume we are all sitting around with a coffee and I decide to speak. Mmm... Well I just can not get my head around CSS. Why, that's my frustration. Too many tutorials but very few good teachers. Ok so HTML dog is an EXCELLENT website and I have learned a lot, it is nicely laid out. The W3C site is also remarkable. So is CSS for beginners, Lynda.com, great videos. CSS without Tables. And many other books. Firebug is fantastic for learning and seeing what is where, all of these sources and a few other good ones all complement each other and provide excellent resources for the ignorant such as me and the absolute beginner, such as me. So Why am I unable to build a basic single web-page after THREE WEEKS?

 

OK, so I can type a dozen paragraphs add a few images and links and everything is neatly aligned left. But that is it. Yesterday I took the plunge, decided to put an image to the right of a centred title in a block element where the short paragraph would be on the left. Aah! and ouch! After two days I'm sick! Now I realise that what I am missing is PRACTICAL teaching from the beginner's perspective and not the know-it-all-perspective, and this separates all the knowledge and theory of those who write about their skills and the ones that can teach their skills, I'm not complaining about anyone who shares their knowledge freely, I am grateful and thankful to them, but so many of these books are dealing with this subject for beginners in a rather not so natural manner. The balance is all code and correctness orientated, and the few examples given are so hard to assimilate without the VISUAL equivalent.

 

It was about a week ago that I started to try and track down a book or a website that would put the jigsaw together. For example, If I want to build a web page with 5 images in line underneath a centred heading with text in such a such postion and links here. HOW exactly does one begin? How do you actually visualise DIVS and CLASS id's actually on the paper? Not the code, not the theory of how it is written or constructed, BUT the actual PRACTICALITY of the physical page. A web page is visualisation, not code. Yes I know we need to know the code. But ask me anything about the basic code of XHTML or CSS and I can now answer it. But ask me to put all the jigsaw pieces together to make the picture - that is the problem. And this is where I am trying to find some book or source that shows you how to VISUALISE that DIV, CLASS and code as you see the page in your head.

 

Ok so as a beginner I am ignorant, I know, but I have theory coming out of my head, thought it all made sense until a few days ago when all my theory fell apart in one massive landslide. I could not bring that theory and turn it into a PHYSICAL reality on the simplest of pages, and I don't mean all left aligned either.

 

Hey coffee is cold now, anyone want another one?

Daft suggestion but why don't you find a simple straightforward page you like the look of then view the source code and copy it. Then look at the code and at the web page to see how the divs etc work. If you go to my website www.seo4all.co.uk believe me the code is all quite clean and easy, the site is new and therfore quite basic at the moment. To get the source code go to page on your browser and click view source. Hope this helps

Hi there, thankyou I will certainly go to your website. No it was not a daft suggestion. However I have been viewing quite a lot of web pages with firebug in firefox. I thought this would help, but it kind of left me with so many questions that I just could not answer. I actually have just found something that might help, but I will certainly look at your page. Trouble with all those divs in the pages that I viewed was that when I outlined the boxes and content and viewed the element structure in firefox it was actually contributing to the confusion of how it was conceived in the moment of planning the website. It's a bit like looking at a finished jigsaw, you understand the picture, you see how the elements fit together, you get the general planning of its build. But then you break up the jigsaw and suddenly you are left with all the pieces and well that's another story. Anyway, perseverence and I guess in a year I shall be embarrassed by this email that I am writing.

I learnt my coding by doing what you are doing but one problem I found when looking at the source code for many sites was that it was unnecessarily complex as many people use CMS systems or visual design packages(ie you don't need to know html) which bloat the code. My husband who does the real coding for our sites hates untidy code and basically writes everything we use so that it is really tidily coded, that's why I thought looking at our source code would make it easier for you to see how each bit works. After all he had to teach me some bits so keeping it really really simple was a necessity!!!

 

Have you looked at html playground - I did use this a long time ago and haven't looked at it since but it might help.

 

Good luck, do ask if I can help anymore.

Yes that is funny that you should say that, I was looking at many web sites and thought often that this so full of waffle, would then view another more complex page and see much less coding. I did not think of that, maybe too many of the sites were done in dreamweaver?

 

Thanks for your tips.

Not sure what it is you need to make the click, but once you get it you will never go back.

 

Personally it wasn't a single instance of what made it click, it was perseverance.

 

It started out as releasing a few sites with basic css applied and at each new site interval (all practice sites) a new css technique was applied.

 

Eventually you get the hang of it.

 

I normally tend to relate to layouts as different ornaments or something similar in a shelf. Some are pushed over to the left slightly more than others and some up and inbetween. All of which are divisions to the greater picture. The minute you can target each ornament (or division) and arrange it as you please then you will have a happy bookshelf.

 

Remember if you want to re-arrange the bookshelf with CSS you only have to grab one ornament at a time and reposition it. To get it the way you like that wont necessarily involve pulling every ornament off. Just pick up the one you need, move it along a little bit and you are rocking.

 

If you could have a video tutorial demonstration your 5 biggest worries with transitioning from tables to CSS, what would that be?

Actually there must be something on Youtube - there are videos for anything on there.

The best thing to do is create box's that are certain sizes and colours for certain parts of a web page(Header, navigation, sidebar, footer..)

 

Without teaching you to suck eggs....if you create the HTML first using div's(<div>) and then using css, make every div a different colour and you will see how the page lay's out. I could and would write you a whole tutorial on css as i love teaching people this and completely understand how hard it can be for some people. But instead i have attached the html and css so you can have a good look.

 

Once you get the hang of laying out your pages this way, things should seem a bit more clearer. Also it's a good idea to learn about the document flow and the css box model!

 

If you don't know this then i will happily tell you?

 

- Neil

my_templates.zip

Hi photontorpedo

 

Have a look at this thread its got some good suggestions - thread