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!

centering AP content on page

Status
Not open for further replies.
PatrickDavies

PatrickDavies

Programmer
Joined
Jul 30, 2007
Messages
2
Location
GB
Dreamweaver CS3 9.0

How do you center a whole page of absolutely positioned content on the page?

You would have thought there would be a single click to do this!

I've carefully followed instructions from other forums and it simply doesn't work!

They say enclose the content in a container then define a CSS rule with auto margins for left and right.

If anyone can provide step by step, idiot proof instructions that actually work I will be forever grateful.

Thanks

Patrick
 
Sort by date Sort by votes
Welcome to Tek-Tips. See faq 222-2244 to get the best from these forums.

For this question:

Absolute position means absolute position. The position of the element is set relative to the viewport, not relative to any other elements. Use normal css practice to position your elements within a div, then give the div a width and set its margin to auto. If you want to position stuff within a div at some specific position try using position:relative
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="screen">
div { width:400px; height:400px; border:solid; margin:auto; }
.inabit {position:relative; left:50px; top:50px;}
</style>
</head>
<body>
<div>
<p class="inabit">This is some text</p>
</div>
</body>
</html>

Try changing relative to absolute to see the difference.

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints
 
Upvote 0 Downvote
Thanks but can thus be applied to what I've done?

I've built a very pretty page all AP thinking I could then easily center it. Have I got to start agian?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #000000;
}
#apDiv1 {
position:absolute;
left:7px;
top:14px;
width:807px;
height:39px;
z-index:1;
visibility: visible;
}
#apDiv2 {
position:absolute;
left:6px;
top:361px;
width:815px;
height:43px;
z-index:2;
visibility: visible;
}
#apDiv3 {
position:absolute;
left:222px;
top:62px;
width:396px;
height:28px;
z-index:3;
visibility: visible;
}
#apDiv4 {
position:absolute;
left:45px;
top:65px;
width:727px;
height:299px;
z-index:0;
visibility: visible;
}
#apDiv5 {
position:absolute;
left:308px;
top:121px;
width:174px;
height:228px;
z-index:4;
visibility: visible;
}
#apDiv6 {
position:absolute;
left:82px;
top:561px;
width:169px;
height:56px;
z-index:5;
visibility: visible;
}
#apDiv7 {
position:absolute;
left:342px;
top:561px;
width:167px;
height:50px;
z-index:6;
visibility: visible;
}
#apDiv8 {
position:absolute;
left:601px;
top:561px;
width:166px;
height:57px;
z-index:7;
visibility: visible;
}
#apDiv9 {
position:absolute;
left:248px;
top:578px;
width:95px;
height:27px;
z-index:8;
visibility: visible;
}
#apDiv10 {
position:absolute;
left:508px;
top:578px;
width:95px;
height:27px;
z-index:8;
visibility: visible;
}
#apDiv11 {
position:absolute;
left:47px;
top:467px;
width:187px;
height:70px;
z-index:9;
visibility: visible;
}
#apDiv12 {
position:absolute;
left:288px;
top:467px;
width:187px;
height:70px;
z-index:9;
visibility: visible;
}
#apDiv13 {
position:absolute;
left:69px;
top:492px;
width:151px;
height:20px;
z-index:10;
}
#apDiv14 {
position:absolute;
left:305px;
top:493px;
width:151px;
height:20px;
z-index:10;
}
#apDiv15 {
position:absolute;
left:127px;
top:408px;
width:591px;
height:43px;
z-index:11;
background-color: #000000;
}
.style2 {color: #999999}
#apDiv16 {
position:absolute;
left:525px;
top:475px;
width:273px;
height:65px;
z-index:11;
background-color: #000000;
}
.style4 {
font-size: 14px;
}
#apDiv17 {
position:absolute;
left:208px;
top:359px;
width:178px;
height:16px;
z-index:12;
}
.style5 {
font-size: 12px;
color: #999999;
}
#apDiv18 {
position:absolute;
left:484px;
top:359px;
width:92px;
height:16px;
z-index:12;
}
#container {
width: 760px;
margin-right: auto;
margin-left: auto;
}
-->
</style></head>

