Forum Moderators: not2easy
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 © 2009 <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]
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)
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 -->
They are used for convenience.
I appreciate the help Abidshahzad4u
