Question

嘿我在网站上遇到一些问题，因为当你调整浏览器大小时，滑块会延伸到页脚

另一个是当滑块进入并居中时导航无法正常工作（无法点击任何内容）

这是html

<!DOCTYPE html>
<html lang="en">
<!--To Do: -->
<!-- list menu logo size  -->
<!--all other pages -_- -->
  <head>
    <meta charset="utf-8">
    <title>Wall Space Gallery And Framing</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/royalslider.css">
  <link rel="stylesheet" href="css/royalslider-skins/minimal/minimal.css">
  </head>
  <body>


<header>
                    <div class="logo">
                                        <a id="single_image" href="index.html"><img src="img/logo.png" alt=""/></a>
                    </div> 

                    <ul id="navigation">
                        <li id="active"><a href="index.html" alt="home" >Home</a></li>
                        <li><a href="exhibitions.html" alt="Exhibitions"> Exhibitions</a></li>
                        <li><a href="artists.html" alt="Artists"> Artists</a></li>
                        <li><a href="contact.html" alt="Contact"> Contact</a></li>
                    </ul>


</header>

<div id="content">
<div id="mySlider" class="royalSlider minimal">        
    <!-- Container of slides(images) -->       
    <ul class="royalSlidesContainer">
        <!-- Slides -->
        <li class="royalSlide">
            <img class="royalImage" src="img/image1.jpg" width="5" height="100%"/>
        </li> 
        <li class="royalSlide">
            <img class="royalImage" src="img/image2.jpg" width="100%" height="100%"/>
            <div class="royalCaption">
                <!-- Caption items, can be <h2>, <p>, <div>, or other block -->
                <div class="royalCaptionItem" data-move-offset="15">Caption 1 for image 2</div>
                <h2 class="royalCaptionItem" data-show-effect="fade movetop">Caption 2 for image 2</h2>
            </div> 
         </li> 
        <li class="royalSlide">
            <img class="royalImage" src="img/image3.jpg" width="100%" height="100%"/>
        </li>
    </ul>
</div>

</div>

<footer>
    <div id="copyright">
        <p>Copyright &copy Wall Space Gallery And Framing 2012</p>
    </div>

    <div id="twenty">
        <p>Website By <a href="http://www.22twenty.com">22Twenty</a> Complete Web Solutions</p>
    </div>    
</footer>






<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.min.js"></script>
<script src="js/royal-slider-8.1.min.js"></script>
<script>
$(document).ready(function() {
    $("#mySlider").royalSlider({
        captionShowEffects:["moveleft", "fade"],
        directionNavAutoHide: true,
        slideshowEnabled: true,                // Autoslideshow enabled          
        slideshowDelay:5000,                    // Delay between slides in slideshow
        slideshowPauseOnHover: true,            // Pause slideshow on hover
        slideshowAutoStart:true,                // Auto start slideshow 


        /* other options go here, view javascript options to learn more */          
    });  
});
</script>        
</body>
</html>

继承人css

/*Global Styling*/
html, body{
    padding: 0;
    margin: 0;
    height:100%;
    width:100%;
}
/*Navigation & Header Styling*/
.logo{
    float:left;
    border-bottom:0;
    padding-left:145px;
    border-radius:15px;
    -moz-border-radius: 15px;

}
header{
    height: 100px;
    width: 100%;
    background-color: #FFF;
}
header ul {
    float: right;
    padding-right: 10%;
    padding-top: 110px;
}
header ul li{
    display: inline;
    font-family: Arial;
    margin: 15px;
    font-size: 20px;
}
header ul li a{
        text-decoration: none;
        color: #000;
        opacity: 0.5;
        -moz-opacity: 0.5;
        filter:alpha(opacity=5);;
        transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;       
}
#navigation li a:hover{
    opacity: 10;
    -moz-opacity: 10;
    filter:alpha(opacity=100);
}
#navigation #active a {
    filter:alpha(opacity=100); 
    -moz-opacity: 1.0; 
    opacity: 1.0;
    -khtml-opacity: 1.0;
}

/*Main Content Styling*/
/*Homepage Slider Styling   */

    #mySlider {
        padding-top:200px;
        width: 80%;         
        height: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    #content{
        width:100%;
        padding-bottom:50px;
    }

 /*Footer*/
 footer{
    height:100px;
 }
/*CopyRight*/
#copyright{
    text-align: center;
    font-size:20px;
    font-family:Arial;
}
#twenty{
    text-align: center;
    font-size:10px;
    font-family:Arial;
}
#twenty a{
    text-decoration:none;
    color:grey;
}

Div扩展和菜单问题

0 个答案: