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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Table won't stay where I put it

    Just want to start out saying that I haven't had any formal training in web site design. My problem is a table that doesn't stay where I put it when viewing the web site with different screen resolutions. Here is the web site http://thundervalleyranch.net and here is my code. Thank you for any help that you can provide.


    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>Bulls for Breeding</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="styles.css" rel="stylesheet" type="text/css" />
    	<!-- Begin JavaScript -->
    
    		<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
    		<script type="text/javascript" src="lib/jquery.easing.1.3.js"></script>
    		<script type="text/javascript" src="lib/jquery.coda-slider-2.0.js"></script>
    <!-- Initialize each slider on the page. Each slider must have a unique id -->
    	<script type="text/javascript">
    	$().ready(function() {
           $('#coda-slider-2').codaSlider({
               autoSlide: true,
               autoSlideInterval: 6000,
               autoSlideStopWhenClicked: true	
    			   
           });
       });
    </script>
      <style type="text/css">
    
            </style>
    	<!-- End JavaScript -->
    </head>
    <body>
    
        <div id="main">
        	<!-- header begins -->
        <div id="header">
         
          <div id="logo"> <a href="index.html"><img src="images/TVR logo.jpg" alt="" width="154" height="106" align="texttop" title="" /></a></div>   
    	<div id="buttons"><a href="" class="but" title=""></a><a href="" class="but" title=""></a><a href="index.html" class="but" title="">Breed to succeed </a> </div>
    	<div id="logo2">
    	   <img src="images/BBUlogo black.gif" alt="" width="132" height="109" align="texttop" title="" /></div>  
     </div>      
    	  
    
    	 <!-- header ends -->
    <div class="line"></div>
    <p align="center" class="style1 style3">&nbsp;</p>
      <p align="center" class="style6">Click on picture to make larger </p>
    <div style="height:25px"></div>
    
    <div id="contents">
    		<div id="page">
    			<ul class="images">
    			
    			
    			
    
    
    				<li><a href="images/Equity 2.jpg" target="_blank"><img src="images/Equity small.jpg" alt="" width="214" height="126" /></a></li>
    					<li><a href="images/black synergy.JPG" target="_blank"><img src="images/black synergy small.jpg" alt="" width="215" height="126" /></a></li>
    				<li><a href="images/Expresso.JPG" target="_blank"><img src="images/Expresso small.jpg" alt="" width="214" height="126" /></a></li>
    				<li><a href="images/Panama Jack.JPG" target="_blank"><img src="images/Panama Jack small.jpg" alt="" width="214" height="126" /></a></li>
    			</ul>
    	</div> 
    </div>    <!-- content begins -->
        <div id="content">
          <div class="line"></div>
            <div style="height:25px"></div>
            <div>
           	  <div style="float:left; width: 350px;">
                	<h2 align="center" class="style4">About Us </h2>
                	<div style="height:20px"></div>
                    
    				
    			<p><span class="span_cont"></span> We started in 1994 with our homstead of 57 acres with approximately 40 acres in pasture. With a background in Ag and a love for animals. Knowing we didn't have enough land to grow commercial cattle in enough numbers to keep up the land and pay the bills. So we knew we would need to run a purebred seed stock program but what breed? I've never wanted to do the same thing everybody else does & because I had small children, the breed would have to be good natured and easy to handle. We looked around at the different breeds and after meetin with an elderly gentleman named Carl Clifton, we decided Beefmaster was the breed for us.		    </p>
    				<p>&nbsp;</p>
    				<p> Now, years later, after buying what we believe is the very best stock from all over the country and breeding AI or through our embryo program, we believe that this breed is better than ever. Now, we have great cattle that can perform anywhere in the country. <a href="#" class="more2">more</a>
    		                  </p>
           	  </div>
                <div style="float: left; width: 32px; height:10px;"></div>
                <div style="float: left; width: 250px;">
                	<h2 class="style4">Contact Us </h2>
               	  	<div style="height:20px"></div>
              	  
    	 <form name="htmlform" method="post" action="html_form_send.php">
    <table width="415" border="3" align="left" bordercolor="#666666" class="table4" id="top" name="top" > 
    
    <tr bgcolor="silver">
     <td width="119" valign="top">
      <label for="first_name">First Name *</label></td>
     <td width="187" valign="top"><input  type="text" name="first_name" maxlength="50" size="30" /></td>
    </tr>
    <tr bgcolor="silver">
     <td valign="top"">
      <label for="last_name">Last Name *</label> </td>
     <td valign="top">
      <input  type="text" name="last_name" maxlength="50" size="30"> </td>
    </tr>
    <tr bgcolor="silver">
     <td valign="top">
      <label for="email">Email Address *</label> </td>
     <td valign="top">
      <input  type="text" name="email" maxlength="80" size="30"> </td>
    </tr>
    <tr bgcolor="silver"> <td valign="top">
      <label for="telephone">Telephone Number</label> </td>
     <td valign="top">
      <input  type="text" name="telephone" maxlength="30" size="30"> </td>
    </tr>
    <tr bgcolor="silver">
     <td height="182" valign="top">
      <label for="comments">Comments *</label> </td>
     <td valign="top">
      <textarea  name="comments" maxlength="1000" cols="25" rows="9"></textarea> </td>
    </tr>
    <tr>
     <td height="29" colspan="2" style="text-align:center">
      <!-- We are grateful to you for keeping this link in place. thank you. -->
      <input type="submit" value="Submit">   ( <a href="http://www.freecontactform.com/html_form.php">HTML Form</a> ) </td>
    </tr>
    </table>
    </form>		    		
    </div>		
                <div style="float: left; width: 21px; height:10px;"></div>
                <div style="clear: both;"></div>
            </div>
            <div style="height:25px"></div>
            <div style="height:25px"></div>
           
    
           
       
        <!-- content ends --> 
    
    
    <!-- bottom begin -->
    
    <table width="700" align="center" bordercolor="#000000" bgcolor="#FFFFCC" class="table3">
          <tr>
            <td width="200" align="center"><p class="style5 style3 style7"><strong>Services</strong></p>        </td>
            <td width="200" align="center"><p class="style5 style3 style7"><strong>Contact Information </strong></p>        </td>
            <td width="200" align="center"><p class="style5 style3 style7"><strong>Quick Navigation </strong></p>        </td>
            <td width="200" align="center"><p class="style5 style3 style7"><strong>Links</strong></p>        </td>
          </tr>
          <tr>
            <td width="200" align="center"><span class="style1 style7"><a href="bullsforsale.html">Bulls for Sale </a></span></td>
            <td width="200" align="center"><span class="style1 style7">859 Ersastus Church Rd. </span></td>
            <td width="200" align="center"><span class="style1 style7"><a href="index.html">Home</a></span></td>
            <td width="200" align="center"><span class="style1 style7"><a href="http://beefmasters.org">Beefmaster Breeders United</a> </span></td>
          </tr>
          <tr>
            <td width="200" align="center"><span class="style1 style7"><a href="bullsforbreeding.html">Bulls for Breeding </a></span></td>
            <td width="200" align="center"><span class="style1 style7">Commerce, GA 30530 </span></td>
            <td width="200" align="center"><span class="style1 style7"><a href="aboutus.html"></a></span></td>
            <td width="200" align="center"><span class="style1 style7"><a href="http://sebba.com">SEBBA</a></span></td>
          </tr>
          <tr>
            <td width="200" align="center"><span class="style1 style7"><a href="cowsforsale.html">Cows for Sale</a> </span></td>
            <td width="200" align="center"><span class="style1 style7">Phone: 706-335-0022</span></td>
            <td width="200" align="center"><span class="style1 style7"><a href="gallery.html"></a></span></td>
            <td width="200" align="center"><span class="style7"></span></td>
          </tr>
          <tr>
            <td width="200" align="center"><span class="style1 style7"><a href="heifersforsale.html">Heifers for Sale</a> </span></td>
            <td width="200" align="center"><span class="style1 style7">Cell: 706-296-3979 </span></td>
            <td width="200" align="center"><span class="style1 style7"><a href="contactus.html"></a></span></td>
            <td width="200" align="center"><span class="style7"></span></td>
          </tr>
          <tr>
            <td width="200" align="center"><span class="style1 style7"><a href="semenforsale.html">Semen for Sale </a></span></td>
            <td width="200" align="center"><span class="style1 style7">thundervalleyran@windstream.net</span></td>
            <td width="200" align="center"><span class="style7"></span></td>
            <td width="200" align="center"><span class="style7"></span></td>
          </tr>
      </table>
        <!-- bottom end -->
    <p align="center" class="style1 style3">&nbsp;</p>	
     <div class="line"></div>   <!-- footer begins -->
    	
    <div id="footer">
              		<p>Copyright 2012.  Thunder Valley Ranch.  All rights reserved. </p>
      </div>
            <!-- footer ends --> </div>
    
    
    </body>
    </html>
    Last edited by mdhensley5; 06-18-2012 at 03:18 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Remove the highlighted sections of the following:

    Code:
    #top {
        background-color: #FFFFFF;
        height: 25px;
        left: 523px;
        position: absolute;
        top: 500px;
        width: 326px;
        z-index: 200;
    }
    
    .table4 {
        background-color: #FFFFFF;
        float: right;
        height: 50px;
        width: 140px;
    }
    and that should fix the problem. (The height properties are also unnecessary here.)

    As you had it, the table was absolutely positioned, but no containing element had a position property, so the table was absolutely positioned with respect to the body element - and didn't move when the window was resized. You could have applied position:relative to the immediate parent div, but there's no real need for absolute positioning here, so better to take it out entirely.

  • Users who have thanked SB65 for this post:

    mdhensley5 (06-18-2012)

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    That fixed it. Thank you so much!


  •  

    Posting Permissions

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