CODEWITHSUNDEEP
htmlcssbutton
Stephen_Josey
Stephen_Josey

Reputation: 50

Separate Div Buttons?

I'm trying to allow the buttons to not be on top of each other! I am pretty sure there is a simple attribute that I need to put into the CSS Code, but I can't seem to figure it out! Also, is there a way to allow the buttons to fill the entire screen, without a lower scroll bar appearing! I tried to used the 100% part in the padding, but that made the page very large!

<style>

    div#menubar2 > a{
        font-family:Aria, Helvetica, sans-serif;
        font-size: 18px;
        background: #333;
        padding: 150px 50%;
        color:#999;
        margin-right: 30px;
        margin-bottom: 30px;
        margin-top: 30px;

        text-decoration:none;
        border-radius: 3px;

        -o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
        -webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
        -ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
        -moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
        transition: background 0.3s linear 0s, color 0.3s linear 0s;
        }

    div#menubar2 > a:hover{
        background: #0099CC;
        color:#FFF;
        }


</style>
</head>

<body>


<div id="menubar2">
<a href="#">Home</a>
<br>
<a href="http://store.kidbomb.com">Shop</a>
<br>
<a href="/maintenance">News</a>
<br>
<a href="/maintenance">Contact Us</a>
<br>
<a href="/support-us">Support Us!</a>
<br>
<a href="/maintenance">Requests</a>

    </div>
</body>
</html>

Upvotes: 1

Views: 78

Answers (3)

Richard Czechowski
Richard Czechowski

Reputation: 433

You need to add

display:inline-block;

to your " div#menubar>a " css

Also, it is good practice to use an unordered list for this sort of thing.

As for the second part of your question, you are using a lot of absolute sizing (px) instead of percentages, so you'd probably need some refactoring to make that work. As it stands it'd take some refactoring.

Upvotes: 1

Andrew Dunai
Andrew Dunai

Reputation: 3129

I'd advice you to learn using

box-sizing: border-box

It solves a lot of problems by preventing div to get bigger when you add paddings, borders etc.

Upvotes: 0

Rafael
Rafael

Reputation: 7746

Hey bud welcome to web design. You need to use what we call a float. 

Float example.

http://jsfiddle.net/fhu6v5L4/1

Upvotes: 1

Related Questions