Css разрывает плагин цикла jquery

Мне удалось использовать плагин цикла для jQuery, чтобы успешно сделать поворотное слайд-шоу с помощью как навигационного инструмента с вкладками, так и ссылку, информация которой собрана из тегов alt изображений.Css разрывает плагин цикла jquery

Оба эти элемента отлично работают сами по себе, но когда они вместе, кажется, ломаются. Я сузил его до возможной проблемы с CSS, когда CSS отключен, все части работают нормально. Но я не могу сузить, какая часть CSS вызывает это.

Кто-нибудь может увидеть что-нибудь, что может мне не хватать?

Код:

<!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"> 
<head> 
<title>jquery fade</title> 
<link rel="stylesheet" type="text/css" media="screen" href="jquery2.css" /> 
<script type="text/javascript" src="js/jquery-1.3.js"></script> 
<script type="text/javascript" src="js/jquery.cycle.all.js"></script> 
<script type="text/javascript"> 

function onAfter() { 
     var link=null; 
     if($(this).attr("alt") == 'link1'){link="link1"} 
     else if ($(this).attr("alt") == 'link2') {link="link2"} 
     else if ($(this).attr("alt") == 'link3') {link="link3"} 
     else {link="link4"}; 

    $('#text').html('<p><a href="' + link + '" target="_blank">' + this.alt + '</a></p>')}; 

$(document).ready(function(){ 
    $('#myslides') 
     .before('<div id="nav">') 
    .cycle({ 
     fx: 'fade', 
     speed: 500, 
     timeout: 3000, 
     after: onAfter, 
    pager: '#nav' 
    })  ; 
}); 
</script> 

</head> 
<body> 
    <div id="content-area"> 
    <div id="myslides"> 
    <img src="image1" alt="alt1" title="title1"/> 
    <img src="image2" alt="alt2" title="title2"/> 
    <img src="image3" alt="alt3" title="title3"/></a> 
    <img src="image4" alt="al4" title="title4"/></a> 
    </div> 

     <div id="text"> 
     </div> 
</div> 
</body> 
</html>

CSS: @charset "UTF-8"; /* CSS документ */

body { 
    background: rgb(230,230,230); 
} 

#content-area{ 
    width: 586px; 
    height: 311px; 
} 

#myslides { 
    width: 586px; 
    height: 311px; 
    padding: 0; 
    margin: 0 auto; 
    z-index: 0; 
} 

#myslides img { 
    width: 586px; 
    height: 311px; 
    top: 0; 
    left: 0; 
    border : 0; 
} 

#text { 
    height: 34px; 
    width: 586px; 
    background-image:url(images/text-transperancy.png); 
    position: absolute; 
    top: 285px; 
    z-index:50; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    color:#FFF; 
} 

#text p { 
    margin-left: 10px; 
    line-height: 10px; 
    } 

#text a { 
    outline: none; 
    border : 0; 
    text-decoration: none; 
    color:#FFF; 
    } 

#text a.visited { 
    color:#FFF; 
    } 
#text a:focus { 
    outline: none; 
    border : 0; 
    color:#FFF; 
    text-decoration: none 
} 

#text a:link { 
    font-family:Arial, Helvetica, sans-serif; 
    color:#FFF; 
    border : 0; 
    text-decoration: none; 
} 

#nav { 
    padding-left: 465px; 
    position: absolute; 
    top: 295px; 
    z-index: 100; 
} 

#nav a { 
    margin: 0 5px; 
    padding: 3px 5px; 
    border: 1px solid #fff; 
    background: #0079c2; 
    text-decoration: none; 
    z-index: 100; 
    } 

#nav a.activeSlide { 
    background: #6eb43f; 
    z-index: 100; 
    } 
#nav a:focus { 
    outline: none; 
    z-index: 100; 
    } 

#nav a:link { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    color:#FFF; 
    z-index: 100; 
}

источник

2010-02-25 VikingGoat

Ничего, нашел этот вопрос, оказывается, что что #nav ДИВ покрывал над #text DIV.

источник

2010-02-26 19:33:15 VikingGoat

Css разрывает плагин цикла jquery

ответ

Смежные вопросы