有响应式网页的问题

时间:2013-03-25 20:23:46

标签: html html5 css3

我的网页与侧边栏重叠有很多问题。进入较低屏幕时的菜单。它应该低于彼此。该网页是http://www.kolbree.com/rugged/有任何建议吗?

CSS:

/************************************************************************************
RESET
*************************************************************************************/
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
    margin: 0;
    padding: 0;
}

img, fieldset {
    border: 0;
    max-width: 90%;
    height: auto;
    width: auto\9; /* ie8 */
}

/* set image max width to 100% */
img {
    max-width: 90%;
    height: auto;
    width: auto\9; /* ie8 */
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

/************************************************************************************
GENERAL STYLING
*************************************************************************************/
body {
    background: #0b2d7e url() no-repeat center top;
    font: 1em/100% Times New Roman, Times, serif;
    color: #000000;

}
a {
    color: #026acb;
    text-decoration: none;
    outline: none;
}
a:hover {
    text-decoration: underline;
}
p {
    margin: 0 0 1.2em;
    padding: 0;
}

/* list */
ul, ol {
    margin: 1em 0 1.4em 24px;
    padding: 0;
    line-height: 140%;
}
li {
    margin: 0 0 .5em 0;
    padding: 0;
}

/* headings */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.4em;
    margin: 20px 0 .4em;
    color: #000;
}
h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.6em;
}
h3 {
    font-size: 1.4em;
}
h4 {
    font-size: 1.2em;
}
h5 {
    font-size: 1.1em;
}
h6 {
    font-size: 1em;
}

/* reset webkit search input styles */
input[type=search] {
    -webkit-appearance: none;
    outline: none;
}
input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button {
    display: none;
}
.page-splits    {
        font-size: 1px;
        line-height: 0px;
        height: 5px;
        width: 100%;
        color: #F0F0F6;
        background-color: #F0F0F6;
        border: #9698AB 1px solid;
        border-radius:10px;
        padding: 0px;
        margin: 12px 0px 12px 0px;
        }
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
    width: 100%;
    margin: 0 auto;
}

/************************************************************************************
HEADER
*************************************************************************************/
#header {
    position: relative;
    height: 210px;
}

/* site logo */
#site-logo {
    position: absolute;
    top: 0;
}
#site-logo a {
    font: bold 30px/100% Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
}

/* site description */
#site-description {
    font: italic 100%/130% "Times New Roman", Times, serif;
    color: #fff;
    position: absolute;
    top: 55px;
}

/* searchform */
#searchform {
    position: absolute;
    right: 10px;
    bottom: 6px;
    z-index: 100;
    width: 160px;
}
#searchform #s {
    width: 140px;
    float: right;
    background: #fff;
    border: none;
    padding: 6px 10px;
    /* border radius */
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    /* box shadow */
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    /* transition */
    -webkit-transition: width .7s;
    -moz-transition: width .7s;
    transition: width .7s;
}

