CSS & DIV expert please!!

[PaulGrimshaw]

Hi,

I am on a v.steep learning curve with divs, never used them before and I am rewriting everything with them so I can get rid of tables.

I have so far rewritten most of it without too much problem, however with the brochureprimary and primary I am having trouble. The footer bar is not fitting correctly, and I am guessing its something to do with floats, but as I say, I am learning this all new so have no idea really.

Please could you take a look at my website and tell me what I am doing wrong? (I have also attached the relevant htmls).

The index.html is in div and needs fixing. any brochure page I have left as table so you can see what I want. I have yet to modify the product htmls, so I dont know if that is causing this.

Div page: http://www.anything-goes.co.uk/acata...d_liquids.html
Tab page: http://www.anything-goes.co.uk/index.html

Thanks for your help!
Paul.

[jont]

Trying to read the compacted HTML makes hard work.

Couple of things I have noticed:

1. you are not using any <div id="footer"> or <div class="mySTYLE"> for any of the <div> tags I saw.. you are placing all the formatting code into the HTML ... this is wrong and the whole point of XHTML and CSS in seperating the markup from the formatting. All the formatting needs to be in the external actinic.css style sheet

2. I would create a heirachy of <div> as follows:

<div id="wrapper"> to contain everything
<div id="header"> for the header
<div id="container"> which has 2 sub <div> of
....<div id="leftNAV"> left hand navigation
....<div id="content"> main page content
<div class="clear">... set with a clear:both statement in the CSS
<div id="footer"> the footer text at the bottom

the "clear" will allow the footer to span the navigation and the content

HTH

[PaulGrimshaw]

thanks

Thanks jont, got it working now.

I have been using a mix of external css & inline css whilst I have been learning - moved it all across now.

Do you know if there is a valign equivelant in css?

btw, can you tell me what the ID does? I know I can use it within javascript so it knows what I am talking about, but are there any other reasons for having it?

Now i have done all this, its onto the products and other act files... yay!

Thanks for your help,

Paul.

[jont]

Hi Paul,

in CSS everything will align from the top as default - if you need to move down you can use a combination of margin-top and / or padding-top to move elements or content down. If you want to get very tricky you can use postion:absolute but that can get very messy cross browsers unless you trick the absolute positioning by nesting the block element inside a relatively placed <div>

An id <div> is a unique name for a page division - it can only appear once on the page eg id="footer" .. id="header" etc. The stylesheet is created using the octothorpe (#) to declare a id

eg:

#header {
font-family: verdana, sans-serif;
colour: #ffffff;
}

the use of id <div> tags increases the specifity above .classes to just beneath inline styles so they are very powerful but can be used just the once

HTH

[PaulGrimshaw]

so if I have a class with fontsize, weight, color etc which is referenced by a lot of divs, I could then use a id/# combo on one of them to change the fontsize, but everything else stays the same?

Thanks,
Paul.

[jont]

Classes can be used over and over but an id can be used only the once on a page.

A id <div> is a container for a specific part of the page. Eg say you want the content area to be a red background with white text. .. you would use

#content {
color: #ffffff
background-color: #990000;
}

if you want all hyperlinks inside the content area to be grey you would then use

#content a {
color: #999;
}

even though the rest of the site may be set to use pink hyperlinks any that are within the content area of the page are over ridden to grey ... a id <div> has a higher specifity - it pulls rank over the basic pseudo class a:link, a:hover etc

This saves you the time of having to specify each hyperlink in the content area with its own class ... a real pain ... you are setting a global declrartion for tags within a named (id) division.

Classes are best suited to ad-hoc changes and even <span> tags .... id's are best to control larger swathes of the page in one hit.

Hope that helps