Member Avatar for flismayer

Hi everyone!

I would like to center my page but I can't find how to do it. Anyone has an idea?
The main Div (#apDiv3)
The others div are inside the main div

If I leave it like that the only one centered is the Div3 :(

Thanks!!
Mayerfli

body {
	background-color: #FFCC99;
}
#apDiv3 {
	position:absolute;
	left:50%;
	top:50%;
	width:1100px;
	height:650px;
	z-index:1;
	margin-top: -325px;
	margin-left: -550px;
	right: auto;
	bottom: auto;
	background-color: #3F3151;
}
#apDiv1 {
	position:absolute;
	left:481px;
	top:310px;
	width:435px;
	height:291px;
	z-index:2;
}
#apDiv4 {
	position:absolute;
	left:482px;
	top:281px;
	width:486px;
	height:38px;
	z-index:3;
}
#apDiv5 {
	position:absolute;
	left:300px;
	top:212px;
	width:436px;
	height:655px;
	z-index:4;
Edited by peter_budo because: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)
  • 3 Contributors
  • 7 Replies
  • 157 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Romil797
Member Avatar for macneato

Hi,

Change it to the following

#apDiv3 {
position:relative;
margin: 0 auto;
width:1100px;
height:650px;
z-index:1;
background-color: #3F3151;
}

You should really try keep your container 960, check out this link

Edited by macneato because: n/a
Member Avatar for flismayer

Thanks!

Yes, you're right. It's much better 960 px. :)

The problem now is that the main DIV is centered but all the DIVs inside this main Div do not move if I make the windows bigger. Do you see what I mean? It is normal?

#apDiv3 {
position:relative;
margin: 0 auto;
width:960px;
height:650px;
z-index:1;
background-color: #3F3151;
}
#apDiv1 {
position:absolute;
left:481px;
top:310px;
width:435px;
height:291px;
z-index:2;
}
#apDiv4 {
position:absolute;
left:482px;
top:281px;
width:486px;
height:38px;
z-index:3;
}
#apDiv5 {
position:absolute;
left:300px;
top:212px;
width:436px;
height:655px;
z-index:4;
}
#apDiv6 {
position:absolute;
left:262px;
top:285px;
width:197px;
height:302px;
z-index:4;
}
Edited by peter_budo because: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)
Member Avatar for macneato

Oh, thats because they positioned absolutely... do you mind adding the html as well? so i can take a look and sort it out for you

Member Avatar for flismayer

Thank you very much!

That is all what I have. Do you think it is possible? I think I really have to learn how to do this HTML correctly from the beginning...

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
body {
	background-color: #FFCC99;
}
#apDiv3 {
position:relative;
margin: 0 auto;
width:960px;
height:650px;
z-index:1;
background-color: #3F3151;
}
#apDiv1 {
	position:absolute;
	left:481px;
	top:310px;
	width:435px;
	height:291px;
	z-index:2;
}
.Style2 {
	font-family: Calibri, "Calibri Bold", "Calibri Bold Italic", "Calibri Italic";
	font-size: 12pt;
	color: #FFFFFF;
}
.Style3 {
	font-family: Calibri, "Calibri Bold", "Calibri Bold Italic", "Calibri Italic";
	font-size: 16pt;
	color: #FFCC99;
	font-weight: normal;
}
.Style5 {
	font-family: Calibri, "Calibri Bold", "Calibri Bold Italic", "Calibri Italic";
	font-size: 14px;
	color: #FFCC99;
}
#apDiv4 {
	position:absolute;
	left:482px;
	top:281px;
	width:486px;
	height:38px;
	z-index:3;
}
#apDiv5 {
	position:absolute;
	left:300px;
	top:212px;
	width:436px;
	height:655px;
	z-index:4;
}
#apDiv6 {
	position:absolute;
	left:262px;
	top:285px;
	width:197px;
	height:302px;
	z-index:4;
}
#apDiv7 {
	position:absolute;
	left:553px;
	top:182px;
	width:480px;
	height:618px;
	z-index:5;
}
#apDiv8 {
	position:absolute;
	left:484px;
	top:759px;
	width:568px;
	height:18px;
	z-index:6;
}
#apDiv9 {
	position:absolute;
	left:1050px;
	top:135px;
	width:28px;
	height:41px;
	z-index:7;
}
#apDiv10 {
	position:absolute;
	left:994px;
	top:178px;
	width:29px;
	height:26px;
	z-index:7;
}
#apDiv11 {
	position:absolute;
	left:1024px;
	top:178px;
	width:29px;
	height:26px;
	z-index:8;
}
#apDiv12 {
	position:absolute;
	left:1054px;
	top:178px;
	width:29px;
	height:26px;
	z-index:9;
}
#apDiv13 {
	position:absolute;
	left:1084px;
	top:178px;
	width:29px;
	height:25px;
	z-index:10;
}
#apDiv14 {
	position:absolute;
	left:1113px;
	top:178px;
	width:29px;
	height:25px;
	z-index:11;
}
#apDiv15 {
	position:absolute;
	left:1143px;
	top:178px;
	width:29px;
	height:25px;
	z-index:12;
}
#apDiv16 {
	position:absolute;
	left:1174px;
	top:178px;
	width:29px;
	height:25px;
	z-index:13;
}
#apDiv17 {
	position:absolute;
	left:150px;
	top:175px;
	width:79px;
	height:75px;
	z-index:14;
}
#apDiv18 {
	position:absolute;
	left:1203px;
	top:178px;
	width:29px;
	height:26px;
	z-index:15;
}
-->
</style>
</head>

