19 replies [Last post]
pwinfield
Offline
newbie
Last seen: 12 years 23 weeks ago
Joined: 2007-05-10
Posts: 8
Points: 0

Hi guys.

Just signed up here in the hope of getting some help with CSS. I've been designing for a little while and decided to ditch the WYSIWYG software as I'm trying to better my self and code by hand.

I brushed up on my HTML and have got it to a half decent standard, and then started reading CSS tutorials to add stylings.

Ive got to the stage where I need to use divs in order to arrange my content.

My question is: Should I use divs to write all of my content, in order to arrange it easier? Or is this the wrong way about doing this? So far I created a HTML Page, and ended up with blocks of text. So I add my DIVS, set them into classes and id's to make a simple 2 column setup. Floated 1 left, and 1 right, edited my margins to get them where I want them and it looks OK.

However, it is over lapping some of my background: "color" stylings that I used to highlight headings I wrote in my HTML. Is there any way to get around this? or should I remove my h1 etc and just put them all into Divs?

Sorry for the huge question, thanks if you take time to read this Smile

Regards, Pete.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 3 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Its difficult to visualise

Its difficult to visualise your problem from the description. Can you provide a link to a page which shows the issue?

As a general rule, backgrounds and effects shouldn't be in your html but in your CSS. DIV & SPAN can be used to group particular content to assign it specific styles, however nearly all of your content should be within semantic html elements (e.g. H1 - H6, P, UL/OL/LI). Low number heading elements are particularly important to search engine categorisation of your site.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

pwinfield wrote:or should I

pwinfield wrote:
or should I remove my h1 etc and just put them all into Divs?

No. Show us what you've got Laughing out loud All your bare content shoudl be marked up structurally (which it sounds like you have done) and then you use DIVs sparingly to group content, for example into columns, etc.

Verschwindende wrote:
  • CSS doesn't make pies

pwinfield
Offline
newbie
Last seen: 12 years 23 weeks ago
Joined: 2007-05-10
Posts: 8
Points: 0

Hehe ok guys but go easy on

Hehe ok guys but go easy on me!

Just uploaded it to a free host, its just my little self learning project I wasnt really planning on uploading...

http://www.freewebs.com/pwinfield

Hopefully it explains a little better. I changed the background of my left div by the way to the same color as the header to hide the overlapping.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Site is filtered for me at

Site is filtered for me at work - could you post your HTML code here please, inbetween <code></code> tags please?

Verschwindende wrote:
  • CSS doesn't make pies

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 3 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Can you point out where you

Can you point out where you see problems?

You should use Hx elements in order. One H1 for the page, near the beginning, it is your page title. Other headings should use numbers in descending order which reflect their importance to the page. Generally a heading of a particular number should be part of the content associated with headings for the lower headings above it.

pwinfield
Offline
newbie
Last seen: 12 years 23 weeks ago
Joined: 2007-05-10
Posts: 8
Points: 0

Hey, here is my HTML.What

Hey, here is my HTML.

What Im trying to say is, if you look at the div I have created on the left with the blue background, it overlaps the header. Also, I havent used h1-h6 with importance in mind I wasnt aware this was the done thing, I use higher h just for the font size that I thought looked better.

What I'm also saying is. If I removed the content below the Divs and wanted all of my content to be in the 2 columns, I would have to write all of my text inside the divs wouldnt I? Which as said above, shouldnt be done as Divs should be used sparingly.

So how do i get around this?

Thanks again.

Learning CSS Blog

Welcome

Welcome Welcome Welcome

Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!

Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!

Scrap Book

Welcome to the scratchbook.

I'm writing this to myself, and anyone else who stumbles across it to learn CSS.

When i check the code of the websites I create, it looks so messy, and more importantly I didnt understand what a lot of it meant. So now I have created this rather bland looking blog, as I am aware to be taken seriously I'm going to have to know how to code by hand. Please read on if you too are looking to learn more, hopefully the website will continue to improve as I learn, and you may even learn something yourself!

Next Steps

9th May 2007

Ok, so I went over some old HTML tutorials and brushed up on my primer HTML. Already finding it much quicker than dreamweaver.My coding is looking pretty neat.

NOTE TO SELF:

  • Start using notes in my coding, its looking good but I need to use C+F function in order to find code I need to edit faster

