Forums » Customize

centering site on page

jonnyb
UNITED KINGDOM
2009-02-27 13:16:50
Permalink Post
 

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
UNITED KINGDOM
2009-02-27 15:39:51
Permalink Post
 

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
UNITED KINGDOM
2009-02-27 15:40:14
Permalink Post
 

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

Vaska A
UNITED STATES
2009-02-27 16:15:52
Permalink Post
 

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

Vaska A
UNITED STATES
2009-02-27 16:40:37
Permalink Post
 

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
PORTUGAL
2009-08-26 15:37:01
Permalink Post
 

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 A
GREECE
2009-08-26 19:49:00
Permalink Post
 

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
PORTUGAL
2009-08-26 21:03:37
Permalink Post
 

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 A
GREECE
2009-08-26 21:22:35
Permalink Post
 

...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
DENMARK
2010-02-15 14:43:45
Permalink Post
 

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
UNITED STATES
2010-02-15 15:03:10
Permalink Post
 

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

;)

imoore
DENMARK
2010-02-15 15:08:37
Permalink Post
 

Thanks. Ill do that!

mrd12
GERMANY
2010-02-15 16:08:41
Permalink Post
 

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
GERMANY
2010-02-15 16:15:15
Permalink Post
 

Problem solved! I have forgotten margin-top

:)

ekettelerij
NETHERLANDS
2010-02-18 21:35:05
Permalink Post
 

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 A
GREECE
2010-02-18 23:19:32
Permalink Post
 

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
COLOMBIA
2010-08-18 20:25:25
Permalink Post
 

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
COLOMBIA
2010-08-18 20:53:41
Permalink Post
 

NVM!!!

Just had to investigate a little more!!!

You guys are the best!!!!

ChekItOut!

Thx! :)

hwm187
UNITED STATES
2010-09-11 22:45:47
Permalink Post
 

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 A
GREECE
2010-09-12 09:30:41
Permalink Post
 

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

hwm187
UNITED STATES
2010-09-13 04:46:06
Permalink Post
 

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
BELGIUM
2010-10-07 18:01:39
Permalink Post
 

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
FRANCE
2010-10-08 07:15:28
Permalink Post
 

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

RK
BELGIUM
2010-10-09 08:45:19
Permalink Post
 

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
FRANCE
2010-10-09 09:10:10
Permalink Post
 

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

RK
BELGIUM
2010-10-09 11:28:58
Permalink Post
 

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
BELGIUM
2010-10-09 11:47:00
Permalink Post
 

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
BELGIUM
2010-10-09 12:53:38
Permalink Post
 

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
BELGIUM
2010-10-09 12:53:42
Permalink Post
 

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
BELGIUM
2010-10-11 09:58:03
Permalink Post
 

Any help ?
Thanks !

rickykappa A
ITALY
2010-10-11 10:14:07
Permalink Post
 

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
BELGIUM
2010-10-12 10:15:42
Permalink Post
 

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 A
ITALY
2010-10-12 12:17:54
Permalink Post
 

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
BELGIUM
2010-10-12 21:31:51
Permalink Post
 

YEAY !
it works !

THANK YOU SO MUCH !!!

nikolai
GERMANY
2011-01-26 11:54:46
Permalink Post
 

Hey I followed the instructions. But it doesnt work.

Perhaps someone can help me.

Webpage

pbeisheim
GERMANY
2011-09-23 03:40:51
Permalink Post
 

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 A
SWEDEN
2011-09-23 03:52:02
Permalink Post
 

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

johnliz
UNITED STATES
2011-11-07 12:32:49
Permalink Post
 

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
FRANCE
2011-11-08 03:25:37
Permalink Post
 

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

ocram
BELGIUM
2011-12-07 09:12:08
Permalink Post
 

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 A
ITALY
2011-12-07 10:39:35
Permalink Post
 

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
UNITED KINGDOM
2012-01-20 07:13:34
Permalink Post
 

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.

Showing 1 - 42 of 42 posts in Forum > Customize > centering site on page
 

You need to be logged in to post.