<body tracingsrc="Images/trace.png" tracingopacity="34">
<div id="container">
<div id="apDiv1"><img src="Images/TopBar.jpg" width="816" height="39" /></div>
<div id="apDiv2"><img src="Images/BottomBar.jpg" width="816" height="42" /></div>
<div id="apDiv3"><img src="Images/AnimePortaitsTitle.gif" width="397" height="28" /></div>
<div id="apDiv4"><img src="Images/TiltePicture.jpg" width="727" height="301" /></div>
<div id="apDiv5"><img src="Images/PictureInFrame.jpg" width="174" height="230" /></div>
<div id="apDiv6"><img src="Images/UploadPhotoBtn.gif" width="165" height="49" /></div>
<div id="apDiv7"><img src="Images/ArtistMakesBtn.gif" width="165" height="49" /></div>
<div id="apDiv8"><img src="Images/PostedBackBtn.gif" width="165" height="49" /></div>
<div id="apDiv9"><img src="Images/shapeimage_1.png" width="93" height="17" /></div>
<div id="apDiv10"><img src="Images/shapeimage_1.png" alt="" width="93" height="17" /></div>
<div id="apDiv11"><img src="Images/ButtonBlank4.jpg" width="191" height="70" /></div>
<div id="apDiv12"><img src="Images/ButtonBlank4.jpg" alt="" width="191" height="70" /></div>
<div id="apDiv13"><img src="Images/Sample-gallery_btn.gif" width="150" height="18" /></div>
<div id="apDiv14"><img src="Images/OrderingInfo_btn.gif" width="160" height="15" /></div>
<div class="style2" id="apDiv15">
<div align="center" class="style4">Send you photo and one of our professional Anime Artists will create a unique, hand-drawn, signed Anime Portrait.</div>
</div>
<div class="style2" id="apDiv16">
<div align="center" class="style4">You have a choice of styles, sizes and frames. Your artwork will be posted to your door within days or sent as a gift.</div>
</div>
<div class="style5" id="apDiv17">Real Hand-drawn Portraits</div>
<div class="style5" id="apDiv18">Prices from £10</div>
</div>
</body>
</html>
 
Upvote 0 Downvote
Did you try it? Without all your images I'm not going to try to duplicate your work, but a quick 'Find and Replace' changing 'absolute' to 'relative' should give you a good start

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints
 
Upvote 0 Downvote
I am having some problems with this AP Div stuff...

My website looks pretty much exactly the way I want it, but everything is positioned "absolute" align to the left.
I am using AP Divs so that I can layer my buttons. When I change the position of the AP Div to be "relative", everything lines up in the middle the way I want it (except for one) but then the up/down position is all crazy. (My buttons are not centered on the sword any more).

So what can I do to get the whole page centered "relative" to the web browser without screwing up the up/down position?
 
Upvote 0 Downvote
Welcome to Tek-Tips.

I recommend starting a new thread rather than hijacking this one (even though your problems are similar).
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cohan123
  • Locked
  • Question Question
page layout-&gt;page size, optimal for web
Replies
0
Views
736
cohan123
cohan123
jackQue1983
  • Locked
  • Question Question
centering layer in html
Replies
2
Views
443
Kjonnnn
Kjonnnn
ElizaShteto
  • Locked
  • Question Question
Split One Page in two separate Pages in Framemaker 11
Replies
0
Views
255
ElizaShteto
ElizaShteto
goldtooth
  • Locked
  • Question Question
Adding a linked table to a page in Dreamweaver
Replies
0
Views
366
goldtooth
goldtooth
malibu65k
  • Locked
  • Question Question
Show a button on a page based on query results
Replies
1
Views
333
okiiyama
okiiyama

Part and Inventory Search

Sponsor

Back
Top