CodeIgniter Forums
How to make my site on the center of the screen - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: How to make my site on the center of the screen (/showthread.php?tid=5469)

How to make my site on the center of the screen - El Forum - 01-22-2008

[eluser]cinewbie81[/eluser]
Hi guys,

I have a very easy website up to the live sites yesterday morning.

I received some comments this morning suggest that I should've change the width of the screen so the site is a set width, rather than taking up the entire screen ( i assume they are very rich and having a bid screen monitor)..

Now i've already fix its width to 900px like this:

Code:
#webcomtain {
    width:980px;
    background-color: white;
    float:left;
}

Now the page is appear on the left of the screen.. how can i set it to be on center of the screen? Anyone ?

How to make my site on the center of the screen - El Forum - 01-22-2008

[eluser]Pascal Kriete[/eluser]
This should do it:
Code:
#webcomtain {
    width:980px;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
}


How to make my site on the center of the screen - El Forum - 01-22-2008

[eluser]cinewbie81[/eluser]
cheers dude !!

It's that easy, yet i cant get it ..
should've get a CSS lesson Smile

How to make my site on the center of the screen - El Forum - 01-22-2008

[eluser]dawnerd[/eluser]
You can also use shorthand to make it one line rather than two, and makes the css smaller.
Code:
margin: auto;


How to make my site on the center of the screen - El Forum - 01-22-2008

[eluser]Lone[/eluser]
Or even shortcut it down to:

Code:
#webcomtain {
    width: 960px;
    background-color: white;
    margin: 0 auto;
}

Note: try using 960px as the width for 1024x768 screens - just a tad more usuable as its divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16 (think grid) Smile

Oh I love my css!

How to make my site on the center of the screen - El Forum - 01-22-2008

[eluser]dawnerd[/eluser]
[quote author="Lone" date="1201083757"]Or even shortcut it down to:

Code:
#webcomtain {
    width: 960px;
    background-color: white;
    margin: 0 auto;
}

Note: try using 960px as the width for 1024x768 screens - just a tad more usuable as its divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16 (think grid) Smile

Oh I love my css![/quote]

Even further compressed:

Code:
#webcomtain {
    width: 960px;
    background: #fff;
    margin: 0 auto;
}


How to make my site on the center of the screen - El Forum - 01-22-2008

[eluser]Lone[/eluser]
Haha whoops I left that one out! Best to link to some CSS reference page, but when you learn all the shorcuts for all the properties like background it makes for some really manageable and shorter code Smile

Dawnerd's first example will set auto to all four margin points instead of just to left and right like you would want. Heres a quick guide to the margin property (same for padding and border)

'Top' meaning the top margin, 'right' meaning the right margin etc.

Code:
#id {
   margin: top right bottom left;
}

So the following is top: 10pixels, right: 30pixels, bottom: 15pixels, left: 40pixels

Code:
#id {
   margin: 10px 30px 15px 40px;
}

But when you 'shortcut' you put only two sizes and they are the bottom/top and left/right values.
And then when just one value like dawnerd sample makes it that size for all (bottom/top/left/right)

Code:
#id {
   margin: 10px 30px 10px 30px;
}

//Same as

#id {
   margin: 10px 30px;
}


How to make my site on the center of the screen - El Forum - 01-22-2008

[eluser]dawnerd[/eluser]
Yes it is supposed to set all sides, but I use it on all my projects simply because it never actually works the way it seems. The page isn't actually centered vertically on the page, so in reality telling it 0 from the top is pointless.

How to make my site on the center of the screen - El Forum - 01-22-2008

[eluser]Lone[/eluser]
Oh for anyone else reading this and wanting to get into CSS a bit more I highly advise that you implement the following before doing any styling.

Reset CSS

I have been doing a similar setup for the past 2 years and it is just perfect as it gives you a clean slate to start off with instead of relying (or more correctly be suprised by) standard browser styling differences.