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

HTML

Posted by Furquan Ahmad
Furquan Ahmad
5,148 Points

Button link won't work

I'm trying to create a responsive video background using boostrap and HTML. However i can't get the boostrap button to click to the next page on the site. Not even a simple href text link seems to work, i'm not sure why this is happening. When i put the link outside the video code it seems to work fine. I'm new to Boostrap the "Welcome banner doesn't seem to be responsive either".

<div class = "header-container">
    <div class = "video-container">
     <video preload = "true" autoplay = "autoplay" loop = "loop"  volume = "0" poster = "img/fordgt.jpg">
     <source src = "video/mustang.mp4" type = "video/mp4">
     <source src = "video/mustang.webm" type =  "video/webm">
     <source src = "video/fordgt.ogv" type = "video/ogv">
     </video> <!-- end of video --> 
    </div>

    <h3 class = text-center> WELCOME TO THE IT SURVIVAL GUIDE </h3>
     <div class="centered">
     <a href="services" class="btn">Go!</a>
     <button <a href = "services" type="button" class="btn btn-primary btn-md round">Get Started></button>
    </div>

   </div> 

   </div> 

    </div>

Here's the styling i used 

  .header-container {
            width : 100%;
            height : 900px;
            border-left: none;
            border-right: none;
            position: relative;
            padding: 20px;
        }


   .video-container{
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;

   }

   video {
    position: absolute;
    z-index: -1;
    opacity: 0.85;
    width: 100%;
   }



   h3 {
    color: #fff;
    z-index: 1;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20%;
    margin-bottom: ;
    border: 3px solid #fff;
    padding: 10px;
    border-radius: 15px;
    width: 700px;
    letter-spacing: 3px;
    font-size: 25px;
    font-family: Montserrat,"Helvetica Neue";

   }

2 Answers

Tobias Helmrich
Tobias Helmrich
31,604 Points
Tobias Helmrich
Tobias Helmrich
31,604 Points

Hey,

firstly I noticed that you didn't close your opening button tag and you also didn't close your a tag. Besides that the problem in your code is that you don't have to use a button element to have a button in Bootstrap because Bootstrap will style the anchor element with the class of .btn like a button.

Oh and another thing I noticed is that you can't give an anchor element the type attribute with the value of button. The type attribute with anchors is for the media type and works different than than the type attribute with an element like - let's say - an input. And your href link also doesn't lead to another HTML page if that's what you want. So if the page is called services.html you should write this instead of just services.

Oops, and another edit, I'm sorry: Also try to remove the whitespace between attributes and their value (for example write class="video-container" instead of class = "video-container")

<a href="services" class="btn btn-primary btn-md round">Get Started></a>

I hope that helps and that I understood your problem correctly! If not or if you have further questions feel free to ask! :)

Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points

Guess another cup of coffee is needed. Lol. I didn't notice the missing closing anchor tag. :/

Tobias Helmrich
Tobias Helmrich
31,604 Points

Hehe, don't worry. I didn't notice it at first either! :)

Furquan Ahmad
Furquan Ahmad
5,148 Points

Hi thanks so much for the reply i added the new button but this didn't seem to work, is it something to do with the video preventing me to add links ?

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,863 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points

Hey Furquan,

It looks like your missing a closing > on your opening button tag. Try that and see if that fixes it.

Also, just a note. While whitespace doesn't affect the execution of HTML, it is the convention among most programmers to not have any space(s) before or after the equal signs in the attribute assignments. Eg. class="main" instead of class = "main" etc ... Just something to think about.

Keep Coding! :)

Furquan Ahmad
Furquan Ahmad
5,148 Points

Will be watching out for the whitespace next time, this didn't solve the issue with the missing > Thanks for the reply