Friday, July 30, 2010

buythismiata.com

Posted by david on 31. March 2009 11:00

I am finally selling my Miata … it’s been hiding out in the garage waiting for me to clean it up, fix a few issues, & give up the idea of driving a sports car.  I thought it would be handy to have an easy to remember URL that I could plaster onto the car so that people wouldn’t have to scribble down a phone number.  BuyThisMiata.com was available for $10 … unfortunately I couldn’t get BuyMyMiata … that would have been more fun.  So, I bought it, got a dirt cheap linux hosting account, then forwarded it to my northshore domain.   

Got the page working after a few days of wrestling with CSS.  I was really excited about the display:table property that is supposed to be supported in the new IE.  Takes a lot of the hassle out of laying out the page. Ultimately, I had to give up … it worked in Firefox, but couldn’t get it to work right in IE8 …   Now, the authors of this book suggest that I should code my pages for the display:table property anyway, adding conditionals to support older browsers.  Their theory is that coding the old way just prolongs the non-standard quagmire that we are in.  Agreed – but just not now – gotsta figure out just how to do that.   That book is available through KCLS online tech books, btw.

Finally got the page working – though not as nice as I want it yet … but presentable.

The following are just notes and references

 

Get down! How to keep footers at the bottom of the page

How to implement Tables using CSS

Layout Gala a collection of 40 CSS layouts based on the same markup and ready for download!

mostly working 4 col liquid with bottom sunk footer – little bit of issue with width of footer.

 
 
 
top-section {
border: thin dotted #000000;
position:relative;
left:0;
top:0;
padding: 5px;
}
#mid-section {
 border: thin dotted #000000;
position:relative;
left:0;
top:0;
}
#bottom-section
 
  border: thin dotted #000000;
  position: absolute;
  left: 0;
  bottom: 0;
  width:99%;
  padding: 5px;
  height:60px;
  
 
 
 
#top-col-1 {
border: thin dotted #FF00FF;
position:relative;
padding-left:20%;
padding-right:10px;
}
#mid-col-1
 
  border: thin dotted #FF00FF;
  position: absolute;
  top: 0;
  left: 0;
  width: 10%;
 
#mid-col-2 {
border: thin dotted #FF00FF;
position:relative;
top:0;
left:10%;
width:50%;
}
#mid-col-3 {
border: thin dotted #FF00FF;
position:absolute;
top:0;
left:60%;
width:30%;
}
#mid-col-4 {
border: thin dotted #FF00FF;
position:absolute;
top:0;
left:90%;
width:10%;
}
#bottom-col-1 
{
 border: thin dotted #FF00FF;
 position:absolute;
 bottom:0;
 width: 98%;
 height:55px;   /* Height of the footer */
 background:#6cf;
 
}

the html:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestTables.aspx.cs" Inherits="buythismiata_TestTables" %>
 
<!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" lang="en-US">
  <head>
    <title>Welcome to Tidmouth Zoo and animal park</title
    &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="3col-csstable-liquid.css"/>
  </head>
  <body>
      <form id="form1" runat="server">
 
            <div id="top-section">
                <div id="top-col-1">
            header
 
                </div>
            </div>
 
            <div id="mid-section">
 
                <div id="mid-col-1">
 
                    midcol1
 
                </div>
                
                <div id="mid-col-2">
 
                    midcol2
 
                </div>
                
                <div id="mid-col-3">
 
                    midcol3
 
                </div>
                
                <div id="mid-col-4">
 
                    midcol4
                    
                </div>
             
            </div>
 
            <div id="bottom-section">
 
                <div id="bottom-col-1">
 
                    footer
                
                </div>
 
            </div>
    </form>
  </body>
</html>

 

before adding css for jqueryui:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="buythismiata_Default4" %>
 
<!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 runat="server">
    <title></title>
    <link href="css/BuyThisMiata_v4.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    
           <%
   1: --------------------------------------------------------------------------------------------------
