Results 1 to 5 of 5

Thread: Taking a site to CSS from Tables - having positioning problems

  1. #1
    Join Date
    Feb 2008
    Posts
    63
    Thanks
    2
    Thanked 8 Times in 8 Posts

    Default Taking a site to CSS from Tables - having positioning problems

    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

  2. #2
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default

    If you give me a few days, I can start from scratch to give you the same layout in XHTML and CSS.
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

  3. #3
    Join Date
    Mar 2008
    Posts
    218
    Thanks
    7
    Thanked 19 Times in 19 Posts

    Default

    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.
    Code:
    <!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">
    <!--
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	color: #000000;
    	background-color: #333399;	
    }
    
    #sitebar {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #FFFF00;
    	width: 188px;
    	height: 100%;
    	background-position: top;
    	text-align: center;
    	position: absolute;
    	top: 0px;
    	padding-right: 3px;
    	padding-left: 3px;
    }
    
    #main {
    	position: absolute;
    	padding: 0px;
    	left: 200px;
    	background-color: #ccccff;
    }
    
    #banner {
    	background-color: #333399;
    }
    
    #content {
    	padding: 10px;
    	width: 601px;
    }
    
    #bottom {
    	background-color: #333399;
    
    }
    
    a:link {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	color: #FFFF00;
    }
    a:visited {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	color: #FFFF00;
    }
    a:hover {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	color: #FFFFFF;
    }
    a:active {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	color: #ccccff;
    }
    -->
    </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>
    &quot;Where there is friction and<br />
      challenge in our lives,
      there is something of value
      wanting to be received.&quot;<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>

  4. #4
    Join Date
    Feb 2008
    Posts
    63
    Thanks
    2
    Thanked 8 Times in 8 Posts

    Default

    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
    Last edited by sandyk3; 03-16-2008 at 10:35 PM. Reason: adding text

  5. #5
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default

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

    Code:
    body{
    text-align: center;}
    
    #container{
    margin: 0px auto;}
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •