...

View Full Version : Resolved Table won't stay where I put it



mdhensley5
06-18-2012, 02:58 PM
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 (http://thundervalleyranch.net/bullsforbreeding.html) and here is my code. Thank you for any help that you can provide.



<!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>

SB65
06-18-2012, 03:08 PM
Remove the highlighted sections of the following:


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

mdhensley5
06-18-2012, 03:17 PM
That fixed it. Thank you so much! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum