PDA

View Full Version : Need help to center a div for content of webpage


wheelstb
11-27-2012, 03:02 AM
I'm having difficulty centering a div that I want to put the content for my webpage in. I created the A/P (I plan to remove the absolute setting on the div later)
Initially I went into the CSS panel - then under the box menu - then I set the left and right margins to auto.
That did not work. then I tried to set all of the margins to auto, hoping that something would work. But nothing worked. The div is simply sitting wherever I initially position it.
I would appreciate any advice. Thank you for the help.
Here is my code.

wheelstb
11-27-2012, 03:04 AM
<!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" />
<title>Untitled Document</title>
<style type="text/css">
.Menuandlogo {
text-align: center;
}
ul.centreit {
text-align: left;
display: inline-block;
}
.contentdiv {
margin-right: auto;
margin-left: auto;
}
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
position:absolute;
width:700px;
height:383px;
z-index:1;
left: 380px;
top: 296px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body class="MenuBarActive">
<div class="contentdiv" id="apDiv1">
<p>At therapy for kids our goal is to provide pediatric therapeutic treatments designed to enrich the lives of children and their families. We believe that therapy is about more than simply reaching a goal. As therapist our job is to provide your child and family with the tools and knowledge necessary to ensure that your child’s journey through life is as successful as possible.</p>
<p><br />
We understand that pediatric therapy can be very complex, no two children or families have the same needs and aspirations. Our complete package of pediatric services includes physical therapy, occupational therapy, speech therapy and school services. Because we offer a wide variety of services we will be able to meet all of your current needs and continue to help in the future as the needs of your family progress and evolve. What sets us apart from other healthcare providers is we provide therapeutic solutions that meet your family’s needs in the comfort of your own home.</p>
<p>If you’re visiting our website for the first time you may find yourself overwhelmed, unsure where to turn or what to do next. We are here to help. We have all the resources you need to get your child set up for their first visit.</p>
</div>
<div class="Menuandlogo">
<img src="../4kids/logo 600.jpg" alt="Therapy 4 Kids" width="600" height="171" align="top" />
<br />
<ul id="MenuBar1" class="MenuBarHorizontal centreit">
<li><a href="#">Home</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Our Services</a>
<ul>
<li><a href="#">Physical Therapy</a></li>
<li><a href="#">Occupational Therapy</a></li>
<li><a href="#">Speech Therapy </a></li>
<li><a href="#">School Services</a></li>
<li><a href="#">Home Health</a></li>
</ul>
</li>
<li><a href="#">Can My Child Benefit</a> </li>
<li><a href="#">Resources</a></li>
<li><a href="#">Meet the Owners</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

edbr
11-27-2012, 03:07 AM
make it relative now, there is no pint in using it, a relative div will centre if margins left and rightare auto

domedia
11-27-2012, 01:06 PM
I created the A/P (I plan to remove the absolute setting on the div later)
The div is simply sitting wherever I initially position it.
Because that is exactly what you told it to do 8)

.

wheelstb
11-27-2012, 02:48 PM
When I make it relative, this is what happens. I'm not really sure where to go from here. Ideally I would like everything centered and linded up underneath each other.


I can't paste in the screenshot. The menu bar and logo seemed to be lower. The paragraph with the content is right on top of the menu bar and part of the logo.

wheelstb
11-27-2012, 03:21 PM
Disregard my last post. I deleted everything and created a typical div. Now everything seems to be working okay. Thank you to everyone for their assistance I really appreciate. This forum has been a great resource I have learned a lot and everyone here has been extremely helpful.

wheelstb
11-27-2012, 04:32 PM
Now I have run into a different problem. I want to pull the text of the website away from the ends of the pages. I don't necessarily want it centered but, I would like it pulled away from the edge so I can put a vertical border down the left and right side of the page.


I have set up my div with the left and right alignment set to auto. Upon re-examination of the webpage does not seem to be helping.

I also tried setting the width of the div to 700 pixels. That does not help either, the content still goes from end to end of the page.
How can I rectify this.

The div I am concerned about is called contentdiv.

I posted the new code just in case it would be helpful.

<!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" />
<title>Untitled Document</title>
<style type="text/css">
.Menuandlogo {
text-align: center;
}
ul.centreit {
text-align: left;
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.contentdiv {
margin-right: auto;
margin-left: auto;
width: 700px;
position: relative;
}
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
position:relative;
width:700px;
height:383px;
z-index:1;
left: 380px;
top: 296px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body class="MenuBarActive">
<div class="Menuandlogo">
<img src="../4kids/logo 600.jpg" alt="Therapy 4 Kids" width="600" height="171" align="top" />
<br />
<ul id="MenuBar1" class="MenuBarHorizontal centreit">
<li><a href="#">Home</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Our Services</a>
<ul>
<li><a href="#">Physical Therapy</a></li>
<li><a href="#">Occupational Therapy</a></li>
<li><a href="#">Speech Therapy </a></li>
<li><a href="#">School Services</a></li>
<li><a href="#">Home Health</a></li>
</ul>
</li>
<li><a href="#">Can My Child Benefit</a> </li>
<li><a href="#">Resources</a></li>
<li><a href="#">Meet the Owners</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<p>&nbsp; </p>
<div class="centreit">
<p>At therapy for kids our goal is to provide pediatric therapeutic treatments designed to enrich the lives of children and their families. We believe that therapy is about more than simply reaching a goal. As therapist our job is to provide your child and family with the tools and knowledge necessary to ensure that your child’s journey through life is as successful as possible.<br />
We understand that pediatric therapy can be very complex, no two children or families have the same needs and aspirations. Our complete package of pediatric services includes physical therapy, occupational therapy, speech therapy and school services. Because we offer a wide variety of services we will be able to meet all of your current needs and continue to help in the future as the needs of your family progress and evolve. What sets us apart from other healthcare providers is we provide therapeutic solutions that meet your family’s needs in the comfort of your own home.</p>
If you’re visiting our website for the first time you may find yourself overwhelmed, unsure where to turn or what to do next. We are here to help. We have all the resources you need to get your child set up for </div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

wheelstb
11-27-2012, 05:07 PM
Okay, I tried it again and somehow now everything works. I can only guess that somewhere in making a mistake setting up the div and editing the CSS.


I watched a couple of YouTube videos but, I still think I must be doing something wrong.

Can someone walk me through the right way to set up a div and put your content inside whether it be a menu bar, text or an image?

paul-chambers
11-27-2012, 07:31 PM
set up some padding on your divs that you have created (contentdiv), this will stop your text from hitting the edges of the divs, do this via css. Select your div, if in design view, and edit your css rule, or create a new one, in the box menu, change your padding to whatever suits the site and looks best ie padding left and right.

wheelstb
11-28-2012, 02:09 AM
I will give it a try thank you.