Problems with columns using CSS

[EmmaGale]

I wonder if someone would be able to help please.

I cant seem to reduce the width of the sidebar. Here is the link:

http://www.northdorset-pct.nhs.uk/index1.htm

with kind regards
Emma Gale

[speed]

1) Remove width="210" from the <td width="210" id="sidebar"> tag

2) Remove width="536" from the <td width="536" colspan="2" id="maincontent" > tag

The width is now controlled by the #sidebar style in style.css

[EmmaGale]

Hi - thank you so much for your help - sorry I didnt reply sooner I have been out and about all week.

Your suggestion worked well for most of the pages - the only thing is It doesnt seem to work when I put a table in right hand column.

Does anyone know why this might be. I include a link to the page below.

http://www.northdorset-pct.nhs.uk/ma.../gpsurgery.htm

With kind regards
Emma Gale

[speed]

On the nested table remove width="100%" and change #contentTable to:

#contentTable td {
padding: 5px;
width: 583px;
}

I think the width is the correct value and I'm assuming your not using #contentTable anywhere else.

You also have broken and depreciated tags in your page.

I noticed the table is a 3 column table, but you always seem to merge the 2 right most columns, therefore I'd change the table to a 2 column it will make it simpler to find bugs.

I note that you have a lot of white space down both sides of your content area, this make the display area required bigger than 800x600.

So glad I don't use tables for layout any more.

[EmmaGale]

On the nested table remove width="100%" and change #contentTable to:

#contentTable td {
padding: 5px;
width: 583px;
}
I think the width is the correct value and I'm assuming your not using #contentTable anywhere else.

I am using the table but its for similar knid of data so that will be fine. I actually set the width of #contentTable and not contentTable td as it was giving me data tables with 583. Is this the right approach?

You also have broken and depreciated tags in your page. .

I am not sure where these are - I have run a HTML tidy and had a good look - can you point me in the right direction?

I noticed the table is a 3 column table, but you always seem to merge the 2 right most columns, therefore I'd change the table to a 2 column it will make it simpler to find bugs.

Thank you - im not sure how it became three - i only ever use the two as you said.

I note that you have a lot of white space down both sides of your content area, this make the display area required bigger than 800x600.

How would I change this? Make the structural table larger? or is it too large already? I saw the site via AOL Browser and on a 19" non-flat screen last night and it looked awful!

So glad I don't use tables for layout any more

I know I should be using CSS for everything now but I am having difficulty getting my head round the concepts. I also have to ensure that non-experienced HTML users can use the site and update easily using Macromedia Contribute - so I need to be able to let them use tables!

Thank you so much for your help so far - I am sorry to bombard you with a million and one questions!

Kind regards
Emma Gale

[speed]

I am using the table but its for similar knid of data so that will be fine. I actually set the width of #contentTable and not contentTable td as it was giving me data tables with 583. Is this the right approach?

oops, I was just testing ;)
Yes you got it right.

I am not sure where these are - I have run a HTML tidy and had a good look - can you point me in the right direction?

Go to http://validator.w3.org and run it on your page it will give you the line numbers etc.

How would I change this? Make the structural table larger? or is it too large already? I saw the site via AOL Browser and on a 19" non-flat screen last night and it looked awful!

That's a loaded question, for a start try:

body {
margin: 0 auto;
font-size: 1em;
background-color: #FFF;
font-family: Arial, Helvetica, sans-serif;
margin-top: 25px;
padding-left: 10px;
line-height: 1em;
text-align: center;
}

That should help but I haven't tried it and you may need a centre alignment div around the table for IE5, but you can check that when you do your browser testing.

I also have to ensure that non-experienced HTML users can use the site and update easily using Macromedia Contribute - so I need to be able to let them use tables!

You think they are going to cope with this without breaking something?

[EmmaGale]

One other question - I cant seem to keep the external template consistent. It seems only to be
on one or two of the pages but the table reduces in size (width).

The templaets I am using are all the same so I dont understand why they should change?

Regards
emma

[EmmaGale]

Go to http://validator.w3.org and run it on your page it will give you the line numbers etc.

Ah yes of course - blonde moment - I have validated this page before - I put the color attribute for the rule in the CSS but have yet to remove it from the code. The other items refer to the script use to generate the hit counter so I think Im going to have to use a different one. Our hosting company were not very helpful and didnt seem to know what "accessible" or "validation" is.

