Forenindex » Programmierung/Entwicklung » JavaScript » HTML Java Slider + CSS

HTML Java Slider + CSS

Feuerländer
Beiträge gesamt: 79

4. Apr 2011, 11:17
Bewertung:

gelesen: 2342

Beitrag als Lesezeichen
Hi,
diesen einfachen Slider habe ich versucht in den HTML Tags anzuordnen- leider komme ich mit dem CSS einbetten nicht klar....[SLIDER: http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html]


<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Unbenannte Seite</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/svwp_style.css" type="text/css" media="screen" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.slideViewerPro.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).bind("load", function() {
$("div#mygalone").slideView()
});
</script>


.svw {width: 50px; height: 20px; background: #fff ;}
.svw ul {position: relative; left: -999em;}

/*core classes*/
.stripViewer {
position: relative;
overflow: hidden;
border: 5px solid #ff0000 ;
margin: 0 0 1px 0;
}
.stripViewer ul { /* this is your UL of images */
margin: 0;
padding: 0;
position: relative;
left: 0;
top: 0;
width: 1%;
list-style-type: none;
}
.stripViewer ul li {
float:left;
}
.stripTransmitter {
overflow: auto;
width: 1%;
}
.stripTransmitter ul {
margin: 0;
padding: 0;
position: relative;
list-style-type: none;
}
.stripTransmitter ul li{
width: 20px;
float:left;
margin: 0 1px 1px 0;
}
.stripTransmitter a{
font: bold 10px Verdana, Arial;
text-align: center;
line-height: 22px;
background: #ff0000 ;
color: #fff ;
text-decoration: none;
display: block;
}
.stripTransmitter a:hover, a.current{
background: #fff ;
color: #ff0000 ;
}

/*tooltips formatting*/
.tooltip
{
padding: 0.5em;
background: #fff ;
color: #000 ;
border: 5px solid #dedede ;
}
</head>

<body>
<div id="mygalleryinpost10.12.2006" class="svw">
<ul>
<li><img src="picts/10.jpg" alt="my description for this image" /></li>
<li><img src="picts/08.jpg" alt="this is my dog..." /></li>
<li><img src="picts/03.jpg" alt="my dog eating the cat" /></li>
<li><img src="picts/05.jpg" alt="my r/c helicopter crashing..." /></li>
<!--eccetera-->
</ul>
<div id="mygalone" class="svw">
<ul>
<li><img alt="abc defrg thysu ooip jkifbtg fff" src="picts/01.jpg" /></li>
<li><img alt="abc defrg thysu ooip jkifbtg fff" src="picts/02.jpg" /></li>
<li><img alt="abc defrg thysu ooip jkifbtg fff" src="picts/03.jpg" /></li>
<li><img alt="abc defrg thysu ooip jkifbtg fff" src="picts/04.jpg" /></li>
<!-- eccetera -->
<li><img alt="abc defrg thysu ooip jkifbtg fff" src="picts/15.jpg" /></li>
</ul>
</div>

</div>

</body>

</html>