PDA

View Full Version : Centering my Whole site?


Adzuki Yako
Sep 16th, 2010, 06:32 PM
Hello guys.

I am a total noob and I have managed to create a website with which I am quite happy so far. But I can't seem to find How I can take my whole stuff and put it in a container of some sort and center it! Heres my code... Is it possible to .. contain the whole thing and center it? Thanks for your help :)



<!DOCTYPE html>

<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta property="fb:admins" content="Kiyako">

<title>TITLE</title>



<meta name="author" content="Adzu Kiyako">
<meta name="copyright" content="Adzu Kiyako 2000–2010 and beyond...">
<meta name="robots" content="noindex">

<meta name="viewport" content="width=780">
<base target="_top">


<style type="text/css">
<!--
body {margin: 3em; background-image: none; background-color: white; font-size: .8em; text-align: left; }
-->
</style>

</head>



<body id="htmlsource">

<body style="background-color:#292929;">

<div style="background-color: #292929; color: white; position: absolute; left: 100px; top: 10px; width: 175px; height: 400px; padding: 5px; padding-top: 220px;"><center><img src="XXXXX" alt="Home"><br><br><br><br><br><img src="XXXXX" alt="Technology"><br><br><br><br><br><img src="XXXXX" alt="Demo (Video)"><br><br><br><br><br><img src="XXXXX" alt="About Us"><br><br><br><br><br><img src="XXXXX" alt="Contact Us"></center></div>

<div style="position: absolute; left: 185px; top: 10px; background-color: #292929; width: 800px; height: 120px; padding: 5px;"><img src="XXXXX" width="400" height="147" border="0" alt="alt text"></div>

<div style="position: absolute; left: 610px; top: 10px; background-color: #292929; width: 700px; height: 150px; padding: 30px;"><img src="XXXXX" width="651" height="92" border="0" alt="alt text"></div>

<div style="z-index: 2; position: absolute; left: 500px; top: 210px; background-color: white; width: 560px; height: 380px; padding: 10px; border: red 2px dashed;">

<script type="text/javascript">
<!--

var viewportwidth;
var viewportheight;

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>

<h1><center>This will contain the Slideshow.</h1></center> <p><center>Border can be changed.</center></p></div>

<div style="position: absolute; left: 40px; top: 640px; background-color: transparent; padding: 5px; font-size: 13pt;"><img src="XXXXXXX" alt="Temporary Icons (facebook, twitter, etc.)"></div>

<div style="z-index: 1; position: absolute; left: 650px; top: 655px; background-color: transparent; padding: 10px; color: white; ">Copyright &copy; 2010 | WEBSITE | Design by ZukiDub</div>

</body>
<!-- ~Fin~ -->
</html>


Note that I have censored some content, but you get the point. I don't know how to make a "super div" to contain the others, or is that even possible! Thank you!
dirtychinchilla
Sep 16th, 2010, 06:36 PM
You need to wrap the whole site in a div and then center it using margin: 0 auto; in the style. Like this:



#wrapper {
margin: 0 auto;
}


put that around the whole site and it'll centre it
teedoff
Sep 16th, 2010, 06:43 PM
Wrap your entire site in a div like "wrapper"

Then in your style sheet create a rule for the wrapper div

#wrapper {margin-left: auto;
margin-right: auto;
}

That should work. Have fun!
Adzuki Yako
Sep 16th, 2010, 10:46 PM
Thank you so much guys :)

[edit]Omg im sooo noob... I dont know how to wrap the whole thing up... How to put my divs in a div?!

Gosh.. But thanks tho.. Ill keep the wrapper thing in mind. I think I havent reached that level yet.. Working on it.
Major Payne
Sep 17th, 2010, 07:32 AM
Centering:

Centering anything requires setting a width less than 100% for the container. Example:


body {
width: 950px;
height: 600px;
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}





<style type="text/css">
body {
width: XXXpx;
height: YYYpx; /* OPTIONAL */
margin: 3em auto;
background: #fff;
font-size: .8em;
text-align: left; /* this is default position. could be left out */
}
</style>

Set the width at least and the auto part of margin will center the page(s). Right now the 3em is a top/bottom margin only.

Same CSS could be used for the wrapper div:



<style type="text/css">
div#wrapper {
width: XXXpx;
height: YYYpx; /* OPTIONAL */
margin: 3em auto;
background: #fff;
font-family: 'times new roman';
font-size: .8em;
color: #000;
text-align: left; /* this is default position. could be left out */
}
</style>

The HTML would look something like this:


<body>
<div id="wrapper">

<p>Page Contents here.</p>

</div>
</body>