You think they are going to cope with this without breaking something?

:o) No im not sure at all. In fact Im petrified. I would rather look after the updates myself - but...

Anyway thank you so much for your help. I shall have a go at this after the weekend and see what transpires.

Kind regards
emma gale

[speed]

The template width problem is probably because the table width is held in the CSS rather than the HTML so Dreamweaver might be getting confused.

I don't usually use a WYSIWYG editor because of these sort of problems.

If you had said originally you were letting others update the site, I'd probably have said put the table/column widths into the HTML.

Out of interest why didn't you use a CMS?

Paul

[speed]

Originally Posted by EmmaGale

Our hosting company were not very helpful and didnt seem to know what "accessible" or "validation" is.

That sounds normal, but why are you putting a hit counter on the site?

If you want stats then you should be able to get them from the server logs, I'd say showing a hit counter is tacky.

[EmmaGale]

Originally Posted by speed

Out of interest why didn't you use a CMS?

Paul

Uhm... perhaps because I dont know what CMS is? :o)

What is CMS?

Kind regards
Emma Gale

[speed]

CMS = Content Management System.

You define a template for the pages, then map the content to pages.

The users then edit the content leaving the template alone, usually this editing happens online.

[EmmaGale]

CMS - Ah yes I do know what you mean and I would love to set up a system like that- unfortunately I am not experienced enough ----- YET!

[1centwiz]

Saw your post and totally get the chills when you said that "others will be editing the site".

Using a DWT template (CMS) works by putting in fields that can be changed and there by keeping your formatting in tack.

I use Microsoft Web Expression, I know it's not Dreamweaver, but it works for me... and they offer the option to create a DWT (Dynamic Web Template) from an existing page.

Once the DWT is created, open your template and save as, then you have the option to add fields:

<head>
<!-- #BeginEditable "doctitle" -->(with this you can add separate titles with meta tags for each of your different pages)
<title>Sample Site</title>
<meta content=" " name="description"/>
<meta content="" name="keywords"/>
<!-- #EndEditable -->

(all of the rest of the content for your header is always the same for all pages)

<meta content="en-us" name="language"/>
<meta content="index,follow" name="robots"/>
<meta content="http://www.SampleSite.com" name="URL"/>
<meta content="www.SampleSite.com- 2005-8" name="copyright"/>
<meta content="www.SampleSite.com" name="author"/>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type"/>
<link rel="stylesheet" type="text/css" href="scripts/_style.css"/>
</head>
<body>
<div id="container"><a name="Back"></a>
<div id="header">
<div class="headerbox">
<h1></h1>
<h2></h2>
<h3></h3>
</div><!---end headerbox--->
<div id="menu">Button links or what ever
you use for your menu goes here
</div><!---end menu--->
</div><!---end header--->
<div id="content">

<!-- #BeginEditable "main" -->
Only this area below is allowed to be changed by others. You can choose to place the BeginEditable after what ever coding you want, like after the <p> keeping the Main <h4> unchanged. As it is now, the users would need to be able to understand that the <h4> or what ever number you have chosen per the CSS, is the Title of the information they are posting below in the <p> section.

<h4><b>(main)</b></h4>
<p></p>

<!-- #EndEditable -->
Nothing after this can be changed by other users since they do not have access to the DWT file. You can hide it in a folder of it's own so that they won't even be tempted if you like. You can also start this tag before the </p> to make sure that the format will always close properly.
<br/><!---needed for IE so that it won't wrap on you---></div><!---end main area--->
<div class="rule"></div><!---used for line instead of <hr> per style sheet--->
<div id="footer">
<p></p>
<p ></p>
<p></p>
<div class="menu">Put your bottom
nav grouping here</div>
</div><!---end footer--->
<div class="rule"></div>
</div><!---end container--->
</body>
</html>

Using this method, shows the user that by shading the un-changable areas, and leaves the editable areas white, or un-shaded.

Using the editing program you specified would only allow the user to change what is un-shaded. If they try to change the shaded areas, it will automatically revert to the DWT and not save changes made to the shaded areas. Cool huh?

I hope this helps. I am sure that you can figure out where your tags fit into this format, you may have named your div's differently or have more or less depending on your site layout.

Also, here's a great resource that has helped me understand CSS: learn web standards :: hands on css tutorial

Good luck and hope this helps!
Cheers,
Tamra