my img tags arnt working?

Question

im trying to put these images in the slider but they just wont show up! heres my code

<!DOCTYPE html> <html>

<head> <title>Home</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <link href="css/bootstrap-theme.css" rel="stylesheet" media="screen"> <style type="text/css"> /* mwuSlider */ .wmuSlider { position: relative; overflow: hidden; padding-top: -5px; margin-top: -5px;

    }
    .wmuSlider .wmuSliderWrapper {
        display: none;
    }
    .wmuSlider .wmuSliderWrapper article {
        position: relative;
        text-align: center;
    }
    .wmuSliderPrev, .wmuSliderNext {
        position: absolute;
        width: 40px;
        height: 80px;
        text-indent: -9999px;
        background: url(css/sprites.png) no-repeat 0 0;
        top: 50%;
        margin-top: -40px;
        z-index: 2;
    }
    .wmuSliderPrev {
        background-position: 100% 0;
        left: 20px;
    }
    .wmuSliderNext {
        right: 20px;
    }


    .wmuSliderPagination {
        z-index: 2;
        position: absolute;
        left: 40%;
        bottom: 10px;
    }
    .wmuSliderPagination li {
        float: left;
        margin: 0 8px 0 0;
        list-style-type: none;
    }
    .wmuSliderPagination a {
        background-image: url('img/imgselect.png');
        display: block;
        text-indent: -9999px;
        width: 15px;
        height: 15px;
        background: #404040;
        border-radius: 6px;
    }
    .wmuSliderPagination a.wmuActive {
        background-image: url('img/imgselect2.png');
        background: #292929;
    }
</style>

</head>

<body>

    <?php include('includes.php'); ?>

<div class="container">

    <div class="wmuSlider">
        <div class="wmuSliderWrapper">

                        <article>
                            <img src="css/11th #3 (2).jpg">
                        </article>
                        <article>
                            <img src="#">
                        </article>
                        <article>
                            <img src="#">
                        </article>
                        <article>
                            <img src="#">
                        </article>

        </div>
    </div>

</div>

<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.wmuSlider.min.js"></script>
<script>var options = {navigationControl: false, animation: "slide"};
$(".wmuSlider").wmuSlider(options);
</script>

</body>

</html>

Answer 1 · 2013-10-21T01:05:39Z

October 21, 2013 1:05am

not sure why the head dosnt look right when i copy/pasted it

<!DOCTYPE html> <html>

<head> <title>Home</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <link href="css/bootstrap-theme.css" rel="stylesheet" media="screen"> <style type="text/css"> /* mwuSlider */ .wmuSlider { position: relative; overflow: hidden; padding-top: -5px; margin-top: -5px;

    }
    .wmuSlider .wmuSliderWrapper {
        display: none;
    }
    .wmuSlider .wmuSliderWrapper article {
        position: relative;
        text-align: center;
    }
    .wmuSliderPrev, .wmuSliderNext {
        position: absolute;
        width: 40px;
        height: 80px;
        text-indent: -9999px;
        background: url(css/sprites.png) no-repeat 0 0;
        top: 50%;
        margin-top: -40px;
        z-index: 2;
    }
    .wmuSliderPrev {
        background-position: 100% 0;
        left: 20px;
    }
    .wmuSliderNext {
        right: 20px;
    }


    .wmuSliderPagination {
        z-index: 2;
        position: absolute;
        left: 40%;
        bottom: 10px;
    }
    .wmuSliderPagination li {
        float: left;
        margin: 0 8px 0 0;
        list-style-type: none;
    }
    .wmuSliderPagination a {
        background-image: url('img/imgselect.png');
        display: block;
        text-indent: -9999px;
        width: 15px;
        height: 15px;
        background: #404040;
        border-radius: 6px;
    }
    .wmuSliderPagination a.wmuActive {
        background-image: url('img/imgselect2.png');
        background: #292929;
    }
</style>

</head>

<body>

    <?php include('includes.php'); ?>

<div class="container">

    <div class="wmuSlider">
        <div class="wmuSliderWrapper">

                        <article>
                            <img src="css/11th #3 (2).jpg">
                        </article>
                        <article>
                            <img src="#">
                        </article>
                        <article>
                            <img src="#">
                        </article>
                        <article>
                            <img src="#">
                        </article>

        </div>
    </div>

</div>

<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.wmuSlider.min.js"></script>
<script>var options = {navigationControl: false, animation: "slide"};
$(".wmuSlider").wmuSlider(options);
</script>

</body>

</html>

Answer 2 · 2013-10-21T09:05:47Z

October 21, 2013 9:05am

I have not reached that lesson yet, but this bit of your code did catch my eye:

    .wmuSlider .wmuSliderWrapper {
        display: none;
    }

My apologies if the lesson explicitly tells you to do that (in which case you can ignore this post), but I thought it might be worth double checking. :)

Welcome to the Treehouse Community

Looking to learn something new?

dylan kane

dylan kane

my img tags arnt working?

2 Answers

dylan kane

dylan kane

James Barnett

James Barnett

michaelfritch

michaelfritch