网址 - http://www.eden-lime-mortar.co.uk/index18.html
随着屏幕尺寸的减小（大约相当于平板电脑视图），响应式幻灯片图像与div与菜单重叠。
使用Dreamweaver流体网格和模板。
HTML：
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!-- InstanceBegin template="/Templates/2017.dwt" codeOutsideHTMLIsLocked="false" -->
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<link href="fluid/boilerplate.css" rel="stylesheet" type="text/css">
<link href="2017fluid.css" rel="stylesheet" type="text/css">
<link href="2010copy.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="fluid/respond.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script>
$(function() {
$(".rslides").responsiveSlides({
auto: true,
speed: 1500,
timeout: 4000,
maxwidth: "500",
});
});
</script>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"><img src="images/Img_39211.jpg" alt="hot lime mortar" class="imgheader"></div>
<div id="rightcol">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Home</a> </li>
<li><a href="#">Hot Lime Mortar</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Products</a>
<ul>
<li><a href="#">Hot Lime Mortar</a> </li>
<li><a href="#">Hydraulic Limes</a></li>
<li><a href="#">Finishes</a></li>
<li><a href="#">Eden Lime Insulation</a></li>
<li><a href="#">Savolit</a></li>
<li><a href="#">NBT</a></li>
<li><a href="#">Geocell</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Materials</a></li>
<li><a href="#">Pozzolan</a></li>
</ul>
</li>
<li><a href="#">Hot Lime Training</a></li>
<li><a href="#">Eden Lime Insulation</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p> </p>
</div>
<!-- InstanceBeginEditable name="EditRegion1" -->
<div id="leftcoltop">
<ul class="rslides">
<li><img src="slide1.jpg" alt=""></li>
<li><img src="slide2.jpg" alt=""></li>
<li><img src="slide3.jpg" alt=""></li>
<li><img src="slide4.jpg" alt=""></li>
<li><img src="slide5.jpg" alt=""></li>
<li><img src="slide6.jpg" alt=""></li>
<li><img src="slide7.jpg" alt=""></li>
<li><img src="slide8.jpg" alt=""></li>
<li><img src="slide9.jpg" alt=""></li>
<li><img src="slide10.jpg" alt=""></li>
<li><img src="slide11.jpg" alt=""></li>
</ul>
</div>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="EditRegion5" -->
<div id="toprightinfo">
<span class="toprighthd">Eden Hot Lime Mortar </span><br>
<span class="toprighthd">Manufacturer and Retailer
of Hot Lime Mortar, Lime Putty
& Lime Insulation.<br>
<br>
</span>
<span class="toprightp"> Call or Email Now to discuss how HLM can help your building project<br>
07717400233<br>
info@hotlimemortar.com</span>
<p class="toprightp"><br>
</p>
</div>
<!-- InstanceEndEditable -->
<div id="rightcolbody"><!-- InstanceBeginEditable name="EditRegion2" -->EditRegion2<!-- InstanceEndEditable --></div>
<div id="fotter">
<h3><img src="images/keim.gif" alt="Keim" border="0"><img src="products/GEOCELLLogo.png" alt="Geocell"><img src="products/pavatex.png" alt="pavatex"></h3>
<h3>Hot Lime Mortar Ltd</h3>
<p><strong>Manufacturer and Retailer of Hot Lime Mortar and Lime Putty</strong></p>
<p>Edenholme, Great Musgrave, Kirkby Stephen, Cumbria, CA174DP<br>
Tel:07717400233 Email: info@hotlimemortar.com<br>
All Material on this site © Eden Lime Mortar</p>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
<!-- InstanceEnd -->
</html>
CSS - 用于编辑样式
html, body, ul, ol, li, p, h1, h2, form, fieldset {
margin: 0px;
padding: 0px;
border: 0px;
list-style-image: url(none);
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 100.01%;
background-image: url(images/backgroundwall.jpg);
background-repeat: repeat;
}
#LayoutDiv1 {
}
.gridContainer.clearfix {
background-color: #756e52;
}
#leftcol {
background-color: #756e52;
}
#leftcoltop {
margin-left: 1px;
}
/*right col is actually left n vice versa*/
#rightcolbody {
background-color: #FFF;
margin-top: 5px;
margin-bottom: 5px;
padding: 0;
}
.floatright {
float: right;
border: 2px solid #150B0A;
margin-right: 5px;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.hlmlogo {
display: block;
margin-left: auto;
margin-right: auto
}
.imgheader {
margin-bottom: 15px;
}
.imglogo {
margin-top: 5px;
margin-bottom: 15px;
}
#rightcol {
margin-bottom: 5px;
}
.toprighthd {
font-family: "Book Antiqua", serif;
color: #FAF9ED;
font-size: 130%;
text-align: center;
margin-top: 10px;
}
.toprightp {
color: #EBE8BD;
font-size: 95%;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
text-align: center;
}
h1 {
font-family: "Book Antiqua", serif;
font-size-adjust: 140%;
color: #150B0A;
margin-left: 15px;
}
h2 {
font-family: "Book Antiqua", serif;
color: #372E25;
font-size: 125%;
}
h3 {
font-family: "Book Antiqua", serif;
font-size: 125%;
color: #8E8870;
}
h4 {
}
a {
color: #A29B81;
}
p {
font-family: Georgia, "Times New Roman", Times, serif;
color: #594D35;
font-size: 100%;
margin-right: 3px;
margin-left: 3px;
}
#fotter {
text-align: center;
}
#fotter h3 {
color: #B0AB8D;
}
#fotter p {
color: #EEEEEC;
}
如果需要，可以发布样板css和流体css吗？
答案 0 :(得分：0)
您的.MenuBarVertical和.MenuBarVertical li已将宽度设置为8em。如果将这些块的宽度样式更改为100％，它应该可以按预期工作。