%>
            <div id="top-section">
                <div id="top-col-1">             
                    Buy<i> This </i>Miata.com
                </div>
            </div>
           <%
   1: --------------------------------------------------------------------------------------------------
%>
            
            <div id="mid-section">
 
                <div id="mid-col-1">
 
                    midcol1
 
                </div>
                
                <div id="mid-col-2">
 
                               <div id="accordion">
                <h3><a href="#">Overview</a></h3>
                <div id="OverviewContent">
                    <p>
                        Spring is here & summer is coming!
                    </p>
                    
                    <p> OK ok ok ... spring will be here soon & summer probaby will follow</p>
                    
                    <p>
                        1995 Miata - black with black cloth interior
                    </p>
                    <p>
                        134,772 miles
                    </p>
                    <p>
                        manual transmission, softtop, AC, alloy wheels
                    </p>
                    <p>
                        runs well,  good gas mileage, looks sharp
                    </p>
                    
                    <p>
                        selling because I had to buy an Element - Miatas and babies do not go together
                    </p>
                    
                    <p> asking price: $3500.  Or Best Offer, of course - but I am showing this car through every possible channel - so if you're bid is well under the asking price, I can take your contact info & bid amount & see how things go.</p>                   
                    
                </div>
               
               
                <h3><a href="#">Details</a></h3>
                <div id="DetailsContent">
                
                        <ul>
                            <li>
                                1995 Mazda MX5 1.8l 4cyl - <a href="http://www.edmunds.com/mazda/mx5miata/1995/consumerreview.html">reviews</a>.         Purchased 6/02 from a Seattle dealer
                            </li>                    
                 
                                                                                        
                 
                            <li>
                                VIN: <a href="http://www.carfax.com/cfm/check_order.cfm?VIN=JM1NA3535S0618571&PopUpStatus=0">JM1NA3535S0618571</a>  I've got a hardcopy of the carfax report through 2002 & most repair/maintenance docs since.  No serious accidents in car during my time - someone backed into it once had to have minor body work done.                                
                            </li>                    
                 
                
 
                        
                    
                            <li>
                                5 Speed Manual Transmission
                            </li>                    
                 
                      
                 
                            <li>
                                Air Conditioner
                            </li>                    
                 
                        
                 
                            <li>
                                Wheels: Konig Alloy .... not factory.  They were on the car when I bought it, so I don't know model num.
                            </li>                    
                 
                        
                 
                            <li>
                                Tires: <a href="http://www.toyotires.com/tire/pattern/proxes-tpt">Toyo Proxes TPT </a> P195/60R-14 85H  All Season, Blackwall. Purchased 10/05 from Les Schwab @ 117,228 miles ... less than 15k on them.  
                            </li>                    
                 
                        
                 
                            <li>
                                New black softtop, purchased 7/08.  and the car has been garaged pretty much 24x7 since April so the top looks ( is ) brand new. It has a plastic rear window.
                            </li>                    
                        </ul>
                </div>                    <%
   1: --END DetailsContent--
%>
                
                
                
                <h3><a href="#">The Good, The Bad, The Ugly</a></h3>
                 <div id="GoodBadContent">
                    <h4>The Good</h4>
                        <ul>
                            <li>Still looks great</li>
                            <li>Fast enough to be fun, but not stupid fast</li>
                            <li>New Top</li>
                            <li>New Battery 3/09</li>
                            <li>New Serpentine Belts (2) 3/09</li>
                            <li>New catalytic converter 7/07 because it had failed emissions. Passed after that</li>
                            <li>New Master & Slave Clutch cylinders 5/07</li>
                            <li>Radiator was replaced 10/02</li>
                        </ul>
                    <h4>The Bad</h4>                    
                        <ul>
                            <li>This car has needed new shocks ( i think? ) since I bought it.  It is noisy over bumps. & am sure it would handle even better with new suspension. However, it is not critical ... which is why I never got it done. </li>
                            <li>Midas sez it will need new front brakes soon</li>                                              
                            <li>The seats are worn - not terrible, but they sure don't look showroom new. All the cheap seat covers in the stores just don't fit well and look worse.  There are some well made covers out there, though - <a href="http://www.wetokole.com/MIAT.html">Wet Okole </a> covers <a href="http://www.miata.net/products/interior/wet_okole.html">apparently </a> fit nicely</li>
                            <li>Midas sez it will need new front brakes soon</li>                            
                        </ul>                                   
                    <h4>The Ugly</h4>                    
                        <ul>
                            <li>It is overdue for a timing belt change. I have seen recommendations online that they be changed every 60k.  I got the car at 85k and have not ever changed it, and it's at 138k.  Midas has suggested that I change it, of course.  It's a doozy of a repair, though.  Several hundred bucks.  Just so ya know.</li>
                            <li>Oxygen Sensor ( probably )  the check engine light comes on intermittently ... really intermittently.  No noticable change in performance, it goes off by itself after a while, or especially after stopping the engine.  Unfortunately, you can't really computer diagnose it unless you manage to get to a shop when it is on - which is rare.  I asked Midas about it a couple weeks ago, they think it's probably the oxygen sensor.  Found <a href="http://www.sunriders.com/articles/sensor.html">this</a> online which agrees with the Midas diagnosis.</li>
                            <li>Every once in a while, when shifting, 1st to 2nd, there is a metal ting sound. That's all. A single ting.  I have never had clutch trouble beyond having the master cylinder replaced.  The sound is intermittent - but troubling when you hear it.  It has been around for at least a year.  Last time I mentioned it to a repair shop, they shrugged it off - meaning that it could be the clutch giving up the ghost, but they couldn't be sure ... and there are no other negative symptoms - so they said let it go until it gets worse.  Again, it is very intermittent - but with my luck, you'll hear it on the test drive :)</li>
                        </ul>
                
                </div>                                  <%
   1: --END GoodBadContent--
%>
                <h3><a href="#">More Pics</a></h3>
                <div id="MorePicsContent">
                    <p> <a href="http://northwest.smugmug.com/photos/swfpopup.mg?AlbumID=7697077&AlbumKey=3oGcF">
                           More pictures in a fullscreen slideshow</a> 
                    </p>
 
                </div>
                <h3><a href="#">Contact Me!</a></h3>
                <div id="ContactMeContent">
                    
                    <div id="googleVoice">
                    
                    <object width="230" height="85"><param name="movie" value="https://clients4.google.com/voice/embed/webCallButton"></param><param name="wmode" value="transparent"></param><param name="FlashVars" value="id=a5a8905b5253eff3aedde8301a102b5589ae045f&style=0"></param><embed src="https://clients4.google.com/voice/embed/webCallButton" type="application/x-shockwave-flash"wmode="transparent" width="230" height="85" FlashVars="id=a5a8905b5253eff3aedde8301a102b5589ae045f&style=0"></embed></object>
 
 
 
                    
                    </div>
                    
                    <div id="telephone">
                    
                    <p>
                    or at: 206 569 4418
                    </p>
                    
                    </div>
                                        
                    <div id="email">
                        <p>
                        or email me using this form:
                        </p>
                        <p>
                            <a href="http://kontactr.com/user/wildanimus"><img src="http://kontactr.com/pics/small.gif" border="0" width="90px" height="16px" /></a>
                        </p>
                    </div>
                    <div id="thanks">
                        <p>
                            I am located in Lake Forest Park, WA.  You are welcome to take a look and give it a test drive.  Thanks for checking it out!
                        </p>    
                    </div>                                    
                </div>
            </div>  <%
   1: --accordion--
%>
 
                </div>
                
                <div id="mid-col-3">
                    <object align="middle" height="400" width="400">
                        <param name="movie" value="http://www.smugmug.com/ria/ShizamSlides-2007090601.swf?AlbumID=7755431&AlbumKey=5e42p&transparent=true&crossFadeSpeed=500&clickUrl=http://www#46;smugmug#46;com">
                        <param name="wmode" value="transparent">
                        <param name="bgcolor" value="000000">
                        <param name="allowNetworking" value="all">
                        <param name="allowScriptAccess" value="always">
                        <embed src="http://www.smugmug.com/ria/ShizamSlides-2007090601.swf?AlbumID=7755431&AlbumKey=5e42p&transparent=true&showThumbs=false&showLogo=false&crossFadeSpeed=500"
                        wmode="transparent" type="application/x-shockwave-flash" allowScriptAccess="always" allowNetworking="all" height="400" width="400">
                    </object>
 
                </div>
                
                <div id="mid-col-4">
 
                    midcol4
                    
                </div>
             
            </div>
 
            <div id="bottom-section">
 
                <div id="bottom-col-1">
 
                    footer
                
                </div>
 
            </div>
    </form>
</body>
</html>
 
 
#top-section 
{
 border: thin dotted #000000;
 position:relative;
 left:0;
 top:0;
 padding: 5px;
 }
 
mid-section {
  border: thin dotted #000000;
 position:relative;
 left:0;
 top:0;
 }
 
bottom-section
 
   border: thin dotted #000000;
   position: absolute;
   left: 0;
   bottom: 0;
   width:99%;
   padding: 5px;
   height:60px;
   
 
 
 
top-col-1 {
 border: thin dotted #FF00FF;
 position:relative;
 padding-left:20%;
 padding-right:10px;
 }
 
mid-col-1
 
   border: thin dotted #FF00FF;
   position: absolute;
   top: 0;
   left: 0;
   width: 10%;
 
 
mid-col-2 {
 border: thin dotted #FF00FF;
 position:relative;
 top:0;
 left:10%;
 width:50%;
 }
 
mid-col-3
 
   border: thin dotted #FF00FF;
   position: absolute;
   top: 0;
   left: 60%;
   width: 30%;
   text-align: center;
 
 
mid-col-4 {
 border: thin dotted #FF00FF;
 position:absolute;
 top:0;
 left:90%;
 width:10%;
 }
 
bottom-col-1 
 {
  border: thin dotted #FF00FF;
  position:absolute;
  bottom:0;
  width: 98%;
  height:55px;   /* Height of the footer */
  background:#6cf;
 
 }

 

near final version:  working slideshow, contained accordion, sunken footer. needs some more style, though. just like me.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="buythismiata_Default4" %>
 
<!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 runat="server">
    <title></title>
    <link href="css/BuyThisMiata_v4.css" rel="stylesheet" type="text/css" />
    
    <link href="css/cupertino/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />
    
    
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
   1:  
   2:     <script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js">
   1: </script>
   2:        
   3:  
   4:     <script src="js/buythismiata.js" type="text/javascript">
   1: </script>      
   2:  
   3:     <script type="text/javascript">
   4:         $(function() {
   5:             $("#accordion").accordion({ fillSpace: true });
   6:         });        
   7:     
</script>
    
</head>
<body>
    <form id="form1" runat="server">
    
           <%
   1: --------------------------------------------------------------------------------------------------
%>
            <div id="top-section">
                <div id="top-col-1">
                    <b class="spiffy">
                      <b class="spiffy1"><b></b></b>
                      <b class="spiffy2"><b></b></b>
                      <b class="spiffy3"></b>
                      <b class="spiffy4"></b>
                      <b class="spiffy5"></b></b>
 
                          <div class="spiffyfg">
                            Buy This Miata! 
                          </div>
 
                      <b class="spiffy">
                      <b class="spiffy5"></b>
                      <b class="spiffy4"></b>
                      <b class="spiffy3"></b>
                      <b class="spiffy2"><b></b></b>
                      <b class="spiffy1"><b></b></b></b>             
                </div>
            </div>
           <%
   1: --------------------------------------------------------------------------------------------------
