PC Ekspert Forum - View Single Post

sinisa1989 · 21.01.2013., 13:19

HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>

<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    
<div id="wrapper">    <!-- ovo sam dodao da bi centrirao slide (u css-u imaš dvije linije koje se vežu na to. ništa važno, samo centriranje slide-a.)-->
    <div id="slideshow">

        <ul class="slides">
            <li><img src="1.jpg" alt="" /></li>
        </ul>

        <span class="arrow previous"></span>
        <span class="arrow next"></span>
    </div>
</div>
    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

CSS:

Code:

*{
    margin:0;
    padding:0;
}

body{
    color:#eee;
    background:url('img/bg.jpg') repeat-x #0c0d10;
    font:13px "Lucida Sans Unicode",Arial,Helvetica,sans-serif;
}

/* -- new*/
#wrapper
{
    width: 960px;
    margin: 0 auto;
}
/* --end-of-new*/
#slideshow{
    background-color:#F5F5F5;
    border:1px solid #FFFFFF;
    /*height: 540px;*/ /*original "height: 340px" */
    /*margin:150px auto 0;*/
    position:relative;
    /*width: 840px;*/ /* original "width: 640px;" */
    display: inline-block;
  
    -moz-box-shadow:0 0 22px #111;
    -webkit-box-shadow:0 0 22px #111;
    box-shadow:0 0 22px #111;
}

#slideshow__ ul{ /* dodan__ zbog selektora*/
    height: 520px; /*original "height: 320px" */
    left:10px;
    list-style:none outside none;
    overflow:hidden;
    position:absolute;
    top:10px;
    width: 820px; /*original "width: 620px" */
}

#slideshow li{
    /*position:absolute;*/ /* --new */
    display:none;
    z-index:10;
}

#slideshow li:first-child{
    display:block;
    z-index:1000;
}

#slideshow .slideActive{
    z-index:1000;
}

#slideshow canvas{
    display:none;
    position:absolute;
    z-index:100;
}

#slideshow .arrow{
    height:86px;
    width:60px;
    position:absolute;
    background:url('img/arrows.png') no-repeat;
    top:50%;
    margin-top:-43px;
    cursor:pointer;
    z-index:5000;
}

#slideshow .previous{ background-position:left top;left:0;}
#slideshow .previous:hover{ background-position:left bottom;}

#slideshow .next{ background-position:right top;right:0;}
#slideshow .next:hover{ background-position:right bottom;}


/* The following styles are only used for the styling of the demo page */

p.tzine{
    text-align:center;
    font-size:12px;
    margin:50px;
}

p.credit{
    text-align:center;
    color:#888;
    font-size:10px;
}

p.credit a,
p.credit a:visited{
    color:#ccc;
    border-bottom-color:#aaa;
}

p.credit a:hover{
    border-bottom-color:transparent;
}

a, a:visited {
    text-decoration:none;
    outline:none;
    border-bottom:1px dotted #97cae6;
    color:#97cae6;
}

a:hover{
    border-bottom:1px dashed transparent;
}

.clear{
    clear:both;
}

Ovako nešto.
U css-u sam ti promijenio jedan selektor, jer mi se nije dalo komentirati liniju po liniju.

Ovo sam nabrzinu napravio, pa sam možda/vjerojatno shebao pozicioniranje slide-a. Valjda ti to nije problem vratiti.