So, how many times did you make a centered website design, and had no real clue on how to do it, well..
Here it goes:
For in-line CSS use:
- Code: Select all
<div style="margin:auto;"> text </div>
For some external CSS use:
HTML:
- Code: Select all
<div id="wrapper"> text </div>
CSS:
- Code: Select all
#wrapper{
margin:auto;
}
-------------------
The magic here is the so called Margin:auto.
How does it work? Well:
Lets pretend your website is 800 px wide, and your screen width is 1024 pixels.
This margin:auto; calculates how many space it needs to add on each side of the screen to make the DIV centered.
So basicly, 1024 - 800 = 224 pixels total.
224 : 2 = 122 pixels on each side of the screen, to make the DIV in the center.
-------------------
This is the best way to center your website, why? Just try it, and you'll see!
This makes your page centered, no matter what resolution your screen is running!
But, there's always a BUT..
This doesn't exactly work as you would think in Internet Explorer...
You need to add a so called "Doctype" (Which basicly tells your browser if the page contains XML or HTML or a combination).
So before your <HTML> tag add:
- Code: Select all
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
And you got your self a centered web page!
If you lads have any requests in the Web design and Development section, just ask me! I'm keen on making a tutorial for you guys!
Greets,
Hoteldebotel
EDIT:
lol, just found out there is a Tutorial section on this forum, ah well..