Also found an old tutorial about making more complex CSS websites, keeping it simple for this one to get the basics perfect. However after more tweaking I'm going to use tutorial (saved on desktop/CSS_Tuts) and improve the look of the sight drastically, more images, more interactivity and easier to update blog + comments.

The tutorial can be found at Veerle's Blog.

What I've learnt So far

2nd May 2007

So far I've been learning the absolute basics of crafting a website by hand. Whilst I know the basics of HTML I'm going over latest versions to comply with web standards. Covered:

  • How to use "Tags" to begin my HTML, simple things such as the titles,headers and body
  • How to add images, such as the banner on this website using img=src tag, wether it be to an uploaded file or a directory
  • How to add hyperlinks to a URL or directory

Those are most of the HTML I have delved into so far and I picked it up quickly again. I have quickly moved onto CSS to change the look of my website. I have learnt how to link my HTML pages to a CSS page, where I have then added simple stylings such as:

  • Borders
  • Font colour, size and the font itself
  • Background color for the whole page

Copywrite LCSSB 2007, Hosting courtesy of UK Network Services

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

erm I think that your code

erm I think that your code tags may not have worked!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pwinfield
Offline
newbie
Last seen: 12 years 23 weeks ago
Joined: 2007-05-10
Posts: 8
Points: 0

Lol yeah seems so :S Ill try

Lol yeah seems so :S Ill try and fix it.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:<snip> I havent used

Quote:
<snip>
I havent used h1-h6 with importance in mind I wasnt aware this was the done thing, I use higher h just for the font size that I thought looked better.

This exactly the way they should not be used the order of the tags is to denote their importance in the page hierarchy H1 being the primary page heading and as such regarded as being only used once per page, so you must use the numbers in respect of the structure of the page sections, you can however style these headings any way you like using CSS, there's nothing to say an h1 can't be 12px, italic, and underlined.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pwinfield
Offline
newbie
Last seen: 12 years 23 weeks ago
Joined: 2007-05-10
Posts: 8
Points: 0

<!DOCTYPE html PUBLIC

Learning CSS Blog

Welcome

Welcome Welcome Welcome

Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!

Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement! Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!Hello, this is a test of div arrangement!

Scrap Book

Welcome to the scratchbook.

I'm writing this to myself, and anyone else who stumbles across it to learn CSS.

When i check the code of the websites I create, it looks so messy, and more importantly I didnt understand what a lot of it meant. So now I have created this rather bland looking blog, as I am aware to be taken seriously I'm going to have to know how to code by hand. Please read on if you too are looking to learn more, hopefully the website will continue to improve as I learn, and you may even learn something yourself!

Next Steps

9th May 2007

Ok, so I went over some old HTML tutorials and brushed up on my primer HTML. Already finding it much quicker than dreamweaver.My coding is looking pretty neat.

NOTE TO SELF:

  • Start using notes in my coding, its looking good but I need to use C+F function in order to find code I need to edit faster

Also found an old tutorial about making more complex CSS websites, keeping it simple for this one to get the basics perfect. However after more tweaking I'm going to use tutorial (saved on desktop/CSS_Tuts) and improve the look of the sight drastically, more images, more interactivity and easier to update blog + comments.

The tutorial can be found at Veerle's Blog.

What I've learnt So far

2nd May 2007

So far I've been learning the absolute basics of crafting a website by hand. Whilst I know the basics of HTML I'm going over latest versions to comply with web standards. Covered:

  • How to use "Tags" to begin my HTML, simple things such as the titles,headers and body
  • How to add images, such as the banner on this website using img=src tag, wether it be to an uploaded file or a directory
  • How to add hyperlinks to a URL or directory

Those are most of the HTML I have delved into so far and I picked it up quickly again. I have quickly moved onto CSS to change the look of my website. I have learnt how to link my HTML pages to a CSS page, where I have then added simple stylings such as:

  • Borders
  • Font colour, size and the font itself
  • Background color for the whole page

Copywrite LCSSB 2007, Hosting courtesy of UK Network Services

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

All content after you close

All content after you close the rightcontent div would normally be contained within that rightcontent div and it would be margined away from the left with ~margin-left:210px and no width or float, although there are other ways to do things.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pwinfield
Offline
newbie
Last seen: 12 years 23 weeks ago
Joined: 2007-05-10
Posts: 8
Points: 0

Im not too sure I follow. So

