Our first CMSMS launch... take a look!

[brdon]

We finally launched our first CMSMS website.  I've learned alot (and have alot more to learn) from you folks in the forum.  Thanks.  Comments welcome.

http://www.capuchin.com


infofriar@capuchin.com

[hotaru]

Very nice; I can see a lot of work has gone into it.

If you're able, it would be nice to make the page width adjustable, so those of us stuck with smaller monitors don't have to scroll horizontally.

[brdon]

Thanks for the kind words!  Would like to make it width adjustable... and thought I had by setting the css of the containers to percentages rather than fixed widths...  Any suggestions?  I'm really new at this.  Peace.

[Jermooski]

Thats a good site for someone that is new to web design.  If the goal is to make a site that stretches across the screen... then you are right to set percentages.  Looking at the layout, there is some space in between the "Photo of the week" and the Welcome body text.  Basically, your site is 3 columns, there is some additional white space between the columns.  Try removing some of this space. 

Just go by the simple rule... The site should fit 800 pixels wide and be able to stretch 100%, (or whatever percent.)  800 pixels wide will help eliminate horizontal scroll.         

[brdon]

Thanks!  You're right, it's our first CMSMS site ... but we want to do it right... so your words are helpful.  It all looks fine on our PC's here, but it's good to hear that it is not so on others.... and we want to make it as user friendly, simple and attractive as possible.  Could you tell me what browser you are using... and what resolution?  Thanks again.

[Jermooski]

Browser is IE7, screen resolution is 1280x1024.  The layout looks fine here. Write back if you have any more questions.
 

[brdon]

Thanks for the post... I followed your advice in the previous post and shrunk things down to around 800px.  (I noticed, especially in IE that it was messing with my layout in lower resolutions - like pushing the right sidebars below the larger content block.)  At some point I think I would like to work on it so that it can expand for higher resolutions and shrink for lower.  As is, do you think it looks OK sitting in the middle of the display at your screen resolution...  It looks a little better in Firefox, but still a little lonely sitting there in the middle of the pagewrapper.  My only consolation is to know that people with lower resolutions can see it how I want them to...  Anyway, thanks again for your help!

[heatherfeuer]

My screen resolution is 1152 x 864 and it looks okay centered to me.  Being able to resize for resolution is a good reason to use percentages with width rather than pixel number.  For instance, if you want 3 columns like you do now, you could set a fixed width for the left navigation of say 250px (or whatever the default is) and then the div#main section could be divided into two more columns sized as say:

Code: Select all

div#main .left {
float: left;
width: 80%;
}
div#main .right {
float: right;
width: 20%
}

That's just one possibility off the top of my head and without testing it.

[kermit]

Thanks for the post... I followed your advice in the previous post and shrunk things down to around 800px. 

body {
  background-color: #ccc;
  color: #333;
  margin:1em 0;    /* gives some air for the pagewrapper */
}

this change eliminates the unnecessary (due to the fixed width & centering of the page) spacing on the left & right sides of the page wrapper div.. see samples attached for what it does to the right side of the page at 800px...

[gelöscht durch Administrator]

[hotaru]

Looks much better now and all the content fits on my screen. There's still about 1/2 inch of scroll for me in Firefox and Internet Explorer 6, but it doesn't interfere with browsing.

[cyberman]

Well done ...

But please look at head area of your template. Found that:

You need it only one time.

And personally I think you should choose friendlier colors for menu. You can pick someone from colors in head. An online tool will help to do it

http://www.colorschemer.com/online.html

[alinder73]

Really nice.
How do you do to make a column at the right side?
I have made a homepage based on the standard template and would also like to ad a column at the right side.

It is my first site, so I am quite a beginner.

/Anders

[cyberman]

How do you do to make a column at the right side?

Add a div in your template and take the same css parameters like left column. You have to change there only parameter float: left to float: right. To the last you have to fit div containers width.

[brdon]

I reallly apppreciate all your help and  have tried to build our site keeping cross-browser renderabilitiy and different screen resolutions in mind... as I have learned from you all.  I thought I had won the battle, but then another setback.
The site renders like I want it to in Ff in just about any resolution.  Surprise!  The problem is wiith IE7... in a resolution of 1280 x  800.  As you can see on our site (at that res.), the problem is that the image extends beyond the border of the container (and there is too much space between the containers to boot!)

As you know the containers are styled with widths in percentages (which, as mentioned show up perfectly in Firefox, but IE does a real number on them.... and the images extend out beyond the container.

Is there a work around for this?

Please help... I'm losing sleep!

We are running:  CMSMS Lanai 1.0.4 (and love it!)

http://www.capuchin.com  (the problem is its worst at 1280 x 800)

Thanks!

[Nullig]

You could try adding:

height: 1%;

to the following styles:

.homepage_content
.homepage_sidebar
.homepage_sidebar_two

It seems that IE doesn't do percentages well...

BTW, I looked at the site with IE7 and a 1280x1064 resolution and, except for the extra space between the columns, it looked fine. The images appeared to render correctly - they were all within the containers.

Nullig