Getting the text to move to the left is relatively simple. You have correctly eliminated the "leftcolumn" div, so now all you need to do is adjust the style in the style sheet (Layout_2.1-Fixed-Fluid.css). The definition for the "contentcolumn" looks like the following. As you can see, the left margin is set to 215 pixels. This was intended to accomodate the "leftcolumn", plus a little extra to space the text away from the column.
Code:
#contentcolumn{
margin-left: 215px; /*Set left margin to LeftColumnWidth*/
color: #ffffff
}
Change it to the following. This gives a 20 pixel margin on the left, so the text doesn't run into the side of the browser.
Code:
#contentcolumn{
margin-left: 20px; /*Set left margin to LeftColumnWidth*/
color: #ffffff
}
You should also fix your image references. The "align" property still works with most browsers, but is depreciated and may not work in the future. And, the text on the right of the image is too close. This is easily fixed because there is already a style in the style sheet to handle this. The code currently looks like this.
Remove the "align" property and add a "class" assignment. There is a style in the style sheet named "image_left". This style "floats" the image left and applies top and bottom margin of 10 pixels, plus a right margin of 15 pixels. It also forces a default border of zero pixels, in case the image is used in a link. If you wanted the image to "float" right, and have the text wrap and space properly, there is a "image_right" style.
Your also cutting and pasting from an old document. You have divs with IDs or classes that don't exist in the style sheet. Like "userLinks", "extraContent2">, and "contentContainer". These are hold overs from your previous layout and are unnecessary. All of your paragraphs should be simply contained in "paragraph" tags. That will set the font type, color, and size from the style sheet. Anything extra, like bolding, italics, font/color change, would then be done within the paragraph with a "span". It could be done other ways, but you already use a lot of "span" tags so that should be familiar.
Thanks guys. However when I change the width in the style sheet it affects all the pages including the ones where I require the left column. It's only this one that I need centralised at present.
http://blackhorsekawasaki.com/Cadwell.html
Do I have to create different style sheets for certain pages depending on which layout I require.
Your also cutting and pasting from an old document. You have divs with IDs or classes that don't exist in the style sheet. Like "userLinks", "extraContent2">, and "contentContainer". These are hold overs from your previous layout and are unnecessary. All of your paragraphs should be simply contained in "paragraph" tags. That will set the font type, color, and size from the style sheet. Anything extra, like bolding, italics, font/color change, would then be done within the paragraph with a "span". It could be done other ways, but you already use a lot of "span" tags so that should be familiar.
Thanks Philo, I'm not too sure which to remove though.
Was checking my homepage www.blackhorsekawasaki.com on www.viewlike.us
All looks reasonably ok except at 800x600......
In normal viewing the page looks fine in Firefox but in IE7 the writing is very close to the side of the left column. Could I also ask if the coding for the page footer is ok
You can certainly do it the way Scutterman suggested. It will work just fine.
Personally, I would modify the "contentcolumn" style in the style sheet, and then create two sub classes. One for one column pages and another for two column pages.
An example might look like the code below. I removed the "margin-left" definition from the "contentcolumn" style and then created the styles "one_col" and "two_col". Each of these styles contains different "margin-left" settings that will be used to compliment the "contentcolumn" style in your HTML document.
Code:
#contentcolumn{ color: #ffffff; }
.one_col{ margin-left: 20px; /* Set a 20 pixel left margin for a one column display */ }
.two_col{ margin-left: 215px; /* Set a 215 pixel left margin for two column display */}
Simplifying your main page, the code looks like the listing below.
Code:
<div id="contentwrapper">
<div id="contentcolumn">
<!-- All of your page content -->
</div>
</div>
On pages that will require two columns, the "contentcolumn" div would look like the following code. This says that the "contentcolumn" div is of the "two_col" class and sets the left margin to 215 pixels.
Code:
<div id="contentwrapper">
<div id="contentcolumn" <span style="font-weight:bold;">class="two_col"</span>>
<!-- All of your page content -->
</div>
</div>
On pages that will require one column, the "contentcolumn" div would changed to look like the following code. This says that the "contentcolumn" is of the "one_col" class and sets the left margin to 20 pixels. Then you would delete, or comment out, the "leftcolumn" div from the HTML document.
Code:
<div id="contentwrapper">
<div id="contentcolumn" <span style="font-weight:bold;">class="one_col"</span>>
<!-- All of your page content -->
</div>
</div>
While this is a bit more complicated, it keeps all the styling in the style sheet and allows your HTML page to select the style it want's to be.