Portfolio website - One2xs Forum

Lid · Topicstarter

Berichten: 11.099
Reputatie: 0
Punten: 0,00

Lid sinds: 2008
Laatst gezien: 12 jun 2025

18 nov 2011, 16:22

Voor school moet ik een portfolio website maken, het is al aardig aan het lukken. Het enige probleem is dat ik de vakken niet helemaal goed krijg... Ik wil zoiets hebben (http://cxcsimulations.com/how-it-feels/), op de plek van deze slider wil ik alleen een andere slider hebben (http://line25.com/wp-content/uploads/2010/slideshow/demo/demo.html).

De indeling van de vakken is wel iets anders, maar daar kom ik zelf wel uit. Ik kan alleen nergens vinden hoe ik een witte rand om de slider maak, en de vakken daaronder ook direct op de slider laat aansluiten.

Marjolein

Lid

Berichten: 15.446
Reputatie: 0
Punten: 0,00

Lid sinds: 2008
Laatst gezien: 21 dec 2020

18 nov 2011, 16:27

je zet de slider in een div, in de css van die div geeft je de waarde mee van een witte rand > border: 3px solid #ffffff;

En de vakken eronder laat je aansluiten door margin:0; aan die vakken mee te geven.

Jesse

Lid · Topicstarter

Berichten: 11.099
Reputatie: 0
Punten: 0,00

Lid sinds: 2008
Laatst gezien: 12 jun 2025

18 nov 2011, 16:36

Marjolein schreef:
je zet de slider in een div, in de css van die div geeft je de waarde mee van een witte rand > border: 3px solid #ffffff;

En de vakken eronder laat je aansluiten door margin:0; aan die vakken mee te geven.

Dankje Ik heb de slider even apart van de rest van mn layout gedaan, omdat ik gek werd van al die codes Bij die border krijg ik alleen nu dit:
Een border moet normaal gesproken toch precies om het vak (slider) heengaan?
In Google Chrome doet de slider het trouwens goed, maar in Internet explorer bugt hij Wanneer je over de slider heengaat, gaat alles opeens een stuk naar beneden.

Spoiler tonen

Css:

body, h1, ul, li {
    margin: 0; padding: 0; border: 0;
}

body {
    width: 1095px; margin: -40px auto; top: 200px;
    position: relative;
    background: #e8dbcb url(images/bg-texture.jpg);
}

div#slideshow {
    border: 5px solid #ffffff;
    width: 1083px; height: 518px; padding: 15px 0 0 12px;
    overflow: scroll; /* Allows the slides to be viewed using scrollbar if Javascript isnt available */ 
    position: relative; z-index: 5;
}
    div#slideshow ul#nav {
        display: none;
        list-style: none;
        position: relative; top: 210px; z-index: 15;
    }
        div#slideshow ul#nav li#prev {
            float: left; margin: 0 0 0 40px;
        }
        div#slideshow ul#nav li#next {
            float: right; margin: 0 50px 0 0;
        }
        div#slideshow ul#nav li a {
            display: block; width: 80px; height: 80px; text-indent: -9999px;
        }
            div#slideshow ul#nav li#prev a {
                background: url(images/prev.png);
            }
            div#slideshow ul#nav li#next a {
                background: url(images/next.png);
            }

    div#slideshow ul#slides {
        list-style: none;
    }
        div#slideshow ul#slides li {
            margin: 20px;
        }

a {outline: none; }

Index

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Harley Davidson Slideshow</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>

<body>

    <div id="slideshow">
        <ul id="nav">
            <li id="prev"><a href="#">Previous</a></li>
            <li id="next"><a href="#">Next</a></li>
        </ul>
    
        <ul id="slides">
            <li><img src="images/slide1.jpg" alt="Harley Davidson Sportster" /></li>
            <li><img src="images/slide2.jpg" alt="Harley Davidson Sportster" /></li>
            <li><img src="images/slide3.jpg" alt="Harley Davidson Sportster" /></li>
            <li><img src="images/slide4.jpg" alt="Harley Davidson Sportster" /></li>
            <li><img src="images/slide5.jpg" alt="Harley Davidson Sportster" /></li>
        </ul>
    </div>

</body>
</html>