/************************************************************************************
MAIN NAVIGATION (DO NOT USE)
*************************************************************************************/
#main-nav {
    width: 100%;
    background: #ccc;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    bottom: 0px;
    z-index: 100;
    /* gradient */
    background: #082872 url() repeat-x;
    background: -webkit-gradient(linear, left top, left bottom, from(#143d9d), to(#082872));
    background: -moz-linear-gradient(top,  #143d9d,  #082872);
    background: linear-gradient(-90deg, #143d9d, #082872);
    /* rounded corner */
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    /* box shadow */
    -webkit-box-shadow: inset 0 1px 0 #082872, 0 1px 1px #082872;
    -moz-box-shadow: inset 0 1px 0 #082872, 0 1px 1px #082872;
    box-shadow: inset 0 1px 0 #082872, 0 1px 1px #082872;
}
#main-nav li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: relative;
}
#main-nav li:first-child {
    margin-left: 10px;
}
#main-nav a {
    line-height: 100%;
    font-weight: bold;
    color: #fff;
    display: block;
    padding: 14px 15px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
#main-nav a:hover {
    color: #fff;
    background: #c8d7e1;
    /* gradient */
    background: -webkit-gradient(linear, left top, left bottom, from(#c8d7e1), to(#5a6b73));
    background: -moz-linear-gradient(top,  #c8d7e1,  #5a6b73);
    background: linear-gradient(-90deg, #c8d7e1, #5a6b73);
}

/************************************************************************************
CONTENT
*************************************************************************************/
#content {
    background: #fff;
    margin: 2px 0 2px;
    padding: 20px 65px;
    width: 71.5%;
    display: block; 
    position: absolute;
    margin-left: 20%;
    float: left;
    /* rounded corner */
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    /* box shadow */
    -moz-box-shadow: 0px 0px 0px 0px #000000;
    -webkit-box-shadow: 0px 0px 0px 0px #000000;
    box-shadow: 0px 0px 0px 0px #000000;
}

/* post */
.post {
    margin-bottom: 40px;
}
.post-title {
    margin: 0 0 5px;
    padding: 0;
    font: bold 26px/120% Arial, Helvetica, sans-serif;
}
.post-title a {
    text-decoration: none;
    color: #000;
}
.post-meta {
    margin: 0 0 10px;
    font-size: 90%;
}

/* post image */
.post-image {
    margin: 0 0 15px;
}

/************************************************************************************
SIDEBAR
*************************************************************************************/
#sidebar {
    width: 19%;
    float: left;
    margin: 2px 0 2px;
}
.widget {
    background: #0b2d7e;
    margin: 0 0 0px;
    padding: 0px 20px;
    /* rounded corner */
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    /* box shadow */
    -moz-box-shadow: 0px 0px 0px 0px #000000;
    -webkit-box-shadow: 0px 0px 0px 0px #000000;
    box-shadow: 0px 0px 0px 0px #000000;
}
.widgettitle {
    margin: 0 0 5px;
    padding: 0; 
}
.widget ul {
    margin: 0;
    padding: 0;
}
.widget li {
    margin: 0;
    padding: 6px 0;
    list-style: none;
    clear: both;
    border-top: solid 1px #eee;
}

/* flickr widget */
.widget .flickr_badge_image {
    margin-top: 10px;
}
.widget .flickr_badge_image img {
    width: 48px;
    height: 48px;
    margin-right: 12px;
    margin-bottom: 12px;
    float: left;
}


/************************************************************************************
FOOTER
*************************************************************************************/
#footer {
    clear: both;
    color: #ccc;
    font-size: 85%;
    position: absolute;
    bottom:0;
    width:100%;
    height:20px;    
}
#footer a {
    color: #fff;
}

/************************************************************************************
CLEARFIX
*************************************************************************************/
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
.clearfix { display: block; zoom: 1; }

继承我的HTML:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<!-- disable iPhone inital scale -->
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<meta name="Description" content="The Vanguard-700 is an Infrared Outdoor Security Camera from Rugged Cams that is weatherproof, waterproof and dust proof with an IP67 sealed camera rating. The Vanguard-700 features SONY's new 960h Technology for near Megapixel performance.">
<meta name="KeyWords" content="outdoor security camera, outdoor camera security, security camera outdoors, infrared outdoor camera, ir outdoor camera, ir camera for outdoor, ">
<meta name="robots" content="NOODP">

<title>Rugged CCTV |Security Cameras for a Business | Business Security Camera System</title>

<!-- main css -->
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/master-site.css" rel="stylesheet"  type="text/css">
<link href="css/font-awesome.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" media="screen and (min-width: 650px)" href="css/right-tabs-style.css" type="text/css">
<link href="css/menu.css" rel="stylesheet" type="text/css">
<!-- media queries css -->
<link href="css/media-queries.css" rel="stylesheet" type="text/css">



<!-- html5.js for IE less than 9 -->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

<!-- START google crap -->
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24911377-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<!-- End google crap -->
</head>

<body>

<div id="pagewrap">

    <header id="header">
 <script src="js/bsa.js"></script>
<hgroup>

        </hgroup>
