homepage Welcome to WebmasterWorld Guest from 54.198.157.6
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Centering DIV Content within a Wrapper Problem
Need help with centering my div page within all browsers
rob22




msg:3961135
 4:49 pm on Jul 28, 2009 (gmt 0)

Hello there,

I am a newbie when it comes to designing websites. In the past I have always used tables to layout my web design content but most recently I have discovered using DIVs to layout my content which I have found gives me much more control over the layout of my web design pages. I can now have overlapping images etc which is great as this gives me a greater freedom to explore and develop my web design skills.

My problem:

I'm creating my own little personal project. So far I have created just one html page which i have called it index.html

The link below <snip>

As you can see my html page is positioned over to the left hand side! I would like to have my entire page centered so that it remains centered in all web browsers.

I don't have my web page online so here is the code from my html page....

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>text</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="text" />
<meta name="revisit-after" content="1 days" />
<meta name="Description" content="text," />
<meta name="Keywords" content="text," />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
a:link {
color: #888888;
text-decoration: none;
}
a:visited {
color: #888888;
text-decoration: none;
}
a:hover {
color: #ffffff;
text-decoration: none;
}
a:active {
color: #ffffff;
text-decoration: none;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
<!--
dinossite {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
color: #FFCC33;
text-decoration: none;
background-attachment: fixed;
background-color: #000000;
background-repeat: no-repeat;
background-position: center center;
text-align: justify;
position: absolute;
}
.content {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
background-attachment: fixed;
background-color: transparent;
background-image: none;
text-align: justify;
overflow: auto;
position: absolute;
visibility: visible;
float: right;
width: auto;
margin: 5px;
padding: 10px;
}
-->
</style>
<style type="text/css">
<!--
.copyrightbar {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
line-height: normal;
color: #000000;
text-decoration: none;
background-color: transparent;
text-align: right;
}
-->
</style>
<style type="text/css">
<!--
-->
</style>
<style type="text/css">
<!--
.outerbackgroundimage {
position: absolute;
visibility: visible;
height: 700px;
width: 900px;
left: 5px;
top: 5px;
right: auto;
bottom: auto;
text-align: center;
}
-->
</style>
</head>

<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="MM_preloadImages('navigationbuttons/homerollover.png','navigationbuttons/biorollover.png','navigationbuttons/galleryrollover.png','navigationbuttons/forumrollover.png','navigationbuttons/contactrollover.jpg')">
<div id="outerbackground" style="position:absolute; left:50px; top:0px; width:900px; height:700px; z-index:1; background-image: url(graphics/outerbackground.jpg); layer-background-image: url(graphics/outerbackground.jpg); border: 1px none #000000; visibility: visible;" class="outerbackgroundimage"></div>
<div id="innerbackground" style="position:absolute; left:75px; top:25px; width:850px; height:650px; z-index:2; background-image: url(graphics/innerbackground.jpg); layer-background-image: url(graphics/innerbackground.jpg); border: 1px none #000000; visibility: visible;"></div>
<div id="navigationbar" style="position:absolute; left:101px; top:48px; width:340px; height:50px; z-index:3;"><a href="index.html" target="_self" onmouseover="MM_swapImage('home','','navigationbuttons/homerollover.png',1)" onmouseout="MM_swapImgRestore()"><img src="navigationbuttons/home.png" alt="Home" name="home" width="85" height="50" border="0" id="home" /></a><a href="bio.html" target="_self" onmouseover="MM_swapImage('bio','','navigationbuttons/biorollover.png',1)" onmouseout="MM_swapImgRestore()"><img src="navigationbuttons/bio.png" alt="Bio" name="bio" width="85" height="50" border="0" id="bio" /></a><a href="gallery.html" target="_self" onmouseover="MM_swapImage('gallery','','navigationbuttons/galleryrollover.png',1)" onmouseout="MM_swapImgRestore()"><img src="navigationbuttons/gallery.png" alt="Gallery" name="gallery" width="85" height="50" border="0" id="gallery" /></a><a href="#" target="_self" onmouseover="MM_swapImage('forum','','navigationbuttons/forumrollover.png',1)" onmouseout="MM_swapImgRestore()"><img src="navigationbuttons/forum.png" alt="Forum" name="forum" width="85" height="50" border="0" id="forum" /></a></div>
<div id="content" style="position:absolute; left:101px; top:113px; width:213px; height:71px; z-index:4" class="content">Hello
there, welcome to my new website. I hope you like it and decide to stick around.
If you are interested in keeping track of my daily training activities check
out my <a href="#" target="_self">Blog!</a></div>
<div id="contactbutton" style="position:absolute; left:836px; top:48px; width:59px; height:77px; z-index:5; visibility: visible;"><a href="contactandlinks.html" target="_self" onmouseover="MM_swapImage('contact','','navigationbuttons/contactrollover.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="navigationbuttons/contact.jpg" alt="Contact and Links" name="contact" width="59" height="77" border="0" id="contact" /></a></div>
<div id="copyrightbar" style="position:absolute; left:732px; top:620px; width:170px; height:35px; z-index:6; visibility: visible;" class="copyrightbar">
Site Design Copyright &copy; 2009 &nbsp; <a href="#" target="_self"><img src="graphics/miniiconlogo.jpg" alt="text" width="30" height="30" border="0" /></a></div>
</body>
</html>

--------------------------------------

Back to my problem...

I hope the code behind my html page displays correctly when I post this message.

If you look at my screen shot and code you will notice that I have several div tags all positioned on top of one another. The text, main background image, the outer background image, the buttons etc each have there own div.

I am having an extremely stressful time trying to centre the whole of my page within the middle of the screen. I've read several ways to do it about centering div tags etc but i can't do that as I have lots of div tags. I came across a solution online stating to create a page wrapper to suround all my div tags (create a container) and then just center that container i.e. wrapper.

I thought that would be easy to do but for me it' not.

Please remember when responding I am just learning this stuff so I would appreciate any feedback / solutions to my problem to be kept as simple as possible can. Otherwise I will get lost lol!

I am hoping someone could check all my html code and perhaps tweak it so that the whole of my html page will display centred in all browsers. Then you can just re-post the edited code and I'll copy and paste it into my dreamweaver html page to test it myself - Can anyone help?

Any replies would be greatly appreciated.

Thanks

Rob

[edited by: swa66 at 6:46 pm (utc) on July 28, 2009]
[edit reason] No links, please sse ToS and forum charter [/edit]

 

rob22




msg:3961782
 2:22 pm on Jul 29, 2009 (gmt 0)

No help?

abidshahzad4u




msg:3961810
 2:59 pm on Jul 29, 2009 (gmt 0)

The wrapper idea is great. And mostly implemented by developers. I also follow wrapper approach and suggest the same. With the help of wrapper you can create very complex layouts manageable. As wrapper will be container and you can position/arrange your internal divs with relative to wrapper one.

If you want to use outer wrapper:
#wrapper { width:900px; margin-left:auto; margin-right:auto; }

If you are not interested using wrapper then add the above code to your divs, which you want to align centered.
#outerbackground { width:900px; margin-left:auto; margin-right:auto; }

You have to repeat this for all divs. (without wrapper)

rob22




msg:3961841
 4:06 pm on Jul 29, 2009 (gmt 0)

If wrapper means placing my divs inside a container wrap then that seems the easiest way for me.

Would I place all my div tags inside the container like this....

<div id="container">

All my div tags go inside this container?

</div>
<!-- end container -->

abidshahzad4u




msg:3962492
 1:56 pm on Jul 30, 2009 (gmt 0)

Exactly. wrapper and container are same.

They are used for convenience.

rob22




msg:3962522
 2:22 pm on Jul 30, 2009 (gmt 0)

Could you tell me please what CSS code I would add to the "container" in order to centre my website in all browsers?

I appreciate the help Abidshahzad4u

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved