Welcome Guest, Not a member yet? Register   Sign In
How to make my site on the center of the screen
#1

[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 ?
#2

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

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

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

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

[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!
#6

[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;
}
#7

[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;
}
#8

[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.
#9

[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.




Theme © iAndrew 2016 - Forum software by © MyBB