Fixed width site

[warrenerjm]

Hi

 

I made an error recently of using the knowledge base as instructions to enable me to show my categories & sub catagories. I was helped by wendyjames on the forum & told that was for future editions. I want to try the fixed width site, but want to check I have the best, easiest & correct version. This is it:

 

This Contribution allows you, with a minimum of work, to make your

osCommerce website a fixed width, with a border around the site,

with a background outside of the fixed width site which can be a

contrasting colour, and for the site to be centred on the screen.

 

 

It allows the viewer who has a screen resolution of 800x600 to

view the whole of your site without horizontal scroll bars

appearing.

 

As with all Contributions please backup any files you intend to

edit. The instructions below refer to an unmodified install of

osCommerce.

 

Thanks to Devhype for posting the idea of reducing the modifications

needed in order to make your site fixed in width and centred on

the page. I have taken my original code modification to stylesheet.css,

and added Devhype's idea of just adding the new div class to the

header.php file and the footer.php file.

 

As with the original contribution this works with both

Internet Explorer and Mozilla based browsers, also the

Mac Safari Browser.

 

----------------------------------------------------------------

 

1. A minor modification is required to your stylesheet.css file.

 

Replace the following code:

---------------------------

 

BODY {

background: #ffffff;

color: #000000;

margin: 0px;

}

 

with:

-----

 

BODY {

text-align: center;

background: #ffffff;

color: #000000;

margin: 0px;

}

 

.fixcenter {

width: 758px;

border: solid; border-width: 1px;

background: #ffffff;

color: #000000;

margin: auto;

margin-top: 20px;

text-align: left;

}

 

2. On-page changes:

 

In /catalog/includes/header.php

-------------------------------

immediately below this piece of code

 

if ($messageStack->size('header') > 0) {

echo $messageStack->output('header');

}

?>

 

add

 

<div class="fixcenter">

 

In catalog/includes/footer.php

------------------------------

 

Immediately below the closing php tag

 

?>

 

add this

 

</div>

 

 

That's all you need to do. Within the BODY style, where you see background: #ffffff,

this covers the background of the screen outside of the website. You can change it

to whatever colour you like.

 

Where you see 'text-align: center' this is in place because some versions of Internet

Explorer Browser do not recognise the 'margin: auto' placement style

 

The closing 'text-align: left' is left in place, because even though osCommerce is handled

within tables and this style is declared before the tables start, some versions of Internet

Explorer may try to center the text in the absence of this declaration.

 

This piece of code 'margin-top: 20px' places the start of the web page 20 pixels below the

top of your screen.

 

 

 

I hope this is easy enough to do, even for complete beginners at osCommerce.

 

Rhea Anthony (Vger)

[email protected]

 

 

Also, using the correct version I successfully achieved the category titles to show, but not the sub categories. I have checked but can't find out what I have done wrong. The amendment says the second change is connected to the sub categories.

 

 

Please could someone help me out again.

 

Thank you.

Julie

[moonbeam]

Yes, That is Vgers fixed width. I used it and am very pleased with it!

 

Moon

[warrenerjm]

Yes, That is Vgers fixed width. I used it and am very pleased with it!

 

Moon

 

Brilliant. Thank you Moon. I am new & learning lots, but when you fall flat on your face it is nice to know there are people out there to help you up. I will try it now. It has been clearly written, which is always good for us novices. Thanks Vgers

 

Julie

:)

[♥Vger]

You're welcome.

 

Vger