Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

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

M

musicpenguy

macrumors 68000
Original poster
Oct 29, 2006
1,824
734
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="https://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>
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
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.
 
M

musicpenguy

macrumors 68000
Original poster
Oct 29, 2006
1,824
734
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
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
musicpenguy said:
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
Click to expand...

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.
 
M

musicpenguy

macrumors 68000
Original poster
Oct 29, 2006
1,824
734
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom