Advice on how to make this website look better and have text fit where it is should

Discussion in 'Web Design and Development' started by musicpenguy, Feb 23, 2010.

  1. musicpenguy macrumors 6502a

    Joined:
    Oct 29, 2006
    #1
    Can someone help me make this site look better - currently the text goes into the sides of the page and their is no sidebar - and I'd love to know what I'm doing wrong - I've never done any web coding just iWeb - and would love some advice on how to make this better!

    Thanks!
    Tim

    Code:
    <!-- Original version by [url]http://binarybonsai.com/kubrick[/url].  Ported to
    Libsyn by Paul Wilch August 2005  If you use this template please keep
    this here. Contact: [email]paulwilch@gmail.com[/email] , [url]http://paulwilch.com[/url] -->
    
    <html>
    <head>
    <title>[[podcast_name_text]]</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <!-- Edit META TAGS for better search results! -->
    
    
    <meta name="description" content="EDIT_HERE">
    <meta name="keywords" content="EDIT_HERE">
    <meta name="Owner" CONTENT="EDIT_HERE">
    <meta name="Author" CONTENT="EDIT_HERE">
    <meta name="Creator" CONTENT="EDIT_HERE">
    <meta name="Subject" CONTENT="EDIT_HERE">
    <meta name="copyright" CONTENT="2004-2005 ">
    
    
    <!-- Do not edit META TAGS below this! -->
    
    
    <meta name="Language" CONTENT="English">
    <meta name="Distribution" CONTENT="Global">
    <meta http-equiv="expires" CONTENT="No Expire">
    <meta name="rating" CONTENT="General">
    <meta name="robots" CONTENT="index,follow">
    <meta name="revisit-after" CONTENT="7 days">
    <link rel="alternate" type="application/rss+xml" title="RSS" href="http://[[podcast_name]]/rss"/>
    <style type="text/css">
    <!--
    body {
        color:#cccccc;
        font-family : Verdana, Arial, Helvetica, sans-serif;
        margin: 150px;
        padding: 50px;
        background-color: #E7E7E7;
        background-image: url();
    }
    a {
            text-decoration: none;
        color: #4182B8;
    }
    a:hover {
        text-decoration: underline;
       
    }
    .container
    {
        background: #3C3C3C url([url]http://libsyn.com/templates/ku-blue/images/KubBlueBkGrnd.jpg[/url]) repeat-y center top;
        width: 760px;
        width: 760px;
        width: 760px;
        margin: 0 auto;
        text-align: left;
    }
    .headerTop { 
       
    }
    .headerMiddle {      
    }
    .titleBar {
        background-color: #DEDEDD;
        cursor: pointer;
        color: #666666;
    }
    .podcastTitle {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 36px;
        font-weight: bold;
        color: #FFFFFF;
        background-repeat: no-repeat;
        background-image: url([url]http://libsyn.com/templates/ku-blue/images/KubBlueHeader.jpg);[/url]
        height: 215px;
    }
    .podcastDescription {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #FFFFFF;
        text-align: center;
        padding: 3px;
    }
    .headerBottom {
    }
    .bodyMiddle {
    }
    .rightnav
    {
    float: right;
        width: 200px;
        width: 210px;
        width: 200px;
        margin: 0 0 0 0.5em;
        padding: 0.5em;
        font-size: 90%;
    }
    
    .content
    {
        margin-left: 10px;
        margin-right: 10px;
        padding: 1em;
    }
    .blogPane {
        font-size: 10px;
        color: #000000;
        width: 560px;
        padding-top: 3px;
        padding-right: 15px;
        padding-bottom: 1px;
        padding-left: 7px;
    }
    .postImage {
        float: right;
        padding-left: 5px;
        max-width: 250px;
        vertical-align: middle;
    }
    .viewTypes {
        font-size: 6px;
        color: #DDEEEE;
    }
    .postDate {
        font-size: 9px;
        color: #333333;
    }
    .postTitle {
        font-size: 18px;
        color: #000000;
        font-weight: bold;
    }
    .postBody {
        font-size: 11px;
        color: #000000;
    }
    .postDetails {
        font-size: 9px;
        color: #777777;
    }
    .postComments {
        font-size: 10px;
        color: #111235;
        background-color: #FFFFFF}
    .postSeparator {
        border: thin dotted #DEDEDD;
        background-color: #F9F8F9;
    }
    .showCommentsOdd{
        color: #202022;
        font-size: 10px;
        border-bottom: thin dotted #DEDEDD;
        padding: 5px;
        margin-bottom: 5px;
    }
    .showCommentsEven{
        color: #202020;
        font-size: 10px;
        border-bottom: thin dotted #DEDEDD;
        background-color: #FFFFFF;
        padding: 5px;
        margin-bottom: 5px;
    }
    .showCommentsDetails {
        font-size: 9px;
    }
    .showCommentsDetailsAuthorPost {
        font-size: 10px;
        font-weight: bold;
    }
    
    .sidePaneTitles {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #666666;
        border-bottom-width: 1px;
        border-bottom-style: thin;
        border-bottom-color: #000000;
        cursor: default;
    }
    
    .sidePaneContent {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #4485BB;
        cursor: default;   
    }
    
    #wp-calendar {
        border: 1px dashed #ddd;
        empty-cells: show;
        margin: 0;
        width: 85%;
        font: 10px Verdana, Arial, Helvetica, sans-serif;
    }
    #wp-calendar a {
        display: block;
        font: 10px Verdana, Arial, Helvetica, sans-serif;
    }
    #wp-calendar a:hover {
        background: #FFFFEE;
        color: #800000;
        font: 10px Verdana, Arial, Helvetica, sans-serif;
    }
    #wp-calendar caption {
        color: black;
        text-align: left;
        font: 10px Verdana, Arial, Helvetica, sans-serif;
    }
    #wp-calendar td {
        color: black;
        font: normal 10px Verdana, Arial, Helvetica, sans-serif;
        letter-spacing: normal;
        padding: 1px ;
        text-align: center;
    }
    #wp-calendar td:hover, #wp-calendar #today {
        color: black;
        font: 10px Verdana, Arial, Helvetica, sans-serif;
        cursor: default;
    }
    #wp-calendar th {
        text-transform: none;
        font: normal 10px Verdana, Arial, Helvetica, sans-serif;
        color: #666666;
        font-weight: bold;
    }
    
    footer {
       
    }
    body,td,th {
        color: #000000;
    }
    .rightnav1 {float: right;
        width: 220px;
        width: 210px;
        width: 220px;
        margin: 5 0 0 0.25em;
        padding: 0.25em;
        font-size: 90%;
    }
    .rightnav11 {float: right;
        width: 200px;
        width: 210px;
        width: 200px;
        margin: 0 0 0 0.5em;
        padding: 0.5em;
        font-size: 90%;
    }
    -->
    </style>
    </head>
    <body>
    <div align="center">
      <table width="760" height="100%" border="0" align="center" cellpadding="0" cellspacing="0" background="http://libsyn.com/templates/ku-blue/images/KubBlueBkGrnd.jpg" bgcolor="#E7E7E7">
        <tr>
          <td valign="top" bgcolor="#E7E7E7">
    <div class="container">
              <div class="headerTop">     <div class="headerMiddle">
                <div class="titleBar" onClick="location.href='http://[[podcast_name]]';">
                  <div class="podcastTitle">
                     
                      <br>
                      <p align="center">[[podcast_title]]</p>
                   
    
                  </div>
                </div>
              </div>     
              </div>
             
              <div align="center">
                <table width="750" height="50" border="0" cellpadding="0" cellspacing="0">
                  
            </table>
              </div>
              <div class="bodyMiddle">
                <div class="footer" align="right">
                  <div align="center">
                    <table width="95%" border="0" cellspacing="0" cellpadding="0">
                    
                      <tr>
                        <td width="68%" valign="top"><div class="content"> [[blog_pane]]</div></td>
                        <td width="32%" valign="top" ><p class="sidePaneTitles"> <span style="font-weight: bold;"></span>
                       
                       
                       
                       
                        <!---                       Side Nav Start                          -->
                       
                       
                       
                        <!-- If you do not want a 'module' on your side bar just
                        delete it below. For instance, if you do not want the
                        Libsyn player just delete [[libsyn_player]]. -->
                       
          
                       <!---  Syndication  -->
                        <p class="sidePaneTitles"><strong>Syndication</strong></p>
                        <span class="sidePaneContent">[[syndication]] </span>
    
                         <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?id=354085981" title="The iPad Possibilities Podcast: itunes 1click subscribe"><img src="http://media.libsyn.com/media/tchaten/subscribe.jpg"></a>
                        
    
    <object type="application/x-shockwave-flash" data="https://clients4.google.com/voice/embed/webCallButton" width="230" height="85"><param name="movie" value="https://clients4.google.com/voice/embed/webCallButton" /><param name="wmode" value="transparent" /><param name="FlashVars" value="id=afbdb5de22556df5dd545de1f74b265e04e999c7&style=0" /></object>
    
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="YLR36FDJZDSJ2">
    <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>
    
    
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
    ">
    <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>
    
    
                       
                        <!---  Categories  -->
                        <p class="sidePaneTitles"><strong>Categories</strong></p>
                        <span class="sidePaneContent">[[categories]] </span>
                         
                         
                         
                        <br>
                         
                        <!---  Search  -->
                        <strong class="sidePaneTitles">Keyword Search</strong><br>
                        <span class="sidePaneContent">[[search]]</span>
                         
                        <br>
                        <br>
                           
                        <!---  Calendar  -->
                        [[calendar]]
                       
                        <br>
                        <br>
                         
                        
                         
                        <!---  Archives  -->
                        <strong class="sidePaneTitles">Archives</strong><br>
                        <span class="sidePaneContent">[[archives]]</span><br>
                       
                        <br>
                        <br>
    
    <!-- list of links begins here. Add or subtract for what you need -->
    <!-- replace # with the outbound URL you would like, and "Link #x" with the title you want to see on the list of links-->
    
    			<ul>
    				<li><a href="http://www.ustream.tv/user/iPadPossible">The Live iPad Possibilities Podcast</a></li>
    				<li><a href="http://www.macosken.com/">Mac OS Ken</a></li>
    				<li><a href="http://www.maccast.com/">MacCast</a></li>
    				<li><a href="http://www.typicalmacuser.com/wordpress/">Typical Mac User</a></li>
    				<li><a href="http://www.macrumors.com/">Mac Rumors</a></li>
    				</ul>
                    
                    
    			</div>
    
     
                        
                       
                        <!---                       Side Nav End                         -->                   
                       
                       
                       
                       
                       
                       
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
          </div></td>
        </tr>
        <tr>
          <td width="760" height="95" align="center" valign="top" background="http://libsyn.com/templates/ku-blue/images/KubBlueFooter.jpg" bgcolor="#FFFFFF" ><div align="center"></div></td>
        </tr>
       
       
      </table>
     
    </div>
    </body>
    </html>
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Looks like there's a mix of table-based layouts and CSS-based layouts. Get rid of the tables. Your CSS needs a bit of cleaning up. I see a few selectors that have the width property set 3 times in a single selector. It also be more help to give a link to the site rather than just posting the HTML. We can view the result with just the code and don't have the images to go along with the page.
     
  3. musicpenguy thread starter macrumors 6502a

    Joined:
    Oct 29, 2006
  4. musicpenguy thread starter macrumors 6502a

    Joined:
    Oct 29, 2006
    #4
    Would you be able to create a post without the tables - it seemed the tables that I took out by doing a search for tables and removing those areas resulted in a blank page
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    Yes, you can accomplish your layout with CSS and no tables. It does take an understanding of CSS to do it though. Your site views fine in Firefox, but I noticed the issues with Safari.
     
  6. musicpenguy thread starter macrumors 6502a

    Joined:
    Oct 29, 2006
    #6
    Is this a quick thing to do? - I don't know CSS and would love if someone could edit the code to make it CSS and not table based.
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    Not really. it would take a bit of time and a decent understanding of CSS.
     

Share This Page