%>
            
            <div id="mid-section">
 
                <div id="mid-col-1">
 
    
 
                </div>
                
                <div id="mid-col-2">
 
                    <div id="accordion">
                            <h3><a href="#">Overview</a></h3>
                            <div id="OverviewContent">
                                <p>
                                    Spring is here & summer is coming!
                                </p>
                                
                                <p> OK ok ok ... spring should be here soon & summer will, hopefully, follow</p>
                                
                                <p>
                                    I'm selling my 1995 Miata - black with black cloth interior
                                </p>
                                
                                <p>
                                    134,772 miles
                                </p>
                                <p>
                                    manual transmission, softtop, AC, alloy wheels
                                </p>
                                <p>
                                    runs well,  good gas mileage, looks sharp
                                </p>
                                
                                <p>
                                    selling because I had to buy an Element - Miatas and babies do not go together
                                </p>
                                
                                <p> asking price: $3500.  Or Best Offer, of course - but I am showing this car through every possible channel - so if you're bid is well under the asking price, I can take your contact info & bid amount & see how things go.</p>                   
                                
                            </div>
                           
                           
                            <h3><a href="#">Details</a></h3>
                            <div id="DetailsContent">
                            
                                    <ul>
                                        <li>
                                            1995 Mazda MX5 1.8l 4cyl - <a href="http://www.edmunds.com/mazda/mx5miata/1995/consumerreview.html">reviews</a>.         Purchased 6/02 from a Seattle dealer
                                        </li>                    
                             
                                                                                                    
                             
                                        <li>
                                            VIN: <a href="http://www.carfax.com/cfm/check_order.cfm?VIN=JM1NA3535S0618571&PopUpStatus=0">JM1NA3535S0618571</a>  I've got a hardcopy of the carfax report through 2002 & most repair/maintenance docs since.  No serious accidents in car during my time - someone backed into it once had to have minor body work done.                                
                                        </li>                    
                             
                            
 
                                    
                                
                                        <li>
                                            5 Speed Manual Transmission
                                        </li>                    
                             
                                  
                             
                                        <li>
                                            Air Conditioner
                                        </li>                    
                             
                                    
                             
                                        <li>
                                            Wheels: Konig Alloy .... not factory.  They were on the car when I bought it, so I don't know model num.
                                        </li>                    
                             
                                    
                             
                                        <li>
                                            Tires: <a href="http://www.toyotires.com/tire/pattern/proxes-tpt">Toyo Proxes TPT </a> P195/60R-14 85H  All Season, Blackwall. Purchased 10/05 from Les Schwab @ 117,228 miles ... less than 15k on them.  
                                        </li>                    
                             
                                    
                             
                                        <li>
                                            New black softtop, purchased 7/08.  and the car has been garaged pretty much 24x7 since April so the top looks ( is ) brand new. It has a plastic rear window.
                                        </li>                    
                                    </ul>
                            </div>                    <%
   1: --END DetailsContent--