<body>
<div id="apDiv3"></div>
<div class="Style1" id="apDiv1">
  <p class="Style2">Danser avec bébé, <br />
    pour l’accueillir dans ce monde nouveau,<br />
    en douceur, en mouvement, <br />
    comme quand il était dans le ventre de sa maman. </p>
  <p class="Style2">Bébé porté en écharpe par l’un ou l’autre, <br />
    sent la chaleur du corps de son papa et de sa maman, <br />
    le bercement familier, <br />
    il se sent entouré, choyé, en sécurité.</p>
  <p class="Style2">Bienvenue également aux parents qui ont adoptés un bébé !</p>
  <p class="Style2">&nbsp;</p>
</div>
<div id="apDiv4"><span class="Style3">Puis avec bébé</span></div>
<div id="apDiv6"><img src="../images/1.jpg" width="197" height="300" /></div>
<div id="apDiv7"><img src="../site2-web-images/3logo_orange.png" width="470" height="611" /></div>
<div id="apDiv10"><a href="dansea3.html"><img src="../coeur.png" alt="" width="24" height="23" /></a></div>
<div id="apDiv11"><a href="futuremama.html"><img src="../coeur.png" width="24" height="23" /></a></div>
<div id="apDiv12"><a href="futurpapa.html"><img src="../coeur.png" width="24" height="23" /></a></div>
<div id="apDiv13"><a href="couple.html"><img src="../coeur.png" width="24" height="23" /></a></div>
<div id="apDiv14"><a href="bebe.html"><img src="../coeur.png" width="24" height="23" /></a></div>
<div id="apDiv15"><a href="organisation.html"><img src="../coeur.png" width="24" height="23" /></a></div>
<div id="apDiv16"><a href="contact.html"><img src="../coeur.png" width="24" height="23" /></a></div>
<div id="apDiv17"><img src="../Logo_dansea3.png" width="83" height="80" /></div>
<div id="apDiv18"><a href="fabienne.html"><img src="../coeur.png" width="24" height="23" /></a></div>
<div id="apDiv2"></div>
</body>
</html>
Edited by peter_budo because: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)
Member Avatar for flismayer

I tried to positioned all in relative but all the page setup now is a bit a mess :(
Thanks for your help!

Member Avatar for flismayer

I've tried also this but it does not work..any help?

#apDiv3 {
position:relative;
margin: 0 auto;
width:960px;
height: 650px;
z-index:1;
background-color: #3F3151;
}
#apDiv1 {
margin: auto;
width:40%;
z-index:2;
Edited by peter_budo because: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)
Member Avatar for Romil797

You could try to put the div in the good old center tag.
Hope that helps!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.