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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Posts
    272
    Thanks
    8
    Thanked 1 Time in 1 Post

    Two column webpage help

    Hi,
    I had a previous topic on columns website problems Help

    I'm still having some problems. If you go to my site www.college-ebook.com you will see that the body is in the left column. How do I move it to the right and make it actually look good and not so squished???

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello andynov123,
    Check your code with the validator to find errors in your basic layout. See the links in my signature line about validation.

    You have most of your html above the head of your document. A well formed document would look more like this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
    <link href="data1.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrap">
      <div id="header">The College Man's Guide To Ruining Your Life</div>
      <div id="inner-wrap">
        <div id="left"><img src="coverart.gif" alt="description" /></div>
        <div id="left1"><img src="buynow.gif" alt="description" /></div>
        <div id="left2"><img src="paypalverified.jpg" alt="description" /></div>
        <div id="main">The College Man's Guide to Ruining Your Life is going to take the literary world by storm. This is a story that must be expierenced.  Every year the next wave of college freshman is at serious risk of joining a fraternity that will torture, humiliate, and rob them of their humanity. young men are the most reckless group in our society. Each year more pieces are added to the neverending cycle.
          <p>The College Man's Guide to Ruining Your Life is their story. Fender is a student attending his first year of college,and he just joined the fraternity from hell. He becomes so caught up in pledging, he and his pledge brothers slowly lose their humanity in the course of a semester.  They're no long individuals, but the bottom of the barrel in the never ending chain. Fender's fraternity has been doing this since the 1800's. </p>
          <p>Fender will starve, experience torture you would never think students are capable of, and he will witness the true evil even he possesses himself. 
            Witness his story, see his fear, and experience what is turning 19 year old kids into monsters.</p>
        </div>
      </div>
      <div id="footer">Footer</div>
    </div>
    </body>
    </html>
    Look at this simple 2-column layout that can show you how your columns might work.
    Last edited by Excavator; 12-21-2010 at 05:49 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Mar 2010
    Posts
    199
    Thanks
    78
    Thanked 5 Times in 5 Posts
    It that does not help you could always try to do it with tables.
    Here is a example:

    I also cleaned up your code a bit.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    	"http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    	<title>Page title - Sitename</title>
    	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9" />
    	<meta name="description" content="Your description about your website for search engines.">
    	<meta name="keywords" content="keywords, to, find, your, website, on, search, engines,">
    	
    <style type="text/css">
    * {
    	margin: 0px auto;
    	padding: 0px;
    }
    body {
    	font: 76% Verdana, Arial, Helvetica, sans-serif;
    	background: #000;
    }
    #wrapper {
    	width: 850px; /* Page width */
    	background: #fff;
    	padding: 10px;
    	margin: 10px auto;
    }
    #header {
    	font-size: 200%;
    	margin: 10px;
    }
    #footer {
    	background: #ccc;
    	height: 120px;
    	margin-top: 10px;
    }
    .copyright {
    	padding: 50px;
    }
    p {
    	margin: 10px 0px;
    }
    h1,h2,h4,h5,h6 {
    	font-size: 155%; 
    	margin: 20px 0px;
    }
    .bold {
    	font-weight: bold;
    }
    .txt_center {
    	text-align: center;
    }
    table tr td {
    	vertical-align: top;
    }
    </style>
    
    </head>
    <body>
    <div id="wrapper">
    	<div id="header" class="bold txt_center">The College Man's Guide To Ruining Your Life</div>
    	<table cellspacing="0" cellpadding="0" border="0">
    		<tr>
    			<td>
    				<img src="http://www.college-ebook.com/coverart.gif" width="250" height="335" alt="coverart">
    				<br />
    				<img src="http://www.college-ebook.com/buynow.gif" width="250" height="70" alt="Buy Now!">
    				<br />   
    				<img src="http://www.college-ebook.com/paypalverified.jpg" width="256" height="197" alt="PayPal">
    			</td>
    			<td>
    				<p>The College Man's Guide to Ruining Your Life is going to take the literary world by storm. This is a story that must be expierenced.  
    				Every year the next wave of college freshman is at serious risk of joining a fraternity that will torture, humiliate, and rob them of 
    				their humanity. young men are the most reckless group in our society. Each year more pieces are added to the neverending cycle.</p>
    				<p>The College Man's Guide to Ruining Your Life is their story. Fender is a student attending his first year of college,and he just 
    				joined the fraternity from hell. He becomes so caught up in pledging, he and his pledge brothers slowly lose their humanity in the 
    				course of a semester.  They're no long individuals, but the bottom of the barrel in the never ending chain. Fender's fraternity has 
    				been doing this since the 1800's.</p><p>Fender will starve, experience torture you would never think students are capable of, and he 
    				will witness the true evil even he possesses himself. Witness his story, see his fear, and experience what is turning 19 year old 
    				kids into monsters.</p>
    			</td>
    		</tr>
    	</table>
    	<div id="footer" class="txt_center">
    		<div class="copyright">&copy; Footer</div>
    	</div>
    </div>
    </body>
    </html>

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by conware View Post
    It that does not help you could always try to do it with tables.
    Don't you know tables are not for layout? See the link in my sig about tables.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Oct 2010
    Posts
    272
    Thanks
    8
    Thanked 1 Time in 1 Post
    I fixed the <head> and what follows and I validated the site. Validating made everything look worse. I want the buy now button on the left under the coverart and the paypal verified image under the buynow button and the description on the right. www.college-ebook.com
    Last edited by andynov123; 12-21-2010 at 06:40 PM.

  • #6
    Regular Coder
    Join Date
    Mar 2010
    Posts
    199
    Thanks
    78
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Excavator View Post
    Don't you know tables are not for layout? See the link in my sig about tables.
    Yeah I know tables should not be used for layout, however when you want both columns the same height it would be a easy solution.

    Quote Originally Posted by andynov123 View Post
    I fixed the <head> and what follows and I validated the site. Validating made everything look worse. I want the buy now button on the left under the coverart and the paypal verified image under the buynow button and the description on the right. www.college-ebook.com
    Try the code I posted. should work I tried it on localhost.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Yes, still plenty of problems there.
    For example, #left is 200px wide but you put 250px wide coverart.gif in it.

    The box model shows how what you place in a div should not be larger than that div. margin/padding/border all count when figuring total sizes.

    A clear might make your buy now image go under coverart.gif but you have the same problem there - a 250px wide image in a smaller container.
    Try it like this -
    Code:
    #left1 {
    float:left;
    clear: left;
    width:250px;
    text-align:center;
    }
    Did you look at the demo site I linked you to earlier?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Regular Coder
    Join Date
    Mar 2010
    Posts
    199
    Thanks
    78
    Thanked 5 Times in 5 Posts
    Well Excavator, I checked out your signature link I can see now why its better to use divs. Also here is a example for andynov123, Basically the same code I already provided but with divs instead of tables.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    	"http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    	<title>Page title - Sitename</title>
    	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9" />
    	<meta name="description" content="Your description about your website for search engines.">
    	<meta name="keywords" content="keywords, to, find, your, website, on, search, engines,">
    	
    <style type="text/css">
    * {
    	margin: 0px auto;
    	padding: 0px;
    }
    body {
    	font: 76% Verdana, Arial, Helvetica, sans-serif;
    	background: #000;
    }
    #wrapper {
    	width: 850px; /* Page width */
    	background: #fff;
    	padding: 10px;
    	margin: 10px auto;
    }
    #header {
    	font-size: 200%;
    	margin: 10px;
    }
    #right_column {
    	float: right;
    	width: 590px;
    	clear: right;
    }
    #left_column {
    	width: 256px;
    }
    #left_column img {
    	display: block;
    	clear: right;
    }
    #footer {
    	background: #ccc;
    	height: 120px;
    	margin-top: 10px;
    }
    .copyright {
    	padding: 50px;
    }
    p {
    	margin: 10px 0px;
    }
    h1,h2,h4,h5,h6 {
    	font-size: 155%; 
    	margin: 20px 0px;
    }
    .bold {
    	font-weight: bold;
    }
    .txt_center {
    	text-align: center;
    }
    </style>
    
    </head>
    <body>
    <div id="wrapper">
    	<div id="header" class="bold txt_center">The College Man's Guide To Ruining Your Life</div>
    	<div id="right_column">
    		<p>The College Man's Guide to Ruining Your Life is going to take the literary world by storm. This is a story that must be expierenced.  
    		Every year the next wave of college freshman is at serious risk of joining a fraternity that will torture, humiliate, and rob them of 
    		their humanity. young men are the most reckless group in our society. Each year more pieces are added to the neverending cycle.</p>
    		<p>The College Man's Guide to Ruining Your Life is their story. Fender is a student attending his first year of college,and he just 
    		joined the fraternity from hell. He becomes so caught up in pledging, he and his pledge brothers slowly lose their humanity in the 
    		course of a semester.  They're no long individuals, but the bottom of the barrel in the never ending chain. Fender's fraternity has 
    		been doing this since the 1800's.</p><p>Fender will starve, experience torture you would never think students are capable of, and he 
    		will witness the true evil even he possesses himself. Witness his story, see his fear, and experience what is turning 19 year old 
    		kids into monsters.</p>
    	</div>
    	<div id="left_column">
    		<img src="http://www.college-ebook.com/coverart.gif" width="250" height="335" alt="coverart">
    		<img src="http://www.college-ebook.com/buynow.gif" width="250" height="70" alt="Buy Now!"> 
    		<img src="http://www.college-ebook.com/paypalverified.jpg" width="256" height="197" alt="PayPal">
    	</div>
    	<br clear="both" />
    	<div id="footer" class="txt_center">
    		<div class="copyright">&copy; Footer</div>
    	</div>
    </div>
    </body>
    </html>

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by conware View Post
    Well Excavator, I checked out your signature link I can see now why its better to use divs. Also here is a example for andynov123, Basically the same code I already provided but with divs instead of tables.
    You should check out the links about validation as well.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Excavator View Post
    You should check out the links about validation as well.
    Would appear so..lol

  • #11
    Regular Coder
    Join Date
    Mar 2010
    Posts
    199
    Thanks
    78
    Thanked 5 Times in 5 Posts
    Oops my mistake. didnot know I could validate my code from my local drive.
    I see i added a few mistakes because I normally use a diffrent doctype.
    Thanks for pointing out i should validate my code. Also didnot know that <br clear="both"> should be <br clear="all"> been doing that wrong for ages now lol.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by conware View Post
    Oops my mistake. didnot know I could validate my code from my local drive.
    I see i added a few mistakes because I normally use a diffrent doctype.
    Thanks for pointing out i should validate my code. Also didnot know that <br clear="both"> should be <br clear="all"> been doing that wrong for ages now lol.
    Instead of using a <br /> for clearing floats, which just adds unnecessary markup, have a look at how overflow: auto; can clear floats.
    It's always better to style the layout from the CSS, the markup should really be for presentation only.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    Regular Coder
    Join Date
    Oct 2010
    Posts
    272
    Thanks
    8
    Thanked 1 Time in 1 Post
    Ok. I almost got it perfect. If you see for yourself www.college-ebook.com. I'm trying to move everything in the left column up parallel with the description. I also want to put the price of the book between the cover art and the buy now button. Thanks

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Looking better. Still not valid.
    Your column order is odd too. Did you look at that demo of the 2-column layout?

    This might work for you too -
    Code:
    #left_column {
    	width: 256px;
    float: left;
    	
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    Regular Coder
    Join Date
    Oct 2010
    Posts
    272
    Thanks
    8
    Thanked 1 Time in 1 Post
    That work perfect Excavator. My site is done except for one last thing. At the bottom where it says contact us. How do I make the grey background that says contact us thinner and make the margins smaller. Its too wide.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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