[solved] How to center site

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
Bo Jensen
Forum Members
Forum Members
Posts: 10
Joined: Thu May 06, 2010 8:58 pm

[solved] How to center site

Post by Bo Jensen »

I am new to CMSMS so for give me a rather simple question. I started by building from the ncleanblue theme, which is a wall to wall layout, but I want a say 60% size site and background color for the rest. Works the below settings,  but it is left and not centered, how can I center it ? Obviously easy, but I can not make it work. Any pointers more than welcome..

div#pagewrapper {
/* min max width, IE wont understand these, so we will use java script magic in the */
max-width: 80em;
min-width: 80em;
/* now that width is set this centers wrapper */
/*margin: 0 auto;*/
background: #fff url(uploads/sulumtheme/bg__full.png) repeat-x scroll left top;
color: black;
}

/* Mask helper  for browsers ZOOM, Rezise and Decrease */
#ncleanblue {
/* set to width of viewport */
width: 60%;
/* you can set your own image and background color here */
background: #fff url(uploads/sulumtheme/bg__full.png) repeat-x scroll left top;
}
Last edited by Bo Jensen on Sun May 09, 2010 8:29 pm, edited 1 time in total.
RonnyK
Support Guru
Support Guru
Posts: 4962
Joined: Wed Oct 25, 2006 8:29 pm

Re: How to center site

Post by RonnyK »

Change the
/*margin: 0 auto; */
to
margin: 0 auto;
in your div#pagewrapper.

Ronny
Bo Jensen
Forum Members
Forum Members
Posts: 10
Joined: Thu May 06, 2010 8:58 pm

Re: How to center site

Post by Bo Jensen »

Thanks for your reply, but it already tried this and it is still left. As said my css style is otherwise the same as ncleanblue. Can you guide me to some relevant documentation, I obviously need to learn more.
RonnyK
Support Guru
Support Guru
Posts: 4962
Joined: Wed Oct 25, 2006 8:29 pm

Re: How to center site

Post by RonnyK »

Do you have a link?

Ronny
Bo Jensen
Forum Members
Forum Members
Posts: 10
Joined: Thu May 06, 2010 8:58 pm

Re: How to center site

Post by Bo Jensen »

Yes, but it is not published yet, so you need a password to see it. I can email it to you, if I may ?
Thanks Bo
RonnyK
Support Guru
Support Guru
Posts: 4962
Joined: Wed Oct 25, 2006 8:29 pm

Re: How to center site

Post by RonnyK »

PM is fine.

Ronny
Bo Jensen
Forum Members
Forum Members
Posts: 10
Joined: Thu May 06, 2010 8:58 pm

Re: How to center site

Post by Bo Jensen »

I figured out a solution by adding :

#html, body {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  width:980px;
  height: 100%;
  margin: auto;
}


Why this worked and other didn't I am unsure, but it works so I am good :-) Thanks for your time.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: [solved] How to center site

Post by Dr.CSS »

Your biggest problem may have been you were setting #ncleanblue to a set width and it is meant to not have any width and it is wrapped around #pagewrapper and it has it's width set to 960px in another style sheet...

So most likely 60% is smaller than 80em, take out any width setting to #ncleanblue, remove the preset width for pagewrapper in the ncleanbluecore style sheet or remove the class of core-wrap-960 from it...

Setting body/html to a fixed width is not a good idea...
Bo Jensen
Forum Members
Forum Members
Posts: 10
Joined: Thu May 06, 2010 8:58 pm

Re: [solved] How to center site

Post by Bo Jensen »

You were correct, I did what you said and it worked. Thank you Dr. CSS.  I have now build a nice looking website, without any deep knowledge about CMS, html or CSS,  which says a lot about CMSMS.
Post Reply

Return to “Layout and Design (CSS & HTML)”