%>
                            
                            
                            
                            <h3><a href="#">The Good, The Bad, The Ugly</a></h3>
                             <div id="GoodBadContent">
                                <h4>The Good</h4>
                                    <ul>
                                        <li>Still looks great</li>
                                        <li>Fast enough to be fun, but not stupid fast</li>
                                        <li>New Top</li>
                                        <li>New Battery 3/09</li>
                                        <li>New Serpentine Belts (2) 3/09</li>
                                        <li>New catalytic converter 7/07 because it had failed emissions. Passed after that</li>
                                        <li>New Master & Slave Clutch cylinders 5/07</li>
                                        <li>Radiator was replaced 10/02</li>
                                    </ul>
                                <h4>The Bad</h4>                    
                                    <ul>
                                        <li>This car has needed new shocks ( i think? ) since I bought it.  It is noisy over bumps. & am sure it would handle even better with new suspension. However, it is not critical ... which is why I never got it done. </li>
                                        <li>Midas sez it will need new front brakes soon</li>                                              
                                        <li>The seats are worn - not terrible, but they sure don't look showroom new. All the cheap seat covers in the stores just don't fit well and look worse.  There are some well made covers out there, though - <a href="http://www.wetokole.com/MIAT.html">Wet Okole </a> covers <a href="http://www.miata.net/products/interior/wet_okole.html">apparently </a> fit nicely</li>
                                        <li>Midas sez it will need new front brakes soon</li>                            
                                    </ul>                                   
                                <h4>The Ugly</h4>                    
                                    <ul>
                                        <li>It is overdue for a timing belt change. I have seen recommendations online that they be changed every 60k.  I got the car at 85k and have not ever changed it, and it's at 138k.  Midas has suggested that I change it, of course.  It's a doozy of a repair, though.  Several hundred bucks.  Just so ya know.</li>
                                        <li>Oxygen Sensor ( probably )  the check engine light comes on intermittently ... really intermittently.  No noticable change in performance, it goes off by itself after a while, or especially after stopping the engine.  Unfortunately, you can't really computer diagnose it unless you manage to get to a shop when it is on - which is rare.  I asked Midas about it a couple weeks ago, they think it's probably the oxygen sensor.  Found <a href="http://www.sunriders.com/articles/sensor.html">this</a> online which agrees with the Midas diagnosis.</li>
                                        <li>Every once in a while, when shifting, 1st to 2nd, there is a metal ting sound. That's all. A single ting.  I have never had clutch trouble beyond having the master cylinder replaced.  The sound is intermittent - but troubling when you hear it.  It has been around for at least a year.  Last time I mentioned it to a repair shop, they shrugged it off - meaning that it could be the clutch giving up the ghost, but they couldn't be sure ... and there are no other negative symptoms - so they said let it go until it gets worse.  Again, it is very intermittent - but with my luck, you'll hear it on the test drive :)</li>
                                    </ul>
                            
                            </div>                                  <%
   1: --END GoodBadContent--
%>
                            <h3><a href="#">More Pics</a></h3>
                            <div id="MorePicsContent">
                                <p> <a href="http://northwest.smugmug.com/photos/swfpopup.mg?AlbumID=7697077&AlbumKey=3oGcF">
                                       More pictures in a fullscreen slideshow</a> 
                                </p>
 
                            </div>
                            <h3><a href="#">Contact Me!</a></h3>
                            <div id="ContactMeContent">
                                
                                <div id="googleVoice">
                                
                                <object width="230" height="85"><param name="movie" value="https://clients4.google.com/voice/embed/webCallButton"></param><param name="wmode" value="transparent"></param><param name="FlashVars" value="id=a5a8905b5253eff3aedde8301a102b5589ae045f&style=0"></param><embed src="https://clients4.google.com/voice/embed/webCallButton" type="application/x-shockwave-flash"wmode="transparent" width="230" height="85" FlashVars="id=a5a8905b5253eff3aedde8301a102b5589ae045f&style=0"></embed></object>
 
 
 
                                
                                </div>
                                
                                <div id="telephone">
                                
                                <p>
                                or at: 206 569 4418
                                </p>
                                
                                </div>
                                                    
                                <div id="email">
                                    <p>
                                    or email me using this form:
                                    </p>
                                    <p>
                                        <a href="http://kontactr.com/user/wildanimus"><img src="http://kontactr.com/pics/small.gif" border="0" width="90px" height="16px" /></a>
                                    </p>
                                </div>
                                <div id="thanks">
                                    <p>
                                        I am located in Lake Forest Park, WA.  You are welcome to take a look and give it a test drive.  Thanks for checking it out!
                                    </p>    
                                </div>                                    
                            </div>
                        </div>  <%
   1: --accordion--
%>
 
                </div>   <%
   1: --mid-col-2--
