Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Shaun Kelly
Shaun Kelly
35,560 Points

Help needed on my website (HTML/CSS/JQUERY)

Hi guys i need help with my website. Below is what i have already coded. The space I have in the middle of the page will kind of be a slideshow however i am unsure on how to achieve this effect. The content that is in the middle will change on the click of an arrow at the bottom. The content will also look like it is being pushed out of view to the left or right of the browser. Any help would be appreciated.

Thanks,

<!DOCTYPE HTML>
<html>
  <head>
    <title>Shaun Kelly | Web Design &amp; Developer</title>
    <link href="css/style.css" rel="stylesheet" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
    <link href="http://fonts.googleapis.com/css?family=Lato:100,300,300italic,400,400italic,900,900italic" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="topBar">
      <h1>SHAUN KELLY - WEB DESIGN &amp; DEVELOPER</h1>
    </div>

    <div id="slide1">
      <h1>Welcome,</h1>
      <p>Im Shaun, a self taught web design &amp; developer based in Birmingham, West Midlands. Thanks for taking the time to check out my portfolio! Feel free to browse through my work and explore my vision of simplicity. I am currently seeking employment as a Junior Web Design/Developer.</p>
    </div>


    <div id="bottomBar">

      <a href="#" class="arrow-prev"><img src="img/arrow-prev.png"></a>
      <h1>NAVIGATE</h1>
      <a href="#" class="arrow-next"><img src="img/arrow-next.png"></a>

    </div>

  </body>
</html>

html, body {
    margin: 0;
    background-color: #fff;
}

#topBar {
position: fixed;
top: 0;
width: 100%;
height: 90px;
border-bottom: solid #e6e6e6 1px;
background-color: #fff;
}

#topBar h1 {
    padding-left: 30px;
    color: #A4a4a4;
    font-family: "oswald";
    font-size: 25px;
}


#bottomBar {
position: fixed;
bottom: 0;
width: 100%;
height: 70px;
border-top: solid #e6e6e6 1px;
text-align: center;
background-color: #fff;
display: inline;
padding-top: 30px;
}

#bottomBar h1 {
    font-family: "Oswald";
    font-size: 22px;
    color: #A4A4A4;
    display: inline;
    padding-left: 15px;
    padding-right: 15px;
}

#slide1 {
    margin-top: 90px;
    margin-bottom: 70px;
    padding: 10px 30px;
    font-family: "Oswald";
}

#slide1 p {
    max-width: 600px;
    color: #898989;
    font-size: 22px;
}

3 Answers

Maria Victoria Reyes
Maria Victoria Reyes
17,731 Points
Maria Victoria Reyes
Maria Victoria Reyes
17,731 Points

utilize Bootstrap's carousel.js http://getbootstrap.com/javascript/#carousel. Check out the documentation for Bootstrap. :)

Shaun Kelly
Shaun Kelly
35,560 Points

Where do i get the javascript file to link to?

Dryden Williams
Dryden Williams
4,223 Points
Dryden Williams
Dryden Williams
4,223 Points

Hi Shaun,

Great start scaffolding your html for the carousel. If you want to do it from scratch I would definitely recommend looking at the Bootstrap carousel for some HTML structure. Inspect the elements for CSS tips such as .slides to display: inline-block; ( I prefer using inline-blocks than floats ) and overflow-x: hidden;.

This will get everything looking great but to get the same functionality or "behaviour" I would use jQuery...heres a handy tutorial:

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/

this tutorial is also quite helpful for the entire project:

https://www.youtube.com/watch?v=CbjHtl_qv_g

Creating a carousel does take a bit of work from scratch. If you're on a tight deadline I would use a pre-existing carousel from bootstrap; its such a well documented framework and super easy to install.

Dryden Williams
Dryden Williams
4,223 Points
Dryden Williams
Dryden Williams
4,223 Points

Here's a tutorial to make a your bootstrap carousel... https://www.youtube.com/watch?v=R0nkkXkrby0

you just need to make sure you have downloaded the bootstrap.js file from their website and then include it into your index.html file

      <script src="js/bootstrap.js"></script>
   </body>
</html>