<h1 id="site-logo"><img src="images/logo.png" width="350px" height="175px" alt="Rugged Cams Graphic Logo"><a href="#"></a></h1>
<BR><BR><BR><BR><BR>
<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/tagline.png" width="" height="" alt="LOGOOOO">
<img src="images/blue.png" width="" height="" align="right" alt="Rugged Cams Contact Number">
<ul class="menu full-width dark-blue">
                <li class="active"><a href="#"><i class="icon-home"></i>Home</a></li>
                <li><a href="#">Products <span class="arrow"></span></a>
                    <ul>
                        <li><a href="#">All Products</a></li>
                        <li><a href="#">DVR's</a></li>
                        <li><a href="#">Infrared Cameras</a></li>
                        <li><A hre="#">Dome Cameras</A></li>
                        <li><a href="#">HD Megapixel Cameras</a></li>
                        <li><a href="#">PTZ Cameras</a></li>
                        <li><a href="#">PTZ Controllers</a></li>
                        <li><A hre="#">Speciality Cameras</A></li>
                        <li><a href="#">Harsh Environment Cameras</a></li>
                        <li><a href="#">More... <span class="arrow"></span></a>
                            <ul>
                                <li><a href="#">Audio Kits</a></li>
                                <li><a href="#">Monitors</a></li>
                                <li><A hre="#">Monitoring Systems</a></li>
                                <li><a href="#">Long Distance Video</a></li>
                                <li><a href="#">Power Supplies</a></li>
                                 <li><a href="#">Pre-Made Cable</a></li>
                                 <li><A hre="#">Bulk Cable</A></li>
                                 <li><a href="#">Tools & Connectors</a></li>
                                 <li><a href="#">Vehicle Inspection Systems</a></li>
                                 <li><a href="#">Long Range Wireless</a></li>
                              </ul>
                    </ul>
                </li>
                <li><a href="#">Packaged Systems <span class="arrow"></span></a>
                    <ul>
                        <li><a href="#">Standard Packaged Systems</a></li>
                        <li><a href="#">Platnimum Packages</a></li>

                       </ul>        
                </li>
                <li><a href="#">Live Demo</a></li>
                <li><a href="#">Resources <span class="arrow"></span></a>
                <ul>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Rugged F.A.Q.</a></li>
                <li><a href="#">Tech Support</a></li>
                <li><a href="#">About US</a></li>
                <li><a href="#">Company News</a></li>
                <li><a href="#">Website Links</a></li>
                <li><a href="#">Learning Center</a></li>
                <li><a hre="#">Videos</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Whos Using Rugged Cams</a></li>
                </ul> 
                </li>
                <li><a href="#">Dealer Login</a></li>

                                <li class="right">

</li>
            </ul>

        </div>


    </header>
    <!-- /#header -->

   <!-- Repeating Background -->
<div style="background-image:url(images/contact-us.png);background-repeat:repeat;width:100%;height:80px;"></div>
</div> 
    <!-- End Repeating Background -->

    <aside id="sidebar">
        <section class="widget">

            <h4 class="widgettitle"></h4>
            <div align="Center">
            <img src="images/sidebar.png" alt="Rugged Cams 20th Anniversary">
            </br>
            <img alt="GSA Contract Holder Image" src="images/gsa-top-image.jpg" width="150" height="40" style="margin-top:25px;"><br><br>
            <div id="cart-update" >
          <a href="http://www.romancart.com/cart.asp?storeid=35372" target="_blank">
          <span class="cart-image">CART UPDATE</span></a><br><br>
        Quantity:
      <script  src="http://www.romancart.com/cartinfo.asp?storeid=35372&amp;type=1" type="text/javascript"></script><br><br>
      Total:
  <script src="http://www.romancart.com/cartinfo.asp?storeid=35372&amp;type=2" type="text/javascript"></script>  
      </div>
      <!-- SEARCH -->
   <table cellpadding="10" cellspacing="0" border="0" width="100%" class="sidebartext"><tr><td align="center">
Search Our Site<br>
<script language="JavaScript" type="text/javascript" src="script/simple-search.js"></script>
</td></tr></table>




<!--<div >
 (c) 2005, 2012. Authorize.Net is a registered trademark of CyberSource Corporation 