%>
                
                <div id="mid-col-3">
                    <object align="middle" height="400" width="400">
                        <param name="movie" value="http://www.smugmug.com/ria/ShizamSlides-2007090601.swf?AlbumID=7755431&AlbumKey=5e42p&transparent=true&crossFadeSpeed=500&clickUrl=http://www#46;smugmug#46;com">
                        <param name="wmode" value="transparent">
                        <param name="bgcolor" value="000000">
                        <param name="allowNetworking" value="all">
                        <param name="allowScriptAccess" value="always">
                        <embed src="http://www.smugmug.com/ria/ShizamSlides-2007090601.swf?AlbumID=7755431&AlbumKey=5e42p&transparent=true&showThumbs=false&showLogo=false&crossFadeSpeed=500"
                        wmode="transparent" type="application/x-shockwave-flash" allowScriptAccess="always" allowNetworking="all" height="400" width="400">
                    </object>
 
                </div>
                
                <div id="mid-col-4">
 
               
                    
                </div>
             
            </div>
 
            <div id="bottom-section">
 
                <div id="bottom-col-1">                
                        <div id="blackfooter">
                            <a href="About.aspx">About This Site</a>
                        </div>
                </div>
 
            </div>
    </form>
</body>
</html>
 
 
#top-section
 
   /* border: thin dashed #33CC33; */
   position: relative;
   left: 0;
   top: 0;
   height: 50px;
 
 
mid-section
 
   margin-top: 10px;
   padding: 1px;
 /*  border: thin solid #000099; */
   position: relative;
   left: 0;
   top: 0;
   height: 100%;
 
 
bottom-section
 
   margin-top: 5px;
   /* border: thin dotted #FF0066; */
   position: absolute;
   left: 0;
   bottom: 0;
   padding-left:10px;
   width: 99%;
   height: 60px;
   vertical-align: middle;
 
 
accordion
 
   /* border: thin double #FF0000; */
   font-family: 'Trebuchet MS';
   font-size: small;
 
 
 
top-col-1
 
   /* border: thin dotted #FF00FF; */
   position: relative;
   text-align: center;
 
 
mid-col-1
 
  
   position: absolute;
   top: 0;
   left: 0;
   width: 10%;
 
 
mid-col-2 
 
*  border: thin dotted #FF00FF; */
 position:relative;
 top:0;
 left:10%;
 width:50%;
 
 
mid-col-3
 
   /* border: thin dotted #FF00FF; */
   position: absolute;
   top: 0;
   left: 60%;
   width: 30%;
   text-align: center;
 
 
mid-col-4 {
 
 position:absolute;
 top:0;
 left:90%;
 width:10%;
 }
 
bottom-col-1
 
   /* border: thin dotted #FF00FF; */
   position: absolute;
   width: 98%;
   height: 35px; /* Height of the footer */
 
 
blackfooter
 
   width: 100%;
   text-align: center;
   background-color: #000000;
 
 
blackfooter a
 
   font-size: medium;
   color: #FFFFFF;
   text-decoration: none;
   font-family: 'Arial Black';
 
 
 
*----------------------------------------------------------------------------------------------*/
 
spiffy{display:block}
 
spiffy *
 
   display: block;
   height: 1px;
   overflow: hidden;
   font-size: .01em;
   background: #000000;
 
spiffy1
 
   background-position: #000000;
   margin-left: 3px;
   margin-right: 3px;
   padding-left: 1px;
   padding-right: 1px;
   border-left: 1px solid #000000;
   border-right: 1px solid #000000;
   background: #000000;
 
spiffy2
 
   background-position: #000000;
   margin-left: 1px;
   margin-right: 1px;
   padding-right: 1px;
   padding-left: 1px;
   border-left: 1px solid #000000;
   border-right: 1px solid #000000;
   background: #000000;
 
spiffy3
 
 margin-left:1px;
 margin-right:1px;
 border-left:1px solid #000000;
 border-right:1px solid #000000;
 
spiffy4
 
   border-left: 1px solid  #000000;
   border-right: 1px solid  #000000;
 
spiffy5
 
   border-left: 1px solid  #000000;
   border-right: 1px solid  #000000;
 
 
spiffyfg
 
   text-align: center;
   font-family: 'Arial Black';
   font-size: xx-large;
   background-color: #000000;
   color: #FFFFFF;
   padding-left: 20px;
 
 
bottom-col-1 .spiffyfg a
 
   color: #C0C0C0;
   font-size: medium;
 

Add comment


 

biuquote
Loading