CODEWITHSUNDEEP
csshtml
Dylan Hobday
Dylan Hobday

Reputation: 73

Buttons aren't showing on the page HTML5

I have these buttons. However they down't want to show on the page. I don't have any CSS that should conflict with the buttons' visibility. Sorry if this is a dumb question I am a little rusty on my CSS. 

HTML: 

<!doctype html> 
<html>
    <head>
        <title>Hello, World!</title>
        <!--references-->
        <link rel="stylesheet" type="text/css" href="styles/index.css" />
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    </head>
        <body>
            <div id="wrapper">
                <div id = "box">
                    <h1 id="head">hello, world!</h1>
                    <div id = "btn-panel">
                        <button class="btn" id="btn1">panel1</button>
                        <button class="btn" id="btn2">panel2</button>
                        <button class="btn" id="btn3">panel3</button>
                        <button class="btn" id="btn4">panel4</button>
                    </div><!--button-panel-->
                </div> <!--Box-->
            </div> <!--wrapper-->
        </body>
    <script src="js/Index.js" type="text/javaScript"></script>
</html>

CSS: 

    body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300; 
}

#wrapper {
    width: 100%;
    height: 100%;
}

#box {
    background-color: #EEE;
    Width: 100%;
    Height: 250px;
    margin-left: auto;
    margin-right: auto;
    Text-align: center; 
}

#head {
    padding-top: 25px;
    font-size: 20pt;
}
#btn-panel {
    width: 1000%;
    height: 100px;
    margin-top: 50px;
}

.btn {
    width: 100px;
    height: 25px;
    border-radius: 5px;
}

Any help would be greatly appreciated. Thanks.

Upvotes: 0

Views: 62

Answers (2)

Yash Jain
Yash Jain

Reputation: 1

#btn-panel {
width:100%; /*or pixels, whichever one you chose*/
height:100px;
margin-top:50px;
}

You didn't write 100%.

Upvotes: 0

hesonline
hesonline

Reputation: 76

Here's your problem

#btn-panel {
  width: 1000%; /* <- Should be 100, not 1000 */
  height: 100px;
  margin-top: 50px;
}

Upvotes: 1

Related Questions