<div class="AuthorizeNetSeal"><script type="text/javascript" >var ANS_customer_id="fd49e830-8c70-46b5-88d1-5eda463b1ae7";</script>
<script type="text/javascript" src="https://verify.authorize.net/anetseal/seal.js" ></script> <a href="http://www.authorize.net" id="AuthorizeNetText" 
target="_blank">Payment Processing</a> </div></div>
        </div>

        -->
       </aside>
        </section>

        <!-- /.widget -->

        <!-- Begin Widget -->
        <!-- /.widget -->

    </aside>
    <div id="content">
        <article class="post clearfix">
        <!-- CONTENT AREA -->
            <header>
                           <div id="product-cart" align="right">
                    <form action="http://www.romancart.com/cart.asp" method="post" style="text-align: center">
                        <input name="storeid" type="hidden" value="35372">
                        <input name="itemcode" type="hidden" value="Vanguard 700">
                        <strong><span class="cart-style2">Vanguard 700</span></strong><br>
                        <strong><span class="cart-style3">$289</span></strong><br>
                        Quantity : <input name="quantity" size="3" type="text"><br>
                        <input alt="add to cart button to add the current page product to the cart" class="input" name="submit" onMouseDown="this.src='images/add-to-cart-3.png'" onMouseOut="this.src='images/add-to-cart.png'" onMouseOver="this.src='images/add-to-cart-1.png'" src="images/add-to-cart.png" title="Click Here to add this product to the cart" type="image">
                    </form>
                </div>
            </header>
            <img src="images/outdoorsecuritycamera.png" alt="Outdoor Camera" align="left"><img src="images/Vanguard-700web-page-logo.png" alt="Vanguard 700">
            <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
            <div align="center"><h3><Strong>New Infrared Outdoor Camera with Built-in, Swing-out Junction Box</Strong></h3></div>
            <BR><BR>
            <p>The Vanguard-700 <strong>Infrared Outdoor Camera</strong> is another new tough security camera from Rugged Cams. The Vanguard-700 is not only weatherproof, but waterproof and dust proof as well, and carries a sealed rating of IP67.</p>

     <p>The Vanguard-700 has a built-in Fan & Heater that allows it to operate at incredibly low temperatures. In fact, it is rated for -40ºF below zero and the fan cools the camera to at least +158ºF above. Not many cameras can match this incredible temperature range.</p><br>

 <p>The Vanguard-700 Infrared Outdoor Camera uses the latest <strong>SONY 960H</strong> Technology, which uses a 700 TV lines camera chipset to output an incredible <strong>960 Horizontal lines</strong> wide picture. This is very near <strong>Megapixel resolution</strong>, which starts at 1000 lines wide. It is a big leap for analog cameras, because you now have the ability to record at “<strong>Near HD</strong>” with a 700 line camera, using our new <strong>960HD DVR</strong>. This camera can be recorded at D1 (740x480) with any regular DVR, but you actually get <strong>30% more resolution</strong> when you use our 960HD DVR.</p>

<p>The Vanguard-700 is also using Rugged Cams' new “<strong>Easy Pro Install System</strong>”, which attaches a swing-out Junction Box to the base of the mount. Now anyone can get professional results and really quick installations using this system. You can mount on any surface, in any direction or orientation, from the ceiling, wall or table type mount, and even directly to any indoor or outdoor double gang switch box. The swing-out feature makes working on and fine tuning the camera super easy since you don't have to hold onto the camera at the same time. Truly revolutionary.</p>

<p><strong>Top Ten Features of the Vanguard-700 Infrared Outdoor Camera:</strong></p>
<ul style="list-style: circle"><li>Uses SONY's new 960H Effio ExView HAD II Technology that delivers <b>near Megapixel</b> picture 
    <b>(960 Horizontal Lines of Resolution)</b> &#8211; <i>30% more resolution than any other analog camera!</i></li>
