Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I line this up using css or tables?

    Ok, I am having a challenge building this site: .http://www.dayscoloncleanse.com It was recommended that I use CSS so I did. I am so frustrated because the only way I know how to line up two items (i.e. the buy buttons on the front page) is to use tables but it looks like poo because it shows the table. I wanted to do the same thing with two graphics under the buy buttons but cannot figure out how to get them on the same line. I want to put the credit cards logo on the right and a live chat help button on the left. Finally gave up in frustration and took the live help button off.

    Would anyone here be able to point me in the right direction on how to correct the horrible tables showing and still get graphics in the same line?

    Thanks so much!

  • #2
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    As for not showing the tables, in the CSS file, just include
    Code:
    table {border: 0px}
    That will remove all borders.

    And the graphics:
    Code:
    <table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
    
      <tbody>
    
        <tr>
    
          <td align="undefined" valign="undefined">
          <center>
          <form action="http://ww6.aitsafe.com/cf/add.cfm" method="post"><input name="userid" value="82209653" type="hidden" /><input name="product" value="Almighty Cleanse Complete System - Formula 1 &amp; Formula 2 (capsules)" type="hidden" /><input name="price" value="59.95" type="hidden" /><input name="return" value="www.dayscoloncleanse.com/almighty-cleanse.html" type="hidden" /><input value="Order Capsules Now" type="submit" /></form>
    
          </center>
    
          </td>
    
          <td align="undefined" valign="undefined">
          <center>
          <form action="http://ww6.aitsafe.com/cf/add.cfm" method="post"><input name="userid" value="82209653" type="hidden" /><input name="product" value="Almighty Cleanse Complete System - Formula 1 &amp; Formula 2 (powder)" type="hidden" /><input name="price" value="59.95" type="hidden" /><input name="return" value="www.dayscoloncleanse.com/almighty-cleanse.html" type="hidden" /><input value="Order Powder Now" type="submit" /></form>
    
          </center>
    
          </td>
    
        </tr>
        <tr>
          <td>REPLACE THIS WITH LIVE CHAT</td>
          <td align=right><img style="width: 400px; height: 47px;" alt="Secure Credit Card Ordering" src="/images/m_cards.jpg" /></td>
         </tr>
    
      </tbody>
    </table>
    Btw, this is probably the single strangest page I've ever edited.

  • #3
    Regular Coder
    Join Date
    Dec 2005
    Location
    Ohio
    Posts
    286
    Thanks
    7
    Thanked 9 Times in 9 Posts
    Why bother with the tables at all? You also use a lot of inline styling and deprecated code. I went through your code and made a bunch of changes, leaving comments for explanations. I got rid of your tables and adjusted the whole page for semantics.

    Read through the comments I left you and also validate your code. The way I have it, there are 10 errors relating to your buttons. You may want to try using a different Doctype, like Transitional. You may also want to review material presented at W3Schools.com just to help strengthen your abilities.

    CSS:
    Code:
    * {
     padding: 0;
     margin: 0;
    }
    
    body {
    	font-family: Veranda, sans-serif; /* this font comes up as sans-serif for me. I am not sure, but you may mean "Verdana" like you use further in your code */
    	color: #000;
    	font-size: 14px;
    	}
    
    #wrapper {
    	width: 700px;
    	margin: 0 auto;
    	}
    
    #header {
    	border: 0px solid #ccc;
    	margin: 5px 5px 0px 5px;
    	height: 115px;
    	padding: 0 0 1em 0; /* added bottom padding to get rid of extra break */
    	background-color: #FFF;
    	text-align: center; /* added these from the inline styled div */
    	margin-left: 6px; 
    	width: 681px;
    	}
    	
    #centercolumn {
    	border: 2px solid #ccc;
    	margin: 0 5px 0px 5px;
    	display: inline; /* IE Hack */
    	padding: 4px;
    	width: 97.4%;
    	float: left;
    	min-height: 300px;
    	}
    * html #centercolumn {height:300px} /* IE Min-Height Hack */ 
    
    /* added this info here in case you decided to add a "right column"
    #rightcolumn {
    	width: 10%;
    	float: left;
    	}
    */
    
    #footer {
    	background-color: #FFF;
    	margin: 0 5px 5px 5px auto;
    	font-size: 14px;
    	display: inline; /* IE Hack */
    	padding: 4px;
    	width: 97.7%;
    	text-align: center;
    	}
    	
    #footer ul {
    	padding: 0;
    	list-style: none;
    	margin: auto;
    	}
    
    #footer li {
    	padding: 0 .5em;
    	font: bold x-small Verdana, sans-serif;
    	display: inline;
    	text-align: center;
    	}
    	
    h1 {
    	text-align: center;
    	padding: 0 0 1em 0;
    	}
    
    h2 {
    	text-align: center;
    	padding: 1em 0;
    	}
    	
    #orderbar {
    	width: 100%;
    	clear: both;	/* This is will replace your table for the order buttons */
    	padding: 0 0 1em 0;
    	}
    
    #caps, #powd {
    	width: 50%;
    	text-align: center;
    	float: left;
    	}
    
    #stats {
    	background-color: rgb(196, 255, 242);
    	margin: 1em 0;
    	border: 5px groove #fff; /* if you do not want a border here either, just remove this */
    	}
    
    #fda {
    	font-size: x-small;
    	font-family: Verdana, sans-serif;
    	}
    HTML:
    Code:
    <body>
    
    <div id="wrapper">
    
    <div id="header">
    	<img style="width: 635px; height: 104px;" alt="Almighty Cleanse" src="/images/renew.gif" />
    </div>
    
    <div id="centercolumn">
    
    	<!-- This is not necessary. It is not doing anything. I would get rid of it, unless you are planning on adding something else in this div
    	<div style="text-align: center;"></div> 
    	-->
    
    <h1><img style="border: 0px solid ; width: 600px; height: 238px;" alt="Almighty Cleanse On Sale!" src="/images/order.jpg" /></h1>
    <!-- removed the <p> and added <h1> with style for semantics -->
    
    <div id="orderbar">
    	<div id="caps">
    		<form action="http://ww6.aitsafe.com/cf/add.cfm" method="post"><input name="userid" value="82209653" type="hidden" /><input name="product" value="Almighty Cleanse Complete System - Formula 1 &amp; Formula 2 (capsules)" type="hidden" /><input name="price" value="59.95" type="hidden" /><input name="return" value="www.dayscoloncleanse.com/almighty-cleanse.html" type="hidden" /><input value="Order Capsules Now" type="submit" /></form>
    	</div>
    	<div id="powd">
    		<form action="http://ww6.aitsafe.com/cf/add.cfm" method="post"><input name="userid" value="82209653" type="hidden" /><input name="product" value="Almighty Cleanse Complete System - Formula 1 &amp; Formula 2 (powder)" type="hidden" /><input name="price" value="59.95" type="hidden" /><input name="return" value="www.dayscoloncleanse.com/almighty-cleanse.html" type="hidden" /><input value="Order Powder Now" type="submit" /></form>
    	</div>
    </div>
    <!-- removed the table and put the buttons into styled <div>'s -->
    
    
    <h2><img style="width: 400px; height: 47px;" alt="Secure Credit Card Ordering" src="/images/m_cards.jpg" /></h2>
    <!-- removed the <div> and added a padded <h2> tag for semantics-->
    
    <hr />
    
    <h1>Do you want to feel
    healthier <br />
    and have more energy*?</h1>
    
    <!-- the text below here should be within <p> tags for semantics, however, it can be left this way -->
    <br />
    
    <br />
    
    You've seen <a href="/almighty-cleanse.html">Almighty
    Cleanse</a>&trade; advertised on TV and it made
    you think...
    <br />
    
    could this really be true? <br />
    
    <br />
    
    I know as I was there myself not to long ago. The more I read and studied about colon cleansing the more I felt it was something I needed to at least try. I am glad I did because it gave me back my energy that I hadnt had for nearly two years after the birth of
    our first daughter. Before I felt tired all the time and after just one season of cleansing, I noticed a huge difference. I was able to stay awake into the wee hours of the night if I wanted to and not be totally cranky the next morning. That is a wonderful thing when raising a delightful, energetic 2 year old!<br />
    
    <br />
    
    <a href="/almighty-cleanse.html">Buy Allmighty Cleanse</a><br />
    
    <br />
    
    Almighty Cleanse&trade; is a powerful yet gentle 2 part system to help regulate and purify your digestive tract.* This easy to use cleansing system helps expel impurities and fecal matter that build up on your intestinal walls.* One of the most concentrated natural purification systems available, Almighty Cleanse&trade; can work in only 7 days.*<br />
    
    <br />
    
    <h2>Almighty Cleanse&trade; - Feel Lighter &amp; Healthier</h2>
    
    <br />
    
    <!-- replace <span> with <strong> to achieve the desired effect -->
    <strong>Part 1</strong>&nbsp;quickly moves toxins and fecal matter out
    of the
    body by
    stimulating your digestive system to cleanse from within.*&nbsp;45
    capsules.<br />
    
    <br />
    
    <!-- replace <span> with <strong> to achieve the desired effect -->
    <strong>Part 2</strong>Effectively draws toxins out of your system, and
    pulls waste out
    of the body.* (Formula 2 is available in capsules or as a drink.) 105
    capsules or 200g drink.<br />
    
    <br />
    
    The Almighty Cleanse&trade; system includes a FREE 7 day Spa Detox
    guide plus "Spasational Light and Fit Recipes".<br />
    
    <br />
    
    <div id="stats">
    	<strong>Did you know? </strong>In the U.S., 2.5 million people visit doctors annually due to constipation.<br />
    
          <br />
    
          <strong>Feeling Bloated? </strong>The average American adult carries up to 22 pounds of intestinal waste.<br />
    
          <br />
    
          <strong>Sad Statistic</strong> - On average, 25% of the Standard American Diet consists of junk food.
    </div>
    <!-- removed the table and added a styled <div> tag -->
    
    <br />
    
    A great time to start colon cleansing is always... right now! Cleanse your body using the best-selling Almighty Cleanse&trade;program and continue to do it once a season for optimal performance. Don't put off having better health and allow your body to function at it's optimal level now.<br />
    
    <br />
    
    Check out our complete line of <a href="/almighty-cleanse.html">Almighty Cleanse</a> products now!<br />
    
    &nbsp;</div>
    
    <div id="rightcolumn">
    	<p>&nbsp;</p>
    </div>
    <!-- I assume this is just a temporary place holder, however, it you will not be adding anything to this <div>, I suggest removing it all together -->
    
    <div id="footer">
    	<!-- There is a far better and more efficient way of accomplishing this: using a list -->
    	<ul>
    		<li><a href="http://www.dayscoloncleanse.com/">Almighty Cleanse Home</a></li>
    		<li><a href="/almighty-cleanse.html">Buy Almighty Cleanse</a></li>
    		<li><a href="/danny-vierra.html">About</a></li>	
    		<li><a href="/disclaimer.html" rel="nofollow">Disclaimer</a></li>
    		<li><a href="/privacy.html" rel="nofollow">Privacy Policy</a></li>
    		<li><a href="/contact.html" rel="nofollow">Contact Us</a></li>
    	</ul>
    	
    	<span id="fda">	
    		*These statements have not been evaluated by the Food and Drug Administration.<br />
    		
    		This product is not intended to diagnose, treat, cure, or prevent any disease.<br />	
    	</span>
    
    </div>
    
    </div>
    
    </body>
    Hope this helps.

  • #4
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OMG! I knew it was awful. I have been trying to use a free html editor and it appears to really be messing the code up alot. I am obviously not an experienced website builder... that probably goes without saying! lol Yes, I have tried reading through w3schools stuff but man, it just goes over my head.

    Thank you so much kaitco and ikilledsanta for the codes. I will go try them now. I appreciate you taking the time to post this, even if it is the strangest page you've ever edited
    Last edited by codewhat?; 12-27-2006 at 09:57 PM.


  •  

    Posting Permissions

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