Taking a site to CSS from Tables - having positioning problems [Archive]

View Full Version : Taking a site to CSS from Tables - having positioning problems

sandyk3

03-16-2008, 02:59 PM

Hi Everyone,
I'm hoping someone can help me. I have posted this on two other boards, one board no one is responding and on the other board I'm getting some help but the fixes are not working. When I try to change, say the width of the logo div, other things go haywire so then I try to fix that and I am feeling like a cat chasing its tail. I am taking a site from tables to CSS and I've been working on this at night after work since Tuesday night. I've run into many issues and have had many many trial and errors but this is the way we learn. I do understand now that positioning has to do with the parent div. i also found the answer to have my content area decrease/increase with any given text. I have tried many times with different mixes of changes and I cannnot get it. I do love a challenge but I know when to ask for help. Having said all this.... here is my issue.

I would like to decrease the size of the wrapper. I think it is too wide - maybe my logo div is too wide on the left. I would like to decrease the size of the content but I do need a bit of the wrapper showing on the right side. The last issue that I'm having is that at the bottom of the page, either my content is peaking through or my body is, I'm not sure. This is the site I'm changing:

http://thegenesiscenter.net/bio.html

Here is where I'm testing it:

http://www.sandysdesignline.com/genesis/biotest3.html

Also, if you notice, there are two images I have not put in yet. There is an image on the left of the content and another on the very bottom. I don't know if Beth is going to really want to incorporate those images either. I have tried to put those in and failed. My husband thinks that since we are going from tables to CSS that I shouldn't be so concerned with the width of my areas being EXACTLY like the old site.

Any suggestions would be greatly appreciated. Thank you for your time in advance.

I just put it through browsershots.org and it's worse than I thought. Back to the drawing board for me.

http://browsershots.org/http://www.s.../biotest3.html

alexjewell

03-16-2008, 08:20 PM

If you give me a few days, I can start from scratch to give you the same layout in XHTML and CSS.

tfit

03-16-2008, 08:32 PM

Dr. Wade,

I found the code far to difficult and too long to understand so i made some adjustments. I would put the page in two large divs (sitebar and main) and position your picture as float. Now I am quite new to css and there will be far better coders, but maybe you can take this concept and alter it to your needs.

<!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=ISO-8859-1" />
<title>GenesisCenterBioTest</title>
<link href="genesisstyles4.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>

</head>

<body>

<div id="sitebar">

<div><img src="logo-small.jpg" width="128" height="120" alt="Genesis Center Logo"/></div>

<br />
<strong>Beth Wade, Ph.D.</strong><br />
Medical Intuitive<br />
Counseling/Energy Therapy<br />
<br />
Phone: 760-720-2384<br /><a href="mailto:drwade@TheGenesisCenter.net">TheGenesisCenter.net</a><br />
<br />
<hr align="center" width="80%" size="3" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div>
"Where there is friction and<br />
challenge in our lives,
there is something of value
wanting to be received."<br />
<br />
Chris Michaels</div>
</div>

<div id="main">
<div id="banner"><img src="name.jpg" width="413" height="148" alt="Genesis Center Banner" /><hr align="center" size="3" />
<a href="index.html">Home</a> | <a href="biotest.html">About Us</a> | <a href="#">Heros</a> | <a href="about.html">The Genesis</a> | <a href="#">The Biopulsar</a> | <a href="services.html">Services</a> | <a href="faqs.html">FAQs</a> | <a href="contact.html">Contact Us</a></div>

<div id="img"><img src="wade-ti.jpg" alt="Dr Beth Wade" width="138" height="31"/></div>

<div id="content">
<p>Reverend Dr. Beth Wade's journey as a healer began as a young child. Beth's father is a pediatrician, her mother an RN, and each sibling has pursued a career in healthcare. Beth earned an AA in Medical Assisting, yet her heart's cry has always led her along a more spiritual path, seeking to heal the whole person...body, mind and spirit.</p>
<p>After the untimely loss of her husband in March 2003, she was so touched by the out-pouring of love and support from her community that she was inspired to give back. With time and personal healing, Beth enrolled at the University of Metaphysical Sciences in Arcata, California. She currently practices as a Medical Intuitive with a Masters in Divinity and a Ph.D. in Metaphysical Sciences.</p>
<p>It is with love, compassion and respect that she teaches her clients how to create a more peaceful and positive reality through the Laws of Attraction.</p>
<p>Dr. Wade's expertise includes counseling in the following areas: Loss and grief, one-on-one, premarital and family, help with new directions in life, assistance with those experiencing ADD/ADHD, autism and teens who don't fit into the established middle or high school structure.</p>
<p>Reverend Dr. Beth Wade's journey as a healer began as a young child. Beth's father is a pediatrician, her mother an RN, and each sibling has pursued a career in healthcare. Beth earned an AA in Medical Assisting, yet her heart's cry has always led her along a more spiritual path, seeking to heal the whole person...body, mind and spirit.</p>
<p>After the untimely loss of her husband in March 2003, she was so touched by the out-pouring of love and support from her community that she was inspired to give back. With time and personal healing, Beth enrolled at the University of Metaphysical Sciences in Arcata, California. She currently practices as a Medical Intuitive with a Masters in Divinity and a Ph.D. in Metaphysical Sciences.</p>
<p>It is with love, compassion and respect that she teaches her clients how to create a more peaceful and positive reality through the Laws of Attraction.</p>
<p>Dr. Wade's expertise includes counseling in the following areas: Loss and grief, one-on-one, premarital and family, help with new directions in life, assistance with those experiencing ADD/ADHD, autism and teens who don't fit into the established middle or high school structure.</p>
<p>Being in touch and in tune with your spirit is vitally important to a person's physical health. Dr. Wade specializes in helping clients tune into their "Spirit Being" and achieve their mental, physical and spiritual goals.</p>
<p>Start the process toward a more fulfulling life experience by contacting Dr. Wade for an appointment today!</p></div>

<div id="bottom"><br /><hr align="center" size="3" />
<a href="index.html">Home</a> | <a href="biotest.html">About Us</a> | <a href="#">Heros</a> | <a href="about.html">The Genesis</a> | <a href="#">The Biopulsar</a> | <a href="services.html">Services</a> | <a href="faqs.html">FAQs</a> | <a href="contact.html">Contact Us</a><br />©2007 The Genesis Center<br />
</div>

</div>

</body>

</html>

sandyk3

03-16-2008, 10:28 PM

Can I call you Alex?

Thank you for your time. I am almost there as I keep making small changes. It's just not working all the way. Again, thank you!

Sandy K

and tfit - Thank you also for your time. I'm not sure if you took a look at the site I am trying to redesign but I need the content to be centered. If I didn't, I wouldn't be finding it so difficult to create a new page, as you are right, sectioning it would have been the first thing I did. So, I do need a wrapper or some other div to contain the page. And I need to say that I really don't think that my HTML or CSS was too long or too difficult to understand - I have seen much much worse. I think mine was pretty simple.

Thank you!
Sandy K

alexjewell

03-17-2008, 10:44 AM

If centering is what's causing the issues, code it on the left THEN center it. Centering is just this:

body{
text-align: center;}

#container{
margin: 0px auto;}