Im not too sure I follow. So i could create the div, close it with nothing in it, and the content I write after it would be to the right.
And I should remove my margin in CSS, and only use a ~left-margin to keep them seperated?

If that is the case I assume I would have to create another div afterwards if I didnt want the content to be in the left any more?00000000

pwinfield
Offline
newbie
Last seen: 12 years 23 weeks ago
Joined: 2007-05-10
Posts: 8
Points: 0

Im not too sure I follow. So

Sorry for the double post, the site didnt seem to want to update it :S bad first day eh? Tongue

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

I'll have a look when I get

I'll have a look when I get home tonight Wink

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

pwinfield wrote:Im not too

pwinfield wrote:
Im not too sure I follow. So i could create the div, close it with nothing in it, and the content I write after it would be to the right.
And I should remove my margin in CSS, and only use a ~left-margin to keep them separated?

If that is the case I assume I would have to create another div afterwards if I didn't want the content to be in the left any more?00000000

I think that what you need to get your head around is the basic principle that all elements are essentially nested you start with 'html' which nests 'body' which in turn nests all other elements. Normally one would describe an overall container for the layout a single div that holds all the others in that we might have a header followed by a sidebar then a content div then perhaps a footer.

Essentially you would have this:





All your main content in this div>/p>



This represents a basic framework all your content lives in the #content div and if desired is margined away from the side of the #sidebar that would contain any navigation elements or other content that you desire.

If you wanted content in neither of the two groupings then it could be placed in a div that followed after them much in the same way the footer one does which would be cleared:both to ensure it was below the sidebar that was floated.

Further each of the elements #sidebar, #content could be further divided into sections with elements grouped in divs that perhaps were floated to act as further columns or 'areas' within their parents.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pwinfield
Offline
newbie
Last seen: 12 years 23 weeks ago
Joined: 2007-05-10
Posts: 8
Points: 0

I think I understand what

I think I understand what you mean.

So essentially, I should have a div per section of content, as you said a side bar, main content and a footer as a typical example.

Then once I have these Divs, i simply arrange them using my CSS?

Edit: Just one thing, what was the wrapper div used for in your example?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

The wrapper is often used

The wrapper is often used for things like centering your site, containing any floats, as well as background colours and images.

You don't have to use it, but don't think you must only use the divs you need - you can add others in if they help!

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

As TPH says the wrapper is a

As TPH says the wrapper is a means of containing ALL your elements in a convenient single 'box' that you can apply some specific formatting to such as centering everything on mass and providing then a frame of reference for the inner elements to position themselves from i.e if it is given a width then all the inner elements left at default width 'auto' expand to fill that parents width.

A div is a method of denoting groupings and of applying a set of styles that may be inherited down through the nested child elements, don't be afraid to use divs and at times to place the odd containing div even though it may seemingly serve no purpose as it might prove useful at a later date to apply styles such as backgrounds or faux column to.

The markup is the important area to describe first as all CSS is is the styling of that markup so css is useless without the markup to work on.

Once you have semantic elements to hold and dscribe your content i.e paragraph tags, ul lists for navigational links, headings,etc and the necessary divs to provide a means of grouping those elements and of applying specific styling you can then begin to think about the actual styling and positioning of these elements.

This is the beauty of CSS and of well formed markup; given well structured markup you can then use CSS to style it in a variety of ways, the markup framework I showed earlier can be styles in at least three different ways, as two column header top footer bottom, or as a series of boxes running top to bottom, or as a series of columns side by side, add a few more possibly extraneous divs and you can extend the options, but that is a getting slightly ahead of things.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Winx
Winx's picture
Offline
newbie
Melbourne, Victoria, Auatralia
Last seen: 12 years 23 weeks ago
Melbourne, Victoria, Auatralia
Timezone: GMT+10
Joined: 2007-05-07
Posts: 10
Points: 0

start slowly

Hi pwinfield

I believe you need to start slowly and build on what you know instead of jumping in at the deep end.

The code you pasted has a couple of problems that I can see straight up
in the doctype you have xhtmll where it should be xhtml1 that is a 1 (one} not 2 l's.
also why did you include 2 links to the same css file?
the title tag should be inside the head tag

Here is a link to an explanation of when you should use certain tags which you may find helpful [http://www.mezzoblue.com/downloads/markupguide/]

Now take a depth breath to clear you head and you will be fine