Hoping someone can help. I have a website I am trying to edit and I need to know how to change it from a fluid display to a fixed width. The site is here:

theentrancesoccerclub.com.au/index.php

I need to either get the site so it is a fixed width or have the images centered on the banner. There are 2 images, the logo (left) and the banner. As you can see it would be difficult to have a background that matches up with the banner image.

I need the banner sorted more than anything. SO if I could center the banner and the logo image so that stayed fixed, that too would be a solution, otherwise a fixed width would do the job too.

Any clues anyone?

Cheers,

John

Hi John - this is an old version of joomla to be using on a new site, BTW.

To fix the width you'll need to alter the style sheet of the template that you are using.

If you use the firefox browser and the firebug addon - this will help you find your way around the css.

But as a starting point to fix the width -
In template.css (of the template called 247 clean .. ), find #pagecell1 and change the line that says"min-width..etc" to "width:1175px;"

You may want to adjust the width value I put it - according to how wide you want the template, etc. You may need to adjust some other widths - and , of course do check for browser compatibility when you make style changes

Thanks. I tried that but it did not seem to work. Here is the coding:

#pagecell1{
position :absolute;
top : 256px;
left : 2%;
right : 2%;
width : 95.6%;
min-width : 760px;
background-image: url(../images/cell_back.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
border-left : 1px solid #EEEEEE;
border-right : 1px solid #EEEEEE;
}

I removed the width percentage and adjusted the min width but with not much luck. Nothing seemed to change.

I went with this suggestion:

Just add a wrapper div tag around all of your content.
After the body tag insert

Code:

<div id="wrapper">

and close it at the bottom of the page.

Pop this in your template_css.css file:

Code:

#wrapper {
position:relative;
top:0px;
margin:0px auto;
width: 960px;
}

and edit the width to suit.

That seems to work. It adjusts the banner anyways which is a solution of sorts. I will have to check it on different sized monitors to confirm though. I am yet to edit the banner so if you check, with you monitor, it may not be done yet.

Thanks for your help.

John

Thanks John for feedback - the wrapper div is an excellent soln.

Sorry I didn't see that there was already a width attribute - I meant remove the min-width attrtibute and replace with a fixed width attribute

e.g:

#pagecell1{
...
width : 1125px;
..etc
}

But I think the wrapper div idea is a better fix and should be good in all browsers.

Seemed to work OK as in adjusted the banner but not the whole width of the template. I can live with this though.

Thanks for your help,

John

Unfortunately it does not look right in IE6, it is fine in IE7 and FF.

Is there any documentation of what IE6 does not like in the CSS world?

At the risk of being flippant, there have been several volumes written about what IE does and doesn't like, but no-one could find a library large enough to hold them all!

IE = Web Developer's Nightmare...

You could try HTML Forums... they are a pretty good source for CSS help to the extreme... some real brilliant people there...

As ric said - Long story - add
text-align:center;
to the wrapper div and/or to the masthead div - can't quite tell atm but one of these should fix it

Ric, thanks for the advice. I know that IE6 is not to happy with the CSS rules.

JLJ, I have added the align="center" to the masthead and the wrapper. I will have to get someone that has IE6 to check. Will get back to ya....

Cheers,

John

text-align:center;

add it to template_css.css

find something like:
#masthead {
left:2%;
position:absolute;
right:2%;
top:0;
width:95.6%;
}

add text-align:center; within the parenthesis (same for wrapper)

I'll check it if you do it now

John,

If you want to see what your site looks like in any browser... go to www.browsershots.org

It will give you screenshots of a vast array of browsers.. They even include IE!.. LOL

Cheers mate and good luck..


Ric

CSS:

#masthead{
position : absolute;
top : 0px;
left : 2%;
right : 2%;
width : 95.6%;
text-align :center;
}


HTML:

<div id="masthead" text-align="center">

Ric,

that is a bloody top tip. Thanks very much. I have submitted the site but am just waiting for the results. Can take a while it seems.

No fix in IE6. As it is a local community site, I may just put a message in to suggest that it is best viewed using IE7, FFxx, etc.