Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Using CSS to center my page

Status
Not open for further replies.
whoknows361

whoknows361

Technical User
Sep 22, 2005
228
US
Hello pro's.. I am a relative newbie - and I have a question regarding centering my web page so that varying resolutions will still bring the page centered (horizontally of course). At this point, I can center a box at various resolutions using a wrapper - but I can't figure out how to add layers (i use dreamweaver) into this box so that they will move when this outside wrapper moves - keeping everything lined up.. .Here is what I have so far:
<style>
#mainbox{
width: 1003;
height: 1000;
border: 1px solid black;
margin-right: auto;
margin-left: auto;
}
</style>
& in my body tags:
<div id="mainbox"></div>

Now this creates a box this is always centered in various resolutions. I want to add more layers within this mainbox - so that if mainbox adjusts right with a particular resolution - all my other layers within mainbox does the same. I have tried entering other layers in between mainbox's div tags such as:

<div id="mainbox">
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 41px; top: 28px;">left</div>
</div>

but only the mainbox correctly moves to center & the other layers just stay where they were... can someone please help me with this... all help is appreciated as I have been trying to solve this one for awhile on my own. Thanks again

Jonathan
 
Sort by date Sort by votes
Try adding:

text-align: center;

To the #mainbox style

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
It is because you use absolute positioning of the div inside the mainbox. That overrides any other positioning. If you want the inner div to be positioned relative to the mainbox, use relative positioning.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
Here's something that may help you:
Code: 
<style>
#mainbox{
    width: 1003px;
    height: 1000px;
    border: 1px solid black;
    margin: 0 auto ;
    position: relative ;
    }

#Layer1  {
    position:absolute; 
    width:200px; 
    height:115px; 
    z-index:1; 
    left: 41px; 
    top: 28px;
}

</style>


<div id="mainbox">
    <div id="Layer1">left</div>
</div>

Now, there's a couple of things here:

1) When setting widths and heights, ALWAYS set the units ... leaving width to 1003 as you did will cause a browser to choke, hard. Like die ... and never come back to life ... dead ... buried ... ok, I'm done now. :p

2) Setting the mainbox div to position: relative, you can then use position:absolute to position child elements inside the parent element.

3) I used the shorthand rule for margins in the mainbox element ... in case you've never seen it before, you can use shorthand for just about everything. But to explain the margins: when using 2 parameters ( margin: 0 auto ), the first number specifies the top and bottom, and the second element specifies left and right. So, writing
Code: 
margin: 0 auto;
is the same as:
Code: 
margin-top: 0 ;
margin-bottom: 0 ;
margin-left: auto ;
margin-right: auto ;

HTH,

Greg

"for me, the action is the juice.
 
Upvote 0 Downvote
I did what you said.. here is my HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html xmlns="<head>

<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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);
//-->
</script>
<style type="text/css">
<!--
#mainbox{
width: 1003px;
height: 1000px;
border: 1px solid black;
margin: 0 auto ;
position: relative ;
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 41px;
top: 28px;
}
body {
background-color: #FFFFFF;
text-align: center;
}
.style3 {
font-size: 36px;
color: #656038;
}
.style4 {color: #FFFFFF}
a:link {
color: #77A655;
}
.style7 {font-family: Arial, Helvetica, sans-serif}
.style9 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
.style11 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
.style8 {font-size: 11px}



-->
</style></head>

<body>

<div id="mainbox">
<div id="Layer1">left</div>
</div>

</body>
</html>

It still doesn't seem to work??!!!
 
Upvote 0 Downvote
1. Remove xml declaration above the doctype. That one shifts your IE browser from standard to quirks mode.
2. Stop using absolute positioning. Even though it should work with Greg's code, it is not needed -- there are better ways of achieving that.
3. Remember that if you will add width and height to every element, standard browsers (all but IE) will keep those boxes at that size even if you put more content than it fits in there. Content will just overflow it will look bad.
 
Upvote 0 Downvote
Thanks so much for your help guys... I got it now...

again - a million thanks

Jonathan
 
Upvote 0 Downvote
Just a side note, if you're going to use absolute positioning and all sorts of other things that NS4 will choke on, why clutter up your code with that "reloads the window if Nav4 resized" Javascript? It's really not worth supporting NS4 these days.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
788
pmonett
pmonett
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
212
lmcate
lmcate
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
738
bdwilcox
bdwilcox
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
623
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top