change page width please

[soulja90]

Hello,

How do I change the width of my page?

I would like it to be around 750 or so for each page on my site

Can someone tell me what I need to do on the stylesheet?

I want it to appear like that on internet explorer.

Thanks

JB

CMSM ROCKS AND SO DOES EVERYBODY ON THIS FORUM!
Thank you for all your help so far!

BEST CMSM EVER (I think that should be my signature - heh)

[biffs]

As it is now, doesnt CMSMS change the width from 720 to 950?

If you would like it to be a fixed width, then change the css and set a width: 750px; in the pagewrapper class i believe it is

[RonnyK]

JB,

the width for most templates is set in both CSS and the stylesheet:

Check your css:

Code: Select all

max-width: 80em;   /* IE wont understand these, so we will use javascript magick */
min-width: 60em;

Code in the template that sets the width:

Code: Select all

#pagewrapper {width:expression(P7_MinMaxW(720,950));}

Ronny

[brdon]

As the other forum members have said, you change the page width in the main stylesheet... if you gave us the link to your site, I could tell you the name of the Stylesheet.  The div you want to look for is:  div#pagewrapper.  It probably says 80em... which is a flexible measurement.  If you want to make it a fixed 750px, then you just change the 80em to 750px... (although you can usually shoot for around 800 or just a little under.)  Hope this helps.

[soulja90]

Mr.brdon

you got it right on the money!

however - i have a cute little problem - how can i adjust to the same size too - the width that is

Thanks all of u for yourhelp

JB
CMSM RULES!

[RonnyK]

JB,

what is exactly your problem, I can't really tell from your last question. Attached to your template are several Stylesheets. The attached stylesheets are visible by clicking the CSS-button on the line in the 'Layout -> Templates'. The main stylesheet is the one with a similar name as your template. (probably starting with 'layout:'). In this stylesheet is the width for the pagewrapper set, to a min-max width. If you don't want a min-max width, but fill the entire page, just delete the 2 lines, otherwise you can change these, or even replace them with 'px'. The current setting of 60em, means that it's felixble as it stands for the width of the letter 'm', so this is 60 times the width of the 'three legs of the' letter 'm'. Resizing is then flexible as the width grows with the font-size used. Pixels is fixed. In the template self is the width additional set to have IE get it as well. So if you want a fixed width throughout, you can change the four mentioned widths to reflect something like '800px'.

Ronny

[soulja90]

Sorry Ronn - what I meant was my footer

everything changed but my footer stayed the same.

So what I meant was how can I change the size of the footer to the rest of my body which is currently at 700.

Thanks

JB

[RonnyK]

JB,

if you've used one of the standard templates, then the footer-container is wrapped inside the total container for the page-wrapper. So either your footer has his own width, or the container for the footer is misplaced. Do you have a link.

Ronny

[soulja90]

Hi Ronny,

My site is

http://www wdclub com

and here is my stylesheet: Hope it helps:)

/*****************
browsers interpret margin and padding a little differently,
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0em;
}

/*
Set initial font styles
*/
body {
  text-align: left;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 75.01%;
  line-height: 1.1;
}


/*
set font size for all divs,
this overrides some body rules
*/
div {
  font-size: 1.0em;
}

/*
if img is inside "a" it would have
borders, we don't want that
*/
img {
  border: 0;
}

/*
default link styles
*/
/* set all links to have underline and bluish color */
a,
a:link
a:active {
  text-decoration: underline;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
  background-color: inherit;
  color: #18507C;
}

a:visited {
  text-decoration: underline;
  background-color: inherit;
  color: #18507C;                /* a different color can be used for visited links */
}


/* remove underline on hover and change color */
a:hover {
  text-decoration: none;
  background-color: #C3D4DF;
  color: #385C72;
}

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

/* center wrapper, min max width */
div#pagewrapper {

  border: 1px solid black;
  margin: 0 auto;    /* this centers wrapper */
 
max-width: 780px;  /* IE wont understand these, so we will use javascript magick */
min-width: 780px;

  background-color: #fff;;
  color: black;
}


/*** header ***
we will hide text and replace it with a image
we need to assign a height for it
*/

div#header {
  height: 90px; /* adjust according your image size */
  background: #85C247;         
}

div#header h1 a {
/* you can set your own image here */
  background: #85C247 url(images/cms/logo1.gif) no-repeat 0 12px;
  display: block;
  height: 80px;            /* adjust according your image size */
  text-indent: -999em;  /* this hides the text */
  text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

div#search {
  float: right;
  width: 23em;    /* enough width for the search input box */
  text-align: right;
  padding: 0.6em 0 0.2em 0;
  margin: 0 1em;
}

div#sidebar {
float: left; /* set sidebar  ...
...  right instead. */
width: 26%; /* sidebar width, if you change this please also  ...
... -style:italic;
}

div.breadcrumbs {
  padding: 1em 0 1.2em 0; /* CSS short hand rule first value is top then right, bottom and left */
  font-size: 90%;            /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
  margin: 1 1em;              /* css shorthand rule will be opened to be "0 1em 0 1em" */
  border-bottom: 1px dotted #000;
}

div#content {
  margin: 1.5em auto 2em 0; /* some air above and under menu and content */
}



div#footer {
  clear:both;      /* keep footer below content and menu */
  color: #fff;
  background-color: #85C247; /* same bg color as in header */
}

div#footer p {

  font-size: 0.8em;
  padding: 0.5em;      /* some air for footer */
  text-align: center; /* centered text */
  margin:0;
}

div#footer p a {
  color: #fff; /* needed becouse footer link would be same color as background otherwise */
}

/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
  height: 1px;
  margin: 1.5em;
  border-bottom: 1px dotted black;
}

/* relational links under content */
div.left49 {
  float: left;
  width: 49%;  /* 50% for both left and right might lead to rounding error on some browser */
}

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
}




/********************
CONTENT STYLING
*********************/
div#main {
  margin: 2%; /* this will give some room around the text in the main content area */
}


/* HEADINGS */
div#content h1 {
  font-size: 2em;  /* font size for h1 */
  line-height: 1em;
  margin: 0;
}
div#content h2 {
  color: #294B5F;
  font-size: 1.5em;
  text-align: left;
/* some air around the text */
  padding-left: 1.5em;
  padding-bottom: 1px;
/* set borders around header */
  border-bottom: 1px solid #e7ab0b;
  border-left: 1.1em solid #e7ab0b;
  line-height: 1.5em;
/* and some air under the border */
  margin: 0 0 0.5em 0;
}
div#content h3 {
  color: #294B5F;
  font-size: 1.3em;
  line-height: 1.3em;
  margin: 0 0 1.5em 0;
}
div#content h4 {
  color: #294B5F;
  font-size: 1.2em;
  line-height: 1.3em;
  margin: 0 0 0.25em 0;
}
div#content h5 {
  font-size: 1.1em;
  line-height: 1.3em;
  margin: 0 0 0.25em 0;
}
h6 {
  font-size: 1em;
  line-height: 1.3em;
  margin: 0 0 0.25em 0;
}
/* END HEADINGS */

/* TEXT */
p {
  font-size: 1.5em;
  margin: 0 0 5em 0;  /* some air around p elements */
  line-height:1.1;
  padding: 2.0em;
}
blockquote {
  border-left: 10px solid #ddd;
  margin-left: 10px;
}
pre {
  font-family: monospace;
  font-size: 1.5em;
}
strong, b {
/* explicit setting for these */
  font-weight: bold;
}
em, i {
/* explicit setting for these */
  font-style:italic;
}

/* Wrapping text in tags. Makes CSS not validate */
code, pre {
white-space: pre-wrap;      /* css-3 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;      /* Internet Explorer 5.5+ */
font-family: "Courier New", Courier, monospace;
font-size: 1em;
}

pre {
  border: 1px solid #000;  /* black border for pre blocks */
  background-color: #ddd;
  margin: 0 1em 1em 1em;
  padding: 0.5em;
  line-height: 1.1;
  font-size: 90%;  /* smaller font size, as these are usually not so important data */
}

p.small
{
line-height: 1.1
}
p.big
{
line-height: 2
}

/* END TEXT */

/* LISTS */
div#main ul,
div#main ol,
div#main dl {
  font-size: 1.0em;
  line-height:1.4em;
  margin: 0 0 1.5em 0;
}
div#main ul li,
div#main ol li {
  margin: 0 0 0.25em 3em;
}

div#dl dt {
  font-weight: bold;
  margin: 0 0 0.25em 3em;
}
div#dl dd {
  margin: 0 0 0 3em;
}
/* END LISTS */

[RonnyK]

Can you show your template as well, the footer is misplaced, that is visible. Your pagewrapper has a solid line surrounding it, your footer is below that area. So somewhere across the line is an additional placed that didn't start. You've quite some info on your site, so the template itself might be better readable.

Ronny

[soulja90]

Hey Ron,

Thank yo so much for helping me out. Here is my template.

Code: Select all

Thanks.

JB

[RonnyK]

You deleted the

  , in the original it is just above the main-div.

Because of that deletion, a is available to much before the footer, closing the pagewrapper and putting the footer outside.

Ronny

[soulja90]

Hey Ron,

Thank you tons - however - i just noticed something that made me sad . . .

The changes only worked on Mozilla firefox - nothing on internet explorer.

Is there a fix for that?

The page width changes didn't change anything on internet explorer

the footer
is just a little bit up and showin whitespace.

Thanks for all your help. I hope there is a fix.

Take care

JB

[RonnyK]

Did you change this piece of code yet, as it is specific for IE6 and below, in the template:

Code: Select all

#pagewrapper {width:expression(P7_MinMaxW(720,950));}

FF and IE7 understand the logic as it is in the CSS, for IE6 you specifically have to adjust this as well. The 720 and 950 is the min- and max-width.

Ronny

[soulja90]

hey ron,

if you are refferring to the div content yes i added that. thanks

can you help where i should put the code you just sent in?

this is how it looks right now and it didnt make any difference, plus the white background was taken away too - this is how it looks like right now.

cheers

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

/* center wrapper, min max width */
div#pagewrapper {width:expression(P7_MinMaxW(720,950));}

  border: 1px solid black;
  margin: 0 auto;    /* this centers wrapper */
  background-color: #fff;;
  color: black;
}