centering site on page

jonnyb / 2009-02-27 13:16:50   

hello,

a pretty basic question, I have tried centering every individual div in my css (using margin:0 auto etc) but nothing seems to work. would someone be able to talk me through how to do this? I have a good knowledge of css (I thought!) but i cannot get this one to work.

cheers
Jonny

jodi / 2009-02-27 15:39:51   

Try this!

You have to apply this either to the body or to a div that wraps everything on the page that you want to center. 

  1. body
  2. {
  3. width: 960px;
  4. margin: 0 auto;
  5. }
jodi / 2009-02-27 15:40:14   

Well, that code tag backfired. But I think you can see what I mean.

Vaska A / 2009-02-27 16:15:52   

No, that really will not work...needs much more than that.

Vaska A / 2009-02-27 16:40:37   

This is fast and crude...but you could take it from here...

Add and/or replace things in your style.css file:

  1. body { text-align: center; background: #000; }
  2. #wrapper { width: 960px; margin: 0 auto; text-align: right; background: #fff; }
  3. #menu { width: 215px; float: left; }
  4. #content { margin: 0 0 0 215px; }
  5. .clear-both { clear: both; }

In your template add a wrapper around ALL of your html in the body tags...the bottom portion needs a clear as well...

  1. <div id='wrapper'>
  2. <!-- ALL THE OTHER CODE -->
  3. <div class='clear-both'><!-- --></div>
  4. </div>

Remove the ie.css part from your header...you don't need this one anymore...

And this will get your started.

panoramah / 2009-08-26 15:37:01   

sorry but i'm kind of ignorant what's
"In your template add a wrapper around ALL of your html in the body tags"

thanks!

arsondpi / 2009-08-26 19:49:00   

just after the <body> tag add the <div id='wrappper'>
If it all still looks fuzzy, find a centered site and check out the source code - it can't be easier than that... I think so at least.

panoramah / 2009-08-26 21:03:37   

i already managed to center the letters in the body
but i don't manage to center the exhibits in the window
where do i find the source code?

sorry... arsondpi..

arsondpi / 2009-08-26 21:22:35   

...check the participants list and find a site with centered content....
It's easier than you think. Keep on trying...

...and have a read at the forum rules please...

imoore / 2010-02-15 14:43:45   

Hey I am new to all this here so please excuse me if this a dumb question.

"In your template add a wrapper around ALL of your html in the body tags...the bottom portion needs a clear as well..."

Where is the template located ?? Whats its filename ?

Thanks a lot for the help.
Ian.

Vaska A / 2010-02-15 15:03:10   

In Useful Threads there are two links in red - read these. It should be clear where things are after you read them.

;)

imoore / 2010-02-15 15:08:37   

Thanks. Ill do that!

mrd12 / 2010-02-15 16:08:41   

Hello,

I am able to center my menu on the left side, but I am not able to move everything that is in the container on the right side down to be on one line with the menu.
I have checked out other centered sites with Indexhibit but I can't figure out what I have done wrong.

My website: http://anyd.bplaced.net/

For example the 'Impressum': it is glued on the top and I want to move it a little bit down. http://anyd.bplaced.net/impressum/

Thank you for your support!

mrd12 / 2010-02-15 16:15:15   

Problem solved! I have forgotten margin-top

:)

ekettelerij / 2010-02-18 21:35:05   

My Webpage.

Hello, first of all, thanks for the great theme!
Second, i could need some help.

Is there a way to use images instead of text for my button's?
Basicly what i'm trying to do is make my site like the picture on the index page of my website.

Im just starting css/html/php and like to call myself a beginner.

Thanks for you time!

arsondpi / 2010-02-18 23:19:32   

Well you can either use Cufon to embed the font or use images.

So search the forum for Cufon or images as navi-titles (or something like this - i don't remember...)

restre / 2010-08-18 20:25:25   

This is fast and crude...but you could take it from here...

Add and/or replace things in your style.css file:

1. body { text-align: center; background: #000; }
2. #wrapper { width: 960px; margin: 0 auto; text-align: right; background: #fff; }
3. #menu { width: 215px; float: left; }
4. #content { margin: 0 0 0 215px; }
5. .clear-both { clear: both; }

In your template add a wrapper around ALL of your html in the body tags...the bottom portion needs a clear as well...

1.
2.
3.
4.

Remove the ie.css part from your header...you don't need this one anymore...

And this will get your started.

I've donde this step by step... But I only get the content centered but the menu stays and the left...
How else can I center the whole page in the middle of the browser?

Thx! :)

restre / 2010-08-18 20:53:41   

NVM!!!

Just had to investigate a little more!!!

You guys are the best!!!!

ChekItOut!

Thx! :)

hwm187 / 2010-09-11 22:45:47   

Hi Guys,

I have tried the above centering with no results. I have gone with arsondpi and tried to copy from another site to no avail.

I am using the columner theme with iwakami3.

site is here

help would be appreciated!

arsondpi / 2010-09-12 09:30:41   

It's easy to see in firebug that your #wrapper doesn't contain the #menu and #content divs (as it should)....

hwm187 / 2010-09-13 04:46:06   

Ok, i am having a centered result now, although i had to remove the float property in my #content, which yes, lets my content center, does not give me margin or padding control.

I'm confused how the float property was obstructing this and why my margin properties are ignored when it is removed(?) And how can i gain this control back as i don't wish for the content to be tied up against the menu like it is ...

any help - much appreciated!

LINK

RK / 2010-10-07 18:01:39   

Hello,

I have followed Vaskas advices step by step, but I just don't get my content and menu centered.

But at the very best, only the content is centered:
here : here is my website...

And here is what I would like to get :
a menu-content centered horizontaly and verticaly on the page... nomatter what size of screen or browser we use...

- Thanks a lot for any help ! -

lemathieu A / 2010-10-08 07:15:28   

Hello,
I don't see any #wrapper on your source code…

RK / 2010-10-09 08:45:19   

Hello,
yes, sorry: another version that worked...

Here it is, for the version with the #wrapper, but I just lost the main page....(?!?)
I'm sorry, I'm really a nooby eventhough I try to understand...

But even with this, the slideshow is centered, but the menu isn't...

Thanks !!!

lemathieu A / 2010-10-09 09:10:10   

Hello,
you have 2 "#" before "wrapper" in your css…
Start there.
You have to be carefull with code.

RK / 2010-10-09 11:28:58   

Hello,
Thanks, my mistake!
It doesn't change, though, and unfortunately, my main page isn't still there...
I don't see what's wrong...

RK / 2010-10-09 11:47:00   

Hello,
Thanks, my mistake!
It doesn't change, though, and unfortunately, my main page isn't still there...
I don't see what's wrong...

RK / 2010-10-09 12:53:38   

Hello,
Thanks, my mistake!
It doesn't change, though, and unfortunately, my main page isn't still there...
I don't see what's wrong...

RK / 2010-10-09 12:53:42   

Hello,
Thanks, my mistake!
It doesn't change, though, and unfortunately, my main page isn't still there...
I don't see what's wrong...

RK / 2010-10-11 09:58:03   

Any help ?
Thanks !

rickykappa / 2010-10-11 10:14:07   

maybe a good start is to try to validate your page, 'cause you get too many errors: @lemathieu pointed you something already...
also I would get rid of some of your expanding menu lines, which you actually don't need and can add problems:
e.g.
expandingMenu(3);
expandingMenu(4);
expandingMenu(5);
expandingMenu(6);
expandingMenu(7);
expandingMenu(8);
expandingMenu(9);
expandingMenu(10);
you have only 3 menu sections, namely 0 - 1 - 2, so the following are at least useless

RK / 2010-10-12 10:15:42   

Thank you so much !
This tool of validation is definitely useful !

Eventhough I checked and corrected, I still don't have my menu centered on the left of my content...

Here is my style.css
and here is my index.php...

I don't know how to include the menu in the same "box" as the content... I figure it must be the fonction of the #wrapper...

Sorry to bother you !!!

rickykappa / 2010-10-12 12:17:54   

you have too many wrapper divs (also after the body tag!), get rid of the useless ones and be careful that .wrapper = "class" and #wrapper = "id", not the same thing...

RK / 2010-10-12 21:31:51   

YEAY !
it works !

THANK YOU SO MUCH !!!

nikolai / 2011-01-26 11:54:46   

Hey I followed the instructions. But it doesnt work.

Perhaps someone can help me.

Webpage

pbeisheim / 2011-09-23 03:40:51   

hello,

my url
is
www.philippbeisheim.com

how can I create the slide viewer effect showing images etc. in the centered theme? Do I edit this in the post_nav area?
Hope that someone could give me a hint how to solve this issue.

kind regards

pernin / 2011-09-23 03:52:02   

@pbeisheim: not on topic, answered in your other thread

johnliz / 2011-11-07 12:32:49   

Hi! I'm having some trouble with centering ;_; I would appreciate any help or tips.

Here is my website
www.johnliz.com

I've added the steps that Vaska pointed out,
#wrapper
#menu
#content and
.clear-both in the style.css

and the div wrapper part in the template. I'm not sure what I'm doing wrong!

Thank you

lemathieu A / 2011-11-08 03:25:37   

@ johnliz :
Maybe you should start with something "ready made"
;)

ocram / 2011-12-07 09:12:08   

Hello!
I am having some troubles in centering the layout on a page...
meaning, I found some codes on the internet (like margin-left/right) that I am trying to include in the style.css file, but yet, the body of the website is centered and working fine, while the navigation bar stays fix. Anyone got a clue on what the problem might be?
LINK
thanks really, I am learning so much on this forum :D

rickykappa / 2011-12-07 10:39:35   

but now you have the menu width to 500px and the left margin of content set to 563px... this affects whatever auto margin you've set before in your style.css.

there are a centered theme and a columner theme if you look for something already tested, try the search box
;-)

jimmythesaint / 2012-01-20 07:13:34   

I've never managed to figure out how to centre my site on the page. I've tried a number of times to follow the advise in this thread but can never get it to work. If anyone can just tell me EXACTLY what code to add to my CSS and template and where to put it I would be very grateful. This is my site. Thanks.

lynchlucila / 2012-02-15 18:41:41   

Hi! I'm almost done with my site but I'm having trouble centering the entire site on the window. I have already done everything this post suggests and it seemed to be working fine with other themes I used to try other designs, but had no luck with the columner_theme with horizontal menu.

my site

I will really appreciate if you can take a look cause I've run out of solutions :(

Thanks in advance,

lynchlucila / 2012-02-15 18:41:52   

Hi! I'm almost done with my site but I'm having trouble centering the entire site on the window. I have already done everything this post suggests and it seemed to be working fine with other themes I used to try other designs, but had no luck with the columner_theme with horizontal menu.

my site

I will really appreciate if you can take a look cause I've run out of solutions :(

Thanks in advance,

pernin / 2012-02-16 01:41:02   

I'd like to refer you to the Forum Rules: please read them, thank you -- you're double-posting and you have no link back to indexhibit

markieblitz / 2012-05-26 17:08:22   

Question, I'm having trouble actually centering my images/Thumnails on the page.

Case Study Page:

http://sarahmdoonan.com/

Or (For more images)

http://sarahmdoonan.com/index.php?/experience/installation-cupcakes/

And when selecting Slider Pro, Nothing shows up.

Case Study Page:
http://sarahmdoonan.com/index.php?/see/sculpture-diametrics/

I believe i edited my code to the recomendations, still my contect, other than my logo and links, wont center.

markieblitz / 2012-05-26 17:08:54   

Question, I'm having trouble actually centering my images/Thumnails on the page.

Case Study Page:

http://sarahmdoonan.com/

Or (For more images)

http://sarahmdoonan.com/index.php?/experience/installation-cupcakes/

And when selecting Slider Pro, Nothing shows up.

Case Study Page:
http://sarahmdoonan.com/index.php?/see/sculpture-diametrics/

I believe i edited my code to the recommendations, still my contect, other than my logo and links, wont center.

markieblitz / 2012-05-26 17:44:10   

Sorry for double posting

Context*

pernin / 2012-05-26 22:53:01   

you are not only double-posting, you are cross-posting. Already answered in your other thread

please read the forum rules, thank you

Succubus / 2012-10-03 08:53:52   

I need help with the centered theme making it work in Indexhibit version 2
I have read this tutorial but have no idea on how to star doing it!
I would thank so much to anyone that can help me!
:)

This thread has been closed, thank you.