<li><b>700 TV Lines</b> of Resolution</li>
<li><b>Completely Weatherproof &amp; Waterproof </b>and is rated to IP67 standards</li>
<li>Built-in <b>Swing-out Junction Box with American 3/4&#8221; Conduit</b> fittings</li>
<li>Mounts on the <b>Wall, Ceiling, Pole or any flat surface </b>such as parapet walls or atop fences, etc.</li>
<li>Rated to <b>-40º below zero and +158º above </b>(-40º F to +158º F)</li>
<li><b>Heater and Fan</b> built-in</li>
<li><b>30 Wide angle (30º spread) Variable Power Infrared Lamps</b> with <b>Smart IR
</b>Technology  &#8211; 100' Outdoor &amp; 165' Indoor Range</li>
<li><b>3.5mm-16mm Auto-Iris Varifocal Lens </b>&#8211; with Infrared Cut Filter for True Day/Night Operation</li>
<li><b>Smart 3D-DNR, WDR</b>, plus, the all-new <b>F-DNR </b>which is <b>Enhanced Digital Noise Reduction
</b>with the ability to help <b>cut through Fog, Dust, etc</b></li></ul>
<div class="page-splits"></div>
<p>In our quest to design the best Infrared Outdoor Cameras with the latest technology, Rugged Cams also makes them the toughest in the industry.  The <strong><u>Vanguard-700 Infrared Outdoor Camera</u></strong> is no exception.</p>

<p>Harsh environments, ice & snow, heat & sun pose no problems for The <strong>Vanguard-700</strong>.  The waterproof aluminum case is sealed to IP67 standards with a built-in Anti-Fog fan and a robust Heater with an automatic thermostat.  That's why The <strong>Vanguard-700</strong> is rated -40° below zero and +158° above.  <strong><i>Trugly Rugged</i></strong>.</p>

<p>The <strong>Vanguard-700</strong> Infrared Outdoor Camera is not only dual voltage (12V DC and 24V AC), but can accept wide ranges of those voltages as well.  If using DC volatage, anything from 10 volts to 30 volts will work, and when using AC voltage, anything from 10 volts to 28 volts work just as well.</p>

<p><strong>Rugged Cams</strong> is known for ramping up the Tough factor and packing in the features, and this Camera carries some great new design innovations.</p>

<ul style="list-style:circle">
<li><b>Gasketed Drop Down Access Door</b> that opens a compartment for easy Lens Adjustment</li>
<li>Access Door also has <b>Menu navigation Buttons, a Video Output connection, Infrared Sensitivity switches, Infrared On/Off Switch and an Infrared Power Gain Potentiometer</b> &#8211; all handy and at your fingertips</li>
<li><b>Smart Infrared Technology</b> &#8211; varies the power depending on how close the subject is &#8211; no more white-out effect</li>
<li><b>Sun Shield</b> is adjustable and helps provide cooling on the hottest days and keeps ice off of the camera body on the coldest days</li>
<li><b>Dual Voltage Power Choice</b> &#8211; 12V DC (10-30 volts) and 24V AC (10-28 volts)</li></ul>
<BR>
<img src="images/infrared-outside-camera-tech-info.gif" alt="Outside Camera Tech Information">
<br>
<p>The <strong>Vanguard-700</strong> delivers a lot of performance for a low price. <strong><i>Rugged Cams cameras last!</i></strong>

<div class="page-splits"></div>

<img src="images/vanguard-specifications.png" alt="Vanguard Specifications" align="left">
<img src="images/vanguard-icons.png" alt="Vanguard Icons" align="right">
<img src="images/vanguard-line-drawing.png" alt="Vanguard Line Drawing" align="Left">

            <!-- /.video -->

        </article>
        <!-- /.post -->
<div class="fixedtab righttab tab1">
    <div class="tab lime">
        <img alt="" src="http://www.rugged-cctv.com/images/all-pages/right-side-contact-tab.png" width="25" height="60" >
    </div>
    <div class="tabcontent">
        <form action="../contact.php" method="post">
            Name:<br><input type="text" name="cf_name" class="tab-out-2"><br>
            Company:<br><input type="text" name="cf_company" class="tab-out-2"><br>
            Phone:<br><input type="text" name="cf_phone" class="tab-out-2"><br>
            Email:<br><input type="text" name="cf_email" class="tab-out-2"><br>
            Message or Questions:<br>
            <textarea name="cf_message" class="tab-out-1" rows="0" cols="0"></textarea><br><br><input type="submit" value="Send" style="width:300px;height:45px; background-color: lawngreen"><br><br>
            <input type="reset" value="Clear">
        </form>
    </div>
