EasySlider and CSS not playing nicely_问答_开发者

开发者 https://www.devze.com 2023-03-05 17:16 出处：网络

I\'m just wondering if you can tell me why the slider at www2.chrislrobinson.co.uk doesn\'t work properly. I\'ve lifted the code from their examples. It seems to work fine when the page first loads, b

相关专题：css easyslider

I'm just wondering if you can tell me why the slider at www2.chrislrobinson.co.uk doesn't work properly. I've lifted the code from their examples. It seems to work fine when the page first loads, but if you refresh, the image is stretched all across the page and it is very thin (i.e. height and width get screwed up).

Here is the relevant HTML:

<body>
<div id="container">  
...
<div id="mainContent">
...
    <div id="slider"> 
        <ul>                
            <li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li> 
            <li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li> 
            <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li> 
            <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li> 
            <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>          
        </ul> 
    </div>

and the paraphrased CSS:

#slider ul,  #slider li{
margin:0;
padding:0;
list-style:none;
}   

#slider,  #slider li{ 
width:696px;
height:241px;
overflow:hidden; 
}

body  {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #000000 url('images/bg.png') no-repeat top center;
margin: 0;
padding: 0;
text-align: center;
color: #FFFFFF;
}

#container { 
width: 804px;  /* this will create a container 80% of the browser width */
background: transparent;
margin: 0 auto;
text-align: left; /* this overrides the text-align: center on the body element. */
/*border: 2px solid rgba(255,255,255,1);*/
} 

#mainContent {
background: rgba(60,60,60,0.75) no-repeat top center;
width: 800px; 
border: 2px solid rgba(184,0,31,1); 
padding: 0px;
min-height: 600px;
-moz-border-radius: 10开发者_运维知识库px; 
-khtml-border-radius: 10px; 
-webkit-border-radius: 10px; 
min-height: 400px;
clear: both;
} 

span#prevBtn{}

span#nextBtn{}

Thanks! Chris

EDIT: If you keep refreshing it, it eventually works again for a bit! But that's not really a solution...

EDIT 2: I found out that when it displays weirdly, this is the HTML:

<div id="slider" style="width: 953px; height: 18px; overflow-x: hidden; overflow-y: hidden; "> Anyone know why this might be changing?

I viewed your source and the first thing I would recommend is using a Reset Stylesheet or * {margin:0;padding:0} this will reset all your css properties across all browsers.

Then on #slider, #slider li add.

 #slider, #slider li {width:600px;height:200px}

This should help you achieve your goal.

Edit: And if you want to center your slideshow add

{margin:0 auto}

EasySlider and CSS not playing nicely

精彩评论

关注公众号

热门标签

图文推荐

EasySlider and CSS not playing nicely

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：