I am working on a website: ( www.kentuckymustangautosales.com ) and the website is going fine, until I figured out that it completely messes up when minimized in any browser. I'll post my html and css code. Any help would be very much appreciated. Thanks.
My HTML:
My HTML:
HTML:
<!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" xml:lang="EN" lang="EN" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<title>Kentucky Mustang Auto Sales</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<link rel="stylesheet" href="styles/coin-slider-styles.css" type="text/css" />
<link rel="stylesheet" href="styles/style.css" type="text/css" />
<style type="text/css">
div.topnav
{
margin-right:auto;
width:84%;
}
img.logo
{
display:
block;
margin-left:auto;
margin-right:auto;
margin-top:10px
}
div.phone
{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
div.cartitle
{
font:Georgia, "Times New Roman", Times, serif;
font-size: 28px;
}
a:link {
COLOR: #ffffff;
text-decoration: underline;
}
a:visited {
COLOR: #FFF;
text-decoration: underline;
}
a:hover {
COLOR: #ffffff;
text-decoration: none;
}
a:active {
COLOR: #ffffff;
text-decoration: none;
}
div.map
{
position:absolute;
right:300px;
}
</style>
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
</head>
<body id="top">
<div id="body">
<!-- SLIDE OUT NAVIGATION START -->
<ul id="navigation">
<li class="facebook"><a href="https://www.facebook.com/kentuckymustang"><span>Facebook</span></a></li>
<li class="youtube"><a href="http://www.youtube.com/user/KentuckyMustang"><span>Youtube</span></a></li>
</ul>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
<!-- SLIDE OUT NAVIGATION END -->
<div class="wrapper col2">
<div id="header">
<a href="index.php"><img class="logo" src="images/Sign.png" alt="Home Page" width="600" height="181" align="left" /></a>
<div id="phone">
<p>Phone: (859) 498-7570 | Email: <a href="mailto:[email protected]">[email protected]</a></p>
</div>
<div class="topnav">
<ul id="topnav">
<li class="last"><a href="#">KY Mustang Parts</a></li>
<li><a href="#">About Us</a>
</li>
<li><a href="full-width.html">Contact Us/Directions</a></li>
<li><a href="car.php">Cars For Sale</a></li>
<li style="border-left: 2px solid #272727;" class="active"><a href="index.php">Home</a></li>
</ul>
<br class="clear" />
</div>
</div>
</div>
<div class="wrapper col3">
<!-- coin slider begin -->
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({
width: 900, // width of slider panel
height: 370, // height of slider panel
spw: 7, // squares per width
sph: 5, // squares per height
delay: 3000, // delay between images in ms
sDelay: 30, // delay beetwen squares in ms
opacity: .7, // opacity of title and navigation
titleSpeed: 0, // speed of title appereance in ms
effect: 'straight', // random, swirl, rain, straight
navigation: true, // prev next and buttons
links : true, // show images as links
hoverPause: true // pause on hover
});
});
</script>
<br/>
<!-- Insert images and captions here -->
<center>
<div id='coin-slider'>
<a href="http://stores.kentuckymustang.com/-strse-template/Cars%20for%20sale/Page.bok" target="_blank">
<img src='images/car1.jpg' alt="" />
<span>
2004 Mustang G.T. Convertible
</span>
</a>
<a href="http://stores.kentuckymustang.com/-strse-template/Cars%20for%20sale/Page.bok">
<img src='images/car2.jpg' alt="" />
<span>
1987 Mustang Convertible
</span>
</a>
<a href="http://stores.kentuckymustang.com/-strse-template/Cars%20for%20sale/Page.bok" target="_blank">
<img src='images/car3.jpg' alt="" />
<span>
1990 Mazda Miata
</span>
</a>
<a href="http://stores.kentuckymustang.com/-strse-template/Cars%20for%20sale/Page.bok" target="_blank">
<img src='images/car4.jpg' alt="" />
<span>
2001 V6 Mustang Coupe
</span>
</a>
</div>
</center>
<!-- coin slider end -->
</div>
<div class="col3 cartitle">
<center>Cars For Sale</center>
</div>
<div class="wrapper col4">
<div id="cars">
<ul>
<li><a href="#"><strong>2004 Mustang G.T. Convertible</strong><img src="images/car1_thumb.jpg" alt="2004 Mustang G.T. Convertible" /></a></li>
<li><a href="#"><strong>1990 Mazda Miata</strong><img src="images/car2_thumb.jpg" alt="1990 Mazda Miata" /></a></li>
<li><a href="#"><strong>1987 Mustang Convertible</strong><img src="images/car3_thumb.jpg" alt="1987 Mustang Convertible" /></a></li>
<li class="last"><a href="#"><strong>2004 Mustang Coupe</strong><img src="images/car4_thumb.jpg" alt="2004 V6 Mustang Coupe" /></a></li>
</ul>
<br class="clear" />
</div>
</div>
<div class="wrapper col5">
<div id="container">
<div id="content">
<h2>About Kentucky Mustang Auto Sales</h2>
<p>This is a W3C standards compliant Open Source free CSS template from <a href="http://www.os-templates.com/">OS Templates</a>.</p>
<p>This template is distributed under a <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share Alike 3.0 Unported License</a>, which allows you to use and modify the template for both personal and commercial use when you keep the provided credit links in the footer.</p>
<p>For more free css templates visit <a href="http://www.os-templates.com/">Open Source Templates</a>.</p>
<p>Lacusenim inte trices lorem anterdum nam sente vivamus quis fauctor mauris. Wisinon vivamus wisis adipis laorem lobortis curabiturpiscingilla dui platea ipsum lacingilla.</p>
<p>Semalique tor sempus vestibulum libero nibh pretium eget eu elit montes. Sedsemporttis sit intesque felit quis elis et cursuspenatibulum tincidunt non curabitae.</p>
</div>
<br class="clear" />
</div>
</div>
<div class="wrapper col6">
<div id="footer">
<div id="contactform">
<h2> Contact Us</h2>
<form action="#" method="post">
<fieldset>
<legend>Contact Form</legend>
<label for="fullname">Name:
<input id="fullname" name="fullname" type="text" value="" />
</label>
<label for="emailaddress" class="margin">Email:
<input id="emailaddress" name="emailaddress" type="text" value="" />
</label>
<label for="message">Message:<br />
<textarea id="message" name="message" cols="40" rows="4"></textarea>
</label>
<p>
<input id="submitform" name="submitform" type="submit" value="Submit" />
<input id="resetform" name="resetform" type="reset" value="Reset" />
</p>
</fieldset>
</form>
</div>
<!-- End Contact Form -->
<div id="compdetails">
<div id="officialdetails">
<h2>Company Information</h2>
<ul>
<li>Copyright © 2012 - All Rights Reserved</li>
<li>Kentucky Mustang Auto Sales</li>
</ul>
</div>
<div id="contactdetails">
<h2>Our Contact Details</h2>
<ul>
<li>Kentucky Mustang Auto Sales</li>
<li></li>
<li>985 Double Gate Road</li>
<li>Jeffersonville, KY 40337</li>
<li>Phone: (859) 498-7570</li>
<li>Email: [email protected]</li>
<li> YouTube: <a href="http://www.youtube.com/user/KentuckyMustang">Kentucky Mustang</a></li>
<li class="last">Facebook: <a href="https://www.facebook.com/kentuckymustang">Kentucky Mustang</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="wrapper col7">
<div id="copyright">
<ul>
<li><a href="#">Online Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Permissions & Trademarks</a></li>
<li><a href="#">Product License Agreements</a></li>
<li class="last">Template by <a target="_blank" href="http://www.os-templates.com/" title="Open Source Templates">OS Templates</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>