</div>
<div class="fixedtab righttab tab2">
    <div class="tab orange">
        <img alt="" src="http://www.rugged-cctv.com/images/all-pages/Right-side-support-tab.png" width="25" height="60" >
    </div>
    <div class="tabcontent" style="background-color:silver">
        <form action="http://www.rugged-cctv.com/support-contact.php" method="post">Tech Support Only<br>
            Name:<br><input type="text" name="cf_name" class="tab-out-2"><br>
            Company:<br><input type="text" name="cf_company" class="tab-out-2"><br>
            Phone:<br><input type="text" name="cf_phone" class="tab-out-2"><br>
            Email:<br><input type="text" name="cf_email" class="tab-out-2"><br>
            Message or Questions:<br>
            <textarea name="cf_message" class="tab-out-1" rows="0" cols="0"></textarea><br><br><input type="submit" value="Send" style="width:300px;height:40px; background-color:white"><br><br>
            <input type="reset" value="Clear">
        </form>
    </div>
</div>
<div class="fixedtab righttab tab3">
    <div class="tab blue">
        <img alt="" src="http://www.rugged-cctv.com/images/all-pages/right-side-like-us-tab.png" width="25" height="60" >
    </div>
    <div class="tabcontent">
    <a href="http://pinterest.com/ruggedcams/protect-your-property" target="_blank"><img alt="" src="http://www.rugged-cctv.com/images/all-pages/pintrest-icon.png" width="101" height="33"></a>

        <a href="https://twitter.com/ruggedcctv" target="_blank"><img alt="" src="http://www.rugged-cctv.com/images/all-pages/twitter-icon.png" width="101" height="33"></a>

        <a href="http://www.linkedin.com/in/allenspears" target="_blank"><img alt="" src="http://www.rugged-cctv.com/images/all-pages/linkedin-icon.png" width="101" height="33"></a>
        <a href="https://plus.google.com/107293736862864106103/about" target="_blank"><img alt="" src="http://www.rugged-cctv.com/images/all-pages/google-icon.png" width="101" height="33"></a>
        <a href="http://www.facebook.com/pages/Rugged-CCTV/251536825932" target="_blank"><img alt="" src="http://www.rugged-cctv.com/images/all-pages/facebook-icon.png" width="101" height="33"></a>   
            <a href="http://www.rugged-cctv.com/blog/" target="_blank"><img alt="" src="http://www.rugged-cctv.com/images/all-pages/blogg-icon.png" width="101" height="33"></a>
            <a href="http://www.youtube.com/user/ruggedcctv" target="_blank"><img alt="" src="http://www.rugged-cctv.com/images/all-pages/youtube-icon.png" width="101" height="33"></a>
        </div>
    </div>
    <!-- End Content Area -->

    <!-- /#content --> 

        <!-- Begin Widget -->   

    <!-- /#sidebar -->
<BR><BR>
    <footer id="footer">
    <div align="left"><br><BR>
<p>&copy; 1997 - 2013 <a href="http://www.rugged-cctv.com">Rugged CCTV</a> All Rights Reserved, For more information please <A href="http://www.rugged-cctv.com/contact.shtml">Contact Us</a></p>
</div>
    </footer>
    <!-- /#footer --> 

</div>
<!-- /#pagewrap -->

</body>
</html>

1 个答案:

答案 0 :(得分:1)

我可以发现一些问题......

从chrome developer工具控制台:

GET http://www.kolbree.com/rugged/js/bsa.js 404 (Not Found) 

此行有错误:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

错误:“视口参数值”device-width;“for key”width“无效,已被忽略。请注意';'在视口值中不是分隔符。列表应以逗号分隔。“

我可以在#content看到几个错误......

无位置:绝对;需要在这里。